/**
 * Robwoh Unified Advisory — Design System Tokens Export
 * Format: CSS Custom Properties (3-Tier DTCG Architecture)
 * Standards: WCAG 2.2 AA/AAA Compliant, Fluid Typography, Modern Corporate Precision
 */

:root {
  /* =========================================================================
     TIER 1: PRIMITIVE TOKENS (Raw values)
     ========================================================================= */

  /* Obsidian / Slate-Dark Primitives */
  --primitive-color-slate-950: #070E12;
  --primitive-color-slate-900: #0E1C24; /* Canonical Corporate Dark Canvas */
  --primitive-color-slate-850: #11222C; /* Dark Card Surface */
  --primitive-color-slate-800: #162B37; /* Dark Elevated Card Surface */
  --primitive-color-slate-750: #1B3442;
  --primitive-color-slate-700: #1E2E38; /* Dark Hairline Divider */
  --primitive-color-slate-600: #263B47;
  --primitive-color-slate-500: #354F5E;

  /* Emerald / Jade Primitives (Canonical Brand Accent: #10B981) */
  --primitive-color-emerald-900: #064E3B;
  --primitive-color-emerald-800: #065F46;
  --primitive-color-emerald-700: #047857;
  --primitive-color-emerald-600: #059669; /* Hover state */
  --primitive-color-emerald-500: #10B981; /* Canonical High-Impact Accent */
  --primitive-color-emerald-400: #22C55E; /* Vibrant Live Indicator / Glow */
  --primitive-color-emerald-300: #6EE7B7;
  --primitive-color-emerald-200: #A7F3D0;
  --primitive-color-emerald-100: #ECFDF5;

  /* Neutral Primitives */
  --primitive-color-neutral-white: #FFFFFF;
  --primitive-color-neutral-studio: #F4F7F8;     /* Modern studio contrast section */
  --primitive-color-neutral-studio-alt: #ECF0F1; /* Soft neutral panel */
  --primitive-color-neutral-charcoal: #111827;   /* High-contrast heading text */
  --primitive-color-neutral-gray-800: #1F2937;
  --primitive-color-neutral-gray-700: #374151;   /* High-readability body text */
  --primitive-color-neutral-gray-600: #4B5563;   /* Secondary muted text (5.6:1 WCAG AA) */
  --primitive-color-neutral-gray-500: #6B7280;   /* Muted metadata */
  --primitive-color-neutral-gray-400: #9CA3AF;
  --primitive-color-neutral-gray-300: #CBD5E1;
  --primitive-color-neutral-gray-200: #E2E8F0;   /* Clean structural hairline border */
  --primitive-color-neutral-gray-100: #F1F5F9;
  --primitive-color-neutral-gray-50: #F8FAFC;

  /* Translucent & Texture Overlays */
  --primitive-overlay-vignette-dark: linear-gradient(90deg, rgba(14, 28, 36, 0.95) 0%, rgba(14, 28, 36, 0.70) 50%, rgba(14, 28, 36, 0.20) 100%);
  --primitive-overlay-emerald-glow: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0) 70%);
  --primitive-overlay-white-faint: rgba(255, 255, 255, 0.04);
  --primitive-overlay-white-subtle: rgba(255, 255, 255, 0.10);
  --primitive-overlay-white-medium: rgba(255, 255, 255, 0.20);
  --primitive-overlay-white-prominent: rgba(255, 255, 255, 0.40);
  --primitive-pattern-pinstripe: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 12px);

  /* Fonts */
  --primitive-font-heading: 'Plus Jakarta Sans', 'Manrope', sans-serif;
  --primitive-font-body: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing Scale (4px baseline) */
  --primitive-space-0: 0px;
  --primitive-space-1: 4px;
  --primitive-space-2: 8px;
  --primitive-space-3: 12px;
  --primitive-space-4: 16px;
  --primitive-space-5: 20px;
  --primitive-space-6: 24px;
  --primitive-space-7: 28px;
  --primitive-space-8: 32px;
  --primitive-space-9: 36px;
  --primitive-space-10: 40px;
  --primitive-space-12: 48px;
  --primitive-space-14: 56px;
  --primitive-space-16: 64px;
  --primitive-space-20: 80px;
  --primitive-space-24: 96px;
  --primitive-space-28: 112px;
  --primitive-space-30: 120px;

  /* Motion & Easing */
  --primitive-duration-instant: 150ms;
  --primitive-duration-fast: 250ms;
  --primitive-duration-normal: 350ms;
  --primitive-duration-slow: 550ms;
  --primitive-duration-cinematic: 800ms;
  --primitive-ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
  --primitive-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* =========================================================================
     TIER 2: SEMANTIC TOKENS
     ========================================================================= */

  /* Canvas & Surface Colors */
  --color-canvas-base: var(--primitive-color-neutral-white);
  --color-canvas-alt: var(--primitive-color-neutral-studio);
  --color-canvas-studio: var(--primitive-color-neutral-studio);
  --color-canvas-white: var(--primitive-color-neutral-white);
  --color-canvas-dark: var(--primitive-color-slate-900);
  --color-canvas-dark-card: var(--primitive-color-slate-850);
  --color-canvas-dark-elevated: var(--primitive-color-slate-800);

  /* Breadcrumb & Inner Page Header Surface (Executive Slate Gray - Unified Studio Canvas) */
  --color-breadcrumb-banner-bg: #F4F7F8;
  --color-breadcrumb-banner-bg-gradient: none;
  --color-breadcrumb-banner-border: #E2E8F0;
  --color-breadcrumb-banner-title: #0E1C24;
  --color-breadcrumb-text: #64748B;
  --color-breadcrumb-link: #475569;
  --color-breadcrumb-link-hover: #059669;
  --color-breadcrumb-sep: #94A3B8;
  --color-breadcrumb-current: #059669;

  /* Text Colors — Light Surfaces (WCAG 2.2 AA/AAA) */
  --color-text-dark-primary: var(--primitive-color-neutral-charcoal); /* 15.5:1 on white */
  --color-text-dark-secondary: var(--primitive-color-neutral-gray-700); /* 9.5:1 on white */
  --color-text-dark-muted: var(--primitive-color-neutral-gray-600); /* 5.6:1 on white */
  --color-text-dark-dim: var(--primitive-color-neutral-gray-400);

  /* Text Colors — Dark Surfaces */
  --color-text-light-primary: var(--primitive-color-neutral-white); /* 16.5:1 on dark */
  --color-text-light-secondary: #CBD5E1; /* 10.8:1 on dark */
  --color-text-light-muted: #94A3B8; /* 6.1:1 on dark */
  --color-text-light-accent: var(--primitive-color-emerald-400); /* 8.8:1 on dark */

  /* Brand Accents */
  --color-accent-primary: var(--primitive-color-emerald-500); /* #10B981 */
  --color-accent-hover: var(--primitive-color-emerald-600);   /* #059669 */
  --color-accent-vibrant: var(--primitive-color-emerald-400); /* #22C55E */
  --color-accent-light: var(--primitive-color-emerald-300);   /* #6EE7B7 */
  --color-accent-focus: var(--primitive-color-emerald-400);   /* #22C55E */
  --color-accent-subtle: var(--primitive-color-emerald-100);

  /* Hairline Borders */
  --color-border-light: var(--primitive-color-neutral-gray-200);
  --color-border-light-subtle: var(--primitive-color-neutral-gray-100);
  --color-border-dark: var(--primitive-color-slate-700);
  --color-border-dark-subtle: var(--primitive-color-slate-600);
  --color-border-dark-translucent: var(--primitive-overlay-white-subtle);

  /* Focus Indicator Ring */
  --focus-ring-color: var(--primitive-color-emerald-500);
  --focus-ring-offset: 2px;
  --focus-ring-width: 2px;
  --focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--color-canvas-base), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
  --focus-ring-shadow-dark: 0 0 0 var(--focus-ring-offset) var(--color-canvas-dark), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

  /* Fluid Spacing & Layout */
  --page-padding: clamp(20px, 4vw, 72px);
  --content-padding: clamp(24px, 6vw, 112px);
  --section-padding-y: clamp(72px, 7vw, 110px);
  --section-gap-grid: clamp(20px, 2.5vw, 40px);

  /* Fluid Typography Scale */
  --font-family-heading: var(--primitive-font-heading);
  --font-family-body: var(--primitive-font-body);

  --font-size-stat-monumental: clamp(38px, 4.2vw, 64px);
  --font-size-display-giant: clamp(28px, 3.2vw, 46px);
  --font-size-heading-hero: clamp(34px, 4vw, 56px);
  --font-size-heading-section: clamp(24px, 2.8vw, 40px);
  --font-size-heading-monumental: clamp(22px, 2.4vw, 34px);
  --font-size-heading-card: clamp(17px, 1.6vw, 22px);
  --font-size-title-sub: 16px;
  --font-size-body-lead: 16px;
  --font-size-body-default: 15px;
  --font-size-body-small: 13.5px;
  --font-size-caption: 12px;
  --font-size-overline: 11.5px;

  /* Line Heights */
  --line-height-none: 0.95;
  --line-height-tight: 1.15;
  --line-height-snug: 1.25;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* Letter Spacings */
  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight: -0.015em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-widest: 0.16em;

  /* Transitions */
  --transition-fast: all var(--primitive-duration-fast) var(--primitive-ease-signature);
  --transition-normal: all var(--primitive-duration-normal) var(--primitive-ease-signature);
  --transition-slow: all var(--primitive-duration-slow) var(--primitive-ease-signature);
  --transition: var(--transition-fast);

  /* Geometry Invariants */
  --border-radius-sharp: 0px;
  --border-radius-pill: 9999px;
  --border-radius-circle: 50%;
  --border-width-hairline: 1px;
  --borderWidth-hairline: 1px;

  /* =========================================================================
     TIER 3: COMPONENT TOKENS
     ========================================================================= */

  /* Button Tokens */
  --btn-primary-bg: var(--primitive-color-emerald-500);
  --btn-primary-text: var(--primitive-color-neutral-white);
  --btn-primary-border: var(--primitive-color-emerald-500);
  --btn-primary-hover-bg: var(--primitive-color-emerald-600);
  --btn-primary-hover-text: var(--primitive-color-neutral-white);
  --btn-primary-hover-border: var(--primitive-color-emerald-600);

  --btn-dark-bg: var(--primitive-color-slate-900);
  --btn-dark-text: var(--primitive-color-neutral-white);
  --btn-dark-border: var(--primitive-color-slate-900);
  --btn-dark-hover-bg: var(--primitive-color-emerald-500);
  --btn-dark-hover-text: var(--primitive-color-neutral-white);
  --btn-dark-hover-border: var(--primitive-color-emerald-500);

  --btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --btn-secondary-text: var(--primitive-color-neutral-white);
  --btn-secondary-border: rgba(255, 255, 255, 0.16);
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.16);
  --btn-secondary-hover-text: var(--primitive-color-neutral-white);
  --btn-secondary-hover-border: rgba(255, 255, 255, 0.3);

  /* Card & Indicator Tokens */
  --metric-card-bg: var(--primitive-color-neutral-white);
  --metric-card-border: var(--primitive-color-neutral-gray-200);
  --metric-card-icon-bg: linear-gradient(135deg, #0E1C24 0%, #162B37 100%);
  --metric-card-arrow-color: var(--primitive-color-emerald-400);

  --eyebrow-bullet-color: var(--primitive-color-emerald-500);
  --eyebrow-text-color: var(--primitive-color-neutral-charcoal);
  --eyebrow-text-color-dark: var(--primitive-color-emerald-400);

  --back-to-top-bg: var(--primitive-color-emerald-500);
  --back-to-top-hover: var(--primitive-color-emerald-600);
}

/* Reduced Motion Mode */
@media (prefers-reduced-motion: reduce) {
  :root {
    --primitive-duration-instant: 0ms;
    --primitive-duration-fast: 0ms;
    --primitive-duration-normal: 0ms;
    --primitive-duration-slow: 0ms;
    --primitive-duration-cinematic: 0ms;
    --transition: none !important;
  }
}