/* ============================================================
   VOLTAI DESIGN TOKENS
   Light/Dark mode via [data-theme] on <html>
   Dark mode is the primary (Figma) theme.
   ============================================================ */


/* ============================================================
   BRAND COLOR SCALES (mode-independent primitives)
   Each color has a 50–950 scale from lightest to darkest.
   These are raw values — use semantic aliases below.
   ============================================================ */
:root {
  /* Voltai Red — Primary brand accent (#B22222 base) */
  --red-50: #F8EDED;
  --red-100: #F1D7D7;
  --red-200: #E4B1B1;
  --red-300: #D48585;
  --red-400: #C25252;
  --red-500: #B22222;
  --red-600: #971C1C;
  --red-700: #7C1717;
  --red-800: #591111;
  --red-900: #350A0A;
  --red-950: #1A0505;

  /* Voltai Graphite — Neutral dark gray (#505050 base) */
  --graphite-50: #F1F1F1;
  --graphite-100: #DFDFDF;
  --graphite-200: #C1C1C1;
  --graphite-300: #9E9E9E;
  --graphite-400: #767676;
  --graphite-500: #505050;
  --graphite-600: #444444;
  --graphite-700: #383838;
  --graphite-800: #282828;
  --graphite-900: #181818;
  --graphite-950: #0C0C0C;

  /* Voltai Titanium — Silver gray (#BCBCBC base) */
  --titanium-50: #F9F9F9;
  --titanium-100: #F2F2F2;
  --titanium-200: #E7E7E7;
  --titanium-300: #DADADA;
  --titanium-400: #CACACA;
  --titanium-500: #BCBCBC;
  --titanium-600: #9F9F9F;
  --titanium-700: #838383;
  --titanium-800: #5E5E5E;
  --titanium-900: #383838;
  --titanium-950: #1C1C1C;

  /* Voltai Lunar Glass — Near-white (#EBEBEB base) */
  --lunar-glass-50: #FDFDFD;
  --lunar-glass-100: #FAFAFA;
  --lunar-glass-200: #F8F8F8;
  --lunar-glass-300: #F4F4F4;
  --lunar-glass-400: #EFEFEF;
  --lunar-glass-500: #EBEBEB;
  --lunar-glass-600: #C7C7C7;
  --lunar-glass-700: #A4A4A4;
  --lunar-glass-800: #757575;
  --lunar-glass-900: #464646;
  --lunar-glass-950: #232323;

  /* Voltai Black (#000000 base) */
  --black: #000000;
  --black-50: #EBEBEB;
  --black-100: #D2D2D2;
  --black-200: #A9A9A9;
  --black-300: #787878;
  --black-400: #3F3F3F;
  --black-500: #0A0A0A;
  --black-600: #080808;
  --black-700: #070707;
  --black-800: #050505;
  --black-900: #030303;
  --black-950: #010101;

  /* Voltai Quantum Mist — Cool blue-gray (#BACAD9 base) */
  --quantum-mist-50: #F9FAFB;
  --quantum-mist-100: #F2F5F8;
  --quantum-mist-200: #E6ECF1;
  --quantum-mist-300: #D9E1EA;
  --quantum-mist-400: #C9D5E1;
  --quantum-mist-500: #BACAD9;
  --quantum-mist-600: #9EABB8;
  --quantum-mist-700: #828D97;
  --quantum-mist-800: #5D656C;
  --quantum-mist-900: #373C41;
  --quantum-mist-950: #1B1E20;

  /* Voltai Data Alloy — Medium blue-gray (#A1ABB4 base) */
  --data-alloy-50: #F7F8F9;
  --data-alloy-100: #EEEFF1;
  --data-alloy-200: #DEE1E4;
  --data-alloy-300: #CBD0D5;
  --data-alloy-400: #B5BDC4;
  --data-alloy-500: #A1ABB4;
  --data-alloy-600: #889199;
  --data-alloy-700: #70777E;
  --data-alloy-800: #50555A;
  --data-alloy-900: #303336;
  --data-alloy-950: #18191B;

  /* Functional accents (kept for status/utility, not primary brand) */
  --green-500: #34C759;
  --green-600: #2DA44E;
  --blue-500: #007AFF;
  --blue-600: #0066D6;
  --orange-500: #FF9500;
  --orange-600: #D97F00;
}


/* ============================================================
   SHARED TOKENS (mode-independent)
   ============================================================ */
:root {
  /* Typography scale (rem, 16px base) */
  --fs-hero: clamp(2rem, 4vw, 3.5rem);              /* 32–56px fluid */
  --fs-h1: clamp(1.75rem, 2.8vw, 2.5rem);           /* 28–40px fluid */
  --fs-h2: clamp(1.5rem, 2.2vw, 2rem);              /* 24–32px fluid */
  --fs-h3: 1.25rem;                                  /* 20px */
  --fs-body: 1.25rem;                                /* 20px */
  --fs-body-sm: 0.875rem;                            /* 14px */
  --fs-label: 0.75rem;                               /* 12px */
  --fs-micro: 0.75rem;                               /* 12px (was 10px) */

  /* Font weights */
  --fw-light: 300;
  --fw-book: 400;
  --fw-medium: 500;
  /* Modern Era ships 300/400/500/700/800/900 — no 600. Asking for a weight
     with no face behind it gets you a synthesised one, so these name real
     files. Neither is used yet; both would need a @font-face in base.css. */
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Letter spacing */
  --ls-tight: -0.088rem;
  --ls-snug: -0.031rem;
  --ls-normal: 0.013rem;
  --ls-wide: 0.075rem;
  --ls-wider: 0.15rem;

  /* Line heights */
  --lh-tight: 1.4;
  --lh-snug: 1.6;
  --lh-normal: 1.7;
  --lh-relaxed: 1.85;
  --lh-loose: 2.0;

  /* Spacing scale */
  --space-2xs: 0.25rem;      /* 4px */
  --space-xs: 0.5rem;        /* 8px */
  --space-sm: 0.75rem;       /* 12px */
  --space-md: 1rem;          /* 16px */
  --space-lg: 1.25rem;       /* 20px */
  --space-xl: 1.5rem;        /* 24px */
  --space-2xl: 2rem;         /* 32px */
  --space-3xl: 2.5rem;       /* 40px */
  --space-4xl: 5rem;         /* 80px */
  --space-5xl: 6.25rem;      /* 100px */

  /* Layout */
  --container-max: 90rem;     /* ~1440px */
  --content-max: 75rem;       /* ~1200px */
  --section-padding-x: 3rem;  /* Base gutter — 48px */
  --section-gap: 3rem;
  --nav-height: 4rem;
  --header-height: 4rem;

  /* Grid line position — aligns vertical frame lines with container edges.
     On viewports wider than container-max, lines sit at the container edge;
     on narrower viewports, they fall back to --section-padding-x from edge. */
  --grid-line-x: max(var(--section-padding-x), calc((100vw - var(--container-max)) / 2));

  /* Border radius — V2: zero on all structural elements */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 62.5rem; /* keep for theme toggle circle only */

  /* V2 Rule color — structural borders (visible against dark bg) */
  --rule-color: rgba(255, 255, 255, 0.18);
  /* Translucent, mirroring the dark theme's rgba white, so the frame holds up
     over pale hero art as well as flat white. A solid #c8c8c8 vanished against
     the light hero image. */
  --rule-color-light: rgba(15, 23, 32, 0.22);

  /* Annotation font */
  --font-sans: 'Modern Era', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Display headings only — the hero headline and the section h2s. */
  --font-display: 'ABC Oracle', var(--font-sans);
  --font-mono: 'Space Mono', monospace;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
  --duration-reveal: 0.8s;
}


/* ============================================================
   DARK MODE — Semantic aliases (default / Figma design)
   Maps brand primitives to semantic roles.
   ============================================================ */
[data-theme="dark"],
:root {
  /* --- Accent (brand) --- */
  --accent-primary: var(--red-500);
  --accent-primary-hover: var(--red-400);
  --accent-primary-muted: var(--red-800);
  --accent-secondary: var(--quantum-mist-400);
  --accent-secondary-hover: var(--quantum-mist-300);
  --accent-tertiary: var(--data-alloy-400);

  /* --- Backgrounds --- */
  --bg-primary: var(--black);
  --bg-secondary: var(--black-500);
  --bg-card: var(--graphite-800);
  --bg-elevated: var(--graphite-700);
  --bg-subtle: var(--graphite-950);

  /* --- Text --- */
  --text-primary: var(--lunar-glass-500);
  --text-secondary: var(--titanium-400);
  --text-muted: var(--titanium-600);
  --text-faint: var(--graphite-400);

  /* --- Borders --- */
  --border-primary: var(--graphite-600);
  --border-subtle: var(--graphite-700);
  --border-strong: var(--graphite-500);
  --border-rule: var(--rule-color);

  /* --- Glass morphism --- */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-subtle: rgba(255, 255, 255, 0.06);
  --glass-blur: blur(0.625rem);

  /* --- Inverted (light CTAs on dark bg) --- */
  --bg-inverted: var(--lunar-glass-500);
  --text-inverted: var(--black);

  /* --- Shadows --- */
  --shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 1.5rem rgba(178, 34, 34, 0.2);

  /* --- Overlay --- */
  --overlay: rgba(0, 0, 0, 0.6);
  --overlay-strong: rgba(0, 0, 0, 0.8);

  /* --- Gradients --- */
  --gradient-fade-bottom: linear-gradient(to top, var(--black), transparent);
  --gradient-fade-top: linear-gradient(to bottom, var(--black), transparent);
  --gradient-card: linear-gradient(180deg, var(--graphite-800) 0%, var(--black) 100%);

  /* --- Scrollbar --- */
  --scrollbar-track: var(--black-500);
  --scrollbar-thumb: var(--graphite-600);

  /* --- Functional status --- */
  --success: var(--green-500);
  --info: var(--blue-500);
  --warning: var(--orange-500);
  --error: var(--red-500);

  /* --- Theme toggle --- */
  --theme-icon-display-sun: none;
  --theme-icon-display-moon: block;
}


/* ============================================================
   LIGHT MODE — Semantic aliases
   ============================================================ */
[data-theme="light"] {
  /* --- Accent (brand) — slightly darker for contrast on white --- */
  --accent-primary: var(--red-600);
  --accent-primary-hover: var(--red-500);
  --accent-primary-muted: var(--red-100);
  --accent-secondary: var(--quantum-mist-600);
  --accent-secondary-hover: var(--quantum-mist-500);
  --accent-tertiary: var(--data-alloy-600);

  /* --- Backgrounds --- */
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--lunar-glass-50);
  --bg-card: var(--lunar-glass-200);
  --bg-elevated: #FFFFFF;
  --bg-subtle: var(--titanium-50);

  /* --- Text --- */
  --text-primary: var(--graphite-950);
  --text-secondary: var(--graphite-600);
  /* One step darker each: --titanium-500 put "faint" at 1.9:1, where the
     dark theme's equivalent is 4.6:1. The ladder still reads as four tiers. */
  --text-muted: var(--titanium-800);   /* #5E5E5E — 6.5:1 on white */
  --text-faint: var(--graphite-400);   /* #767676 — 4.5:1 on white */

  /* --- Borders --- */
  --border-primary: var(--titanium-300);
  --border-subtle: var(--titanium-200);
  --border-strong: var(--titanium-500);
  --border-rule: var(--rule-color-light);

  /* --- Glass morphism (light mode: white glass on light bg) --- */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-bg-strong: rgba(255, 255, 255, 0.92);
  --glass-border: var(--titanium-300);
  --glass-border-subtle: var(--titanium-200);
  --glass-blur: blur(0.625rem);

  /* --- Inverted (dark CTAs on light bg) --- */
  --bg-inverted: var(--graphite-900);
  --text-inverted: var(--lunar-glass-500);

  /* --- Shadows --- */
  --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.06);
  --shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 1.5rem rgba(178, 34, 34, 0.08);

  /* --- Overlay --- */
  --overlay: rgba(0, 0, 0, 0.3);
  --overlay-strong: rgba(0, 0, 0, 0.5);

  /* --- Gradients --- */
  --gradient-fade-bottom: linear-gradient(to top, #FFFFFF, transparent);
  --gradient-fade-top: linear-gradient(to bottom, #FFFFFF, transparent);
  --gradient-card: linear-gradient(180deg, var(--lunar-glass-200) 0%, #FFFFFF 100%);

  /* --- Scrollbar --- */
  --scrollbar-track: var(--lunar-glass-200);
  --scrollbar-thumb: var(--titanium-400);

  /* --- Functional status --- */
  --success: var(--green-600);
  --info: var(--blue-600);
  --warning: var(--orange-600);
  --error: var(--red-600);

  /* --- Theme toggle --- */
  --theme-icon-display-sun: block;
  --theme-icon-display-moon: none;
}


/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 80rem) {
  :root {
    --section-padding-x: 2.5rem;
  }
}

@media (max-width: 48rem) {
  :root {
    --section-padding-x: 1.5rem;
    --section-gap: 2.5rem;
    --nav-height: 3.5rem;
  }
}

@media (max-width: 23.4375rem) {
  :root {
    --section-padding-x: 1rem;
    --section-gap: 2rem;
  }
}