/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */
/* Loads FIRST. Every other file reads these custom properties — nothing else in the system works without this one. */
:root {

  /* --- Color: surfaces ---------------------------------------------------- */
  --color-bg-primary: oklch(98% 0.004 80);
  --color-bg-secondary: oklch(96% 0.005 80);
  --color-surface: oklch(99% 0.003 80);
  --color-glass-subtle: oklch(100% 0 0 / 0.55);   /* orchestration panel bg */
  --color-glass-medium: oklch(100% 0 0 / 0.7);    /* nodes + floating chips */
  --color-glass-strong: oklch(100% 0 0 / 0.85);   /* header + label backdrops */

  /* Semantic surface aliases. Components can share these without knowing
     whether the active theme is light or dark. */
  --color-bg-main: var(--color-bg-primary);
  --color-bg-section: var(--color-bg-secondary);
  --color-bg-card: var(--color-surface);
  --color-bg-input: var(--color-bg-secondary);

  /* --- Color: text ---------------------------------------------------------*/
  --color-text-primary: oklch(18% 0.006 80);
  --color-text-secondary: oklch(42% 0.006 80);
  --color-text-tertiary: oklch(60% 0.005 80);
  --color-text-on-accent: oklch(18% 0.006 80);
  --color-text-muted: var(--color-text-tertiary);

  /* --- Color: brand accent ------------------------------------------------- */
  --color-accent: oklch(68% 0.14 55);
  --color-accent-strong: oklch(58% 0.16 55);
  --color-accent-soft: oklch(90% 0.05 55);
  --color-accent-border: oklch(68% 0.14 55 / 0.35);
  --color-highlight: oklch(70% 0.13 145);   /* secondary accent — status/success */

  /* --- Color: soft accent surface (chips that host free-form text/icons —
         announcement bar, AI assistant avatars/bubbles. Same value as
         --color-accent-soft in light mode; redefined to a dark amber tint
         in dark mode so paired text-primary/accent-strong content stays
         legible instead of sitting on an unchanged light-peach patch.
         Decorative accent-soft usages — ambient glows, icon chips — are
         NOT switched to this token: they already read well unchanged. ---- */
  --color-soft-surface: var(--color-accent-soft);

  /* --- Color: structure ----------------------------------------------------*/
  --color-border: oklch(90% 0.005 80);

  /* --- Color: decorative texture (theme-dependent so it stays visible
         against whichever surface is active) ------------------------------ */
  --color-scanline: oklch(18% 0.006 80 / 0.05);
  --color-bg-grid: oklch(18% 0.006 80 / 0.04);
  --color-bg-glow-violet: oklch(60% 0.18 290 / 0.12);
  --color-bg-glow-cyan: oklch(74% 0.17 210 / 0.1);

  /* --- Color: system glow (futuristic accent — cursor, tilt/hover glow,
         glitch/scanline treatments only; never a CTA or brand-fill color) --- */
  --color-glow: oklch(74% 0.17 210);
  --color-glow-strong: oklch(62% 0.19 210);
  --color-glow-soft: oklch(92% 0.05 210);
  --color-glow-border: oklch(74% 0.17 210 / 0.35);
  --color-glow-violet: oklch(60% 0.18 290);   /* holographic gradient sweep only — never a standalone swatch */

  /* --- Shadows: system glow ------------------------------------------------*/
  --shadow-glow-sm: 0 0 12px oklch(74% 0.17 210 / 0.35);
  --shadow-glow-md: 0 0 24px oklch(74% 0.17 210 / 0.4);
  --shadow-glow-lg: 0 0 48px oklch(74% 0.17 210 / 0.28);

  /* --- Holographic/iridescent gradient (border sweeps, panel accents) ------*/
  --gradient-holographic: linear-gradient(115deg,
    oklch(74% 0.17 210 / 0.55) 0%,
    oklch(60% 0.18 290 / 0.4) 45%,
    var(--color-accent-soft) 80%,
    transparent 100%);

  /* --- Shadows (each tied to the exact element it was designed for) ------- */
  --shadow-menu: 0 16px 32px oklch(18% 0.006 80 / 0.08);          /* mobile menu panel */
  --shadow-panel: 0 24px 60px oklch(18% 0.006 80 / 0.08);         /* orchestration panel */
  --shadow-panel-hover: 0 32px 72px oklch(18% 0.006 80 / 0.12);
  --shadow-chip: 0 8px 20px oklch(18% 0.006 80 / 0.06);           /* floating chips */
  --shadow-node: 0 6px 16px oklch(18% 0.006 80 / 0.06);           /* diagram nodes */
  --shadow-card: 0 12px 28px oklch(18% 0.006 80 / 0.05);          /* workflow cards 1–3 */
  --shadow-card-hover: 0 20px 40px oklch(18% 0.006 80 / 0.1);
  --shadow-card-accent: 0 16px 34px oklch(18% 0.006 80 / 0.07);   /* workflow card 4 */
  --shadow-card-accent-hover: 0 24px 46px oklch(18% 0.006 80 / 0.12);
  --shadow-btn-hover: 0 10px 28px var(--color-accent-border);

  /* --- Typography: font families -------------------------------------------*/
  --font-heading: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- Typography: fluid heading scale (one clamp per section heading,
         exactly as approved — sizes intentionally differ by section) ------- */
  --text-display: clamp(2.25rem, 1.6rem + 3vw, 4.25rem);        /* H1 Hero */
  --text-heading-xl: clamp(2rem, 1.5rem + 2.2vw, 3.75rem);      /* H2 Closing statement */
  --text-heading-lg: clamp(2rem, 1.5rem + 2vw, 3.5rem);         /* H2 Platform */
  --text-heading-md: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);       /* H2 How It Works */
  --text-heading-sm: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);   /* H2 Featured Capability */
  --text-heading-card: 1.05rem;                                  /* H3 workflow card title */

  /* --- Typography: fluid lead paragraph scale ------------------------------*/
  --text-lead-lg: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);    /* Hero paragraph */
  --text-lead-md: clamp(1.05rem, 1rem + 0.2vw, 1.25rem);   /* Platform / Closing paragraph */
  --text-lead-sm: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);   /* Featured Capability / How It Works paragraph */

  /* --- Typography: fixed UI sizes ------------------------------------------*/
  --text-base: 1rem;         /* buttons, workflow footer link */
  --text-sm: 0.9375rem;      /* header nav links, footer nav heading, checklist */
  --text-sm-alt: 0.9rem;     /* header contact button, footer nav links */
  --text-xs: 0.875rem;       /* announcement bar, workflow card body copy */
  --text-2xs: 0.8125rem;     /* footer bottom bar */

  /* --- Typography: monospace label sizes (eyebrows, system readouts) ------ */
  --text-label-lg: 0.75rem;     /* progress indicator counter */
  --text-label-md: 0.6875rem;   /* badges, chips, illustration placeholder, card meta */
  --text-label-sm: 0.625rem;    /* orchestration panel header / ACTIVE status */
  --text-label-xs: 0.5625rem;   /* header tagline, AI assistant status */
  --text-label-2xs: 0.5rem;     /* CORE node label */

  /* --- Typography: weights, line-height, letter-spacing ------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-display: 1.08;       /* Hero H1 */
  --lh-heading-tight: 1.1;  /* Platform H2 */
  --lh-heading-loose: 1.12; /* Closing statement H2 */
  --lh-heading-snug: 1.15;  /* Featured Capability / How It Works H2 */
  --lh-body: 1.6;
  --lh-body-sm: 1.5;
  --lh-logo: 1.05;

  --ls-tight: -0.02em;   /* headings */
  --ls-wordmark: -0.01em;
  --ls-label-sm: 0.04em;   /* chip / card meta labels */
  --ls-label-md: 0.05em;   /* CORE label */
  --ls-label-lg: 0.06em;   /* tagline, illustration placeholder */
  --ls-label-xl: 0.08em;   /* ACTIVE status */
  --ls-label-2xl: 0.1em;   /* badges, orchestration panel header */

  /* --- Spacing scale (4px base unit) ---------------------------------------*/
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* --- Fluid layout spacing (exactly as approved) --------------------------*/
  --space-section-y: clamp(6rem, 9vw, 10rem);      /* section vertical padding */
  --space-container-x: clamp(1.25rem, 4vw, 4rem);   /* page gutter */
  --space-content-gap: clamp(3.5rem, 6vw, 5.5rem);  /* split-column gap */
  --grid-gutter: clamp(1.25rem, 2.5vw, 2.5rem);     /* 12-column layout gutter */

  /* --- Radii -----------------------------------------------------------------*/
  --radius-sm: 8px;
  --radius-node: 10px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Motion --------------------------------------------------------------*/
  --transition-base: 0.25s ease;
  --transition-slow: 0.3s ease;
  --transition-card: 0.35s ease;
  --transition-panel: 0.4s ease;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-magnetic: 0.45s var(--ease-out-expo);
  --transition-tilt: 0.4s var(--ease-out-expo);
  --transition-theme: 0.4s ease;

  /* --- Layout ----------------------------------------------------------------*/
  --container-max-width: 1280px;
  --container-narrow-width: 780px;
  --header-offset: 96px;   /* clears the sticky header on anchor navigation */

  /* --- Z-index scale -----------------------------------------------------*/
  --z-header: 100;
  --z-assistant: 150;
  --z-skip-link: 200;
  --z-cursor: 300;   /* custom cursor — always renders above everything else */
  --z-boot: 400;     /* boot-sequence overlay — above even the cursor */
}

/* =============================================================================
   1B. DARK THEME FOUNDATION
   This selector intentionally has higher specificity than the later visual
   layer's :root defaults, making it the single source of truth for dark mode.
   ============================================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-primary: oklch(12% 0.026 264);
  --color-bg-secondary: oklch(15% 0.029 264);
  --color-surface: oklch(18% 0.03 264 / 0.94);
  --color-glass-subtle: oklch(20% 0.032 264 / 0.56);
  --color-glass-medium: oklch(23% 0.035 264 / 0.66);
  --color-glass-strong: oklch(16% 0.03 264 / 0.82);
  --color-bg-main: var(--color-bg-primary);
  --color-bg-section: var(--color-bg-secondary);
  --color-bg-card: var(--color-surface);
  --color-bg-input: oklch(17% 0.028 264 / 0.9);

  --color-text-primary: oklch(96% 0.012 264);
  --color-text-secondary: oklch(78% 0.018 264);
  --color-text-tertiary: oklch(64% 0.02 264);
  --color-text-muted: var(--color-text-tertiary);
  --color-text-on-accent: oklch(98% 0.008 264);

  /* Retain the established violet, blue and cyan brand system. */
  --color-accent: oklch(64% 0.2 278);
  --color-accent-strong: oklch(72% 0.17 278);
  --color-accent-soft: oklch(28% 0.075 278);
  --color-accent-border: oklch(64% 0.2 278 / 0.42);
  --color-highlight: oklch(74% 0.15 190);
  --color-glow: oklch(73% 0.17 215);
  --color-glow-strong: oklch(68% 0.18 215);
  --color-glow-soft: oklch(29% 0.07 215);
  --color-soft-surface: oklch(26% 0.07 278);

  --color-border: oklch(36% 0.034 264 / 0.88);
  --color-scanline: oklch(96% 0.012 264 / 0.045);
  --color-bg-grid: oklch(72% 0.08 264 / 0.055);
  --color-bg-glow-violet: oklch(60% 0.19 292 / 0.18);
  --color-bg-glow-cyan: oklch(70% 0.17 215 / 0.12);

  --shadow-menu: 0 18px 50px oklch(3% 0.02 264 / 0.54), 0 1px 0 oklch(100% 0 0 / 0.05) inset;
  --shadow-panel: 0 24px 70px oklch(2% 0.018 264 / 0.5), 0 1px 0 oklch(100% 0 0 / 0.06) inset;
  --shadow-panel-hover: 0 32px 80px oklch(2% 0.018 264 / 0.62), 0 0 34px oklch(64% 0.2 278 / 0.1);
  --shadow-chip: 0 10px 24px oklch(2% 0.018 264 / 0.36);
  --shadow-node: 0 8px 20px oklch(2% 0.018 264 / 0.34);
  --shadow-card: 0 16px 42px oklch(2% 0.018 264 / 0.42), 0 1px 0 oklch(100% 0 0 / 0.045) inset;
  --shadow-card-hover: 0 24px 56px oklch(2% 0.018 264 / 0.56), 0 0 30px oklch(64% 0.2 278 / 0.07);
  --shadow-card-accent: var(--shadow-card);
  --shadow-card-accent-hover: var(--shadow-card-hover);
  --shadow-btn-hover: 0 14px 32px oklch(64% 0.2 278 / 0.28);
}