/* Design tokens — theme the whole site from here.
   Dark-first: :root carries the dark palette; [data-theme="light"] overrides. */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #090c14;
  --bg-soft: #0c1019;
  --surface: #11161f;
  --surface-2: #161d29;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text: #e7edf4;
  --text-dim: #9aa7b8;
  --text-faint: #61708a;

  /* Accent — electric cyan→magenta, merged with the Bat-Computer board */
  --accent: #3fbaf5; /* cyan-blue (the board's left side) */
  --accent-2: #e879f9; /* magenta (the board's right side) */
  --accent-strong: #1f9fe0;
  --accent-ink: #04161f; /* text on an accent fill */
  --accent-dim: rgba(63, 186, 245, 0.12);
  --accent-line: rgba(63, 186, 245, 0.3);
  --accent-glow: rgba(63, 186, 245, 0.32);

  /* Grid / topology motif */
  --grid-line: rgba(148, 163, 184, 0.06);

  /* Fonts — ALL self-hosted (zero external requests). Facelift pairing:
     Chakra Petch (300–700) is the site-wide face, display AND body;
     JetBrains Mono carries the terminal register (nav, chips, eyebrows, receipt). */
  --font-sans: "Chakra Petch", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;
  --font-display: "Chakra Petch", var(--font-sans);

  /* Fluid type scale */
  --step--1: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.7vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  --step-5: clamp(2.6rem, 1.8rem + 4.5vw, 4.6rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Layout — facelift geometry: tighter radii (3–4 chips, 6 buttons, 8–12 cards) */
  --measure: 68rem;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-btn: 6px;
  --radius-chip: 4px;
  --ring: 0 0 0 1px var(--border);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Facelift: text tiers (mock-exact) */
  --text-strong: #eef5fd; /* headings */
  --text-body-strong: #dbe6f4;
  /* --text (#e7edf4) / --text-dim / --text-faint keep existing consumers working */
  --text-secondary: #8fa2bd;
  --text-label: #7e8ba1;

  /* Facelift: glass panels + cyan-tinted borders + glows */
  --panel: rgba(13, 19, 34, 0.72);
  --panel-solid: #0d1322;
  --panel-blur: blur(10px);
  --border-accent: rgba(63, 186, 245, 0.14);
  --border-accent-hover: rgba(63, 186, 245, 0.5);
  --border-magenta: rgba(232, 121, 249, 0.18);
  --glow-num: 0 0 12px rgba(63, 186, 245, 0.6);
  --glow-card: 0 0 32px rgba(63, 186, 245, 0.14);
  --glow-card-magenta: 0 0 32px rgba(232, 121, 249, 0.12);
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f8fb;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --border: rgba(2, 6, 23, 0.1);
  --border-strong: rgba(2, 6, 23, 0.18);

  --text: #0e1726;
  /* Darker secondary/tertiary text — the body sits over the (light) board image,
     so these need more contrast than on a flat page to stay readable. */
  --text-dim: #2c3a4d;
  --text-faint: #46546a;

  /* Accent — same electric cyan→magenta as dark, dropped in value for contrast
     on the light sandstone board. */
  --accent: #0c8fce; /* deeper cyan reads on white */
  --accent-2: #c026d3; /* magenta partner */
  --accent-strong: #0a72a6;
  --accent-ink: #f2fbff;
  --accent-dim: rgba(12, 143, 206, 0.1);
  --accent-line: rgba(12, 143, 206, 0.32);
  --accent-glow: rgba(192, 38, 211, 0.16);

  --grid-line: rgba(15, 23, 42, 0.05);

  --shadow: 0 24px 60px rgba(15, 23, 42, 0.12);

  /* Facelift tiers, blueprint-adjusted for light */
  --text-strong: #0b1422;
  --text-body-strong: #1d2a3d;
  --text-secondary: #3d4d63;
  --text-label: #4a5a72;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-solid: #ffffff;
  --border-accent: rgba(12, 143, 206, 0.2);
  --border-accent-hover: rgba(12, 143, 206, 0.55);
  --border-magenta: rgba(192, 38, 211, 0.22);
  --glow-num: 0 0 12px rgba(12, 143, 206, 0.35);
  --glow-card: 0 0 32px rgba(12, 143, 206, 0.1);
  --glow-card-magenta: 0 0 32px rgba(192, 38, 211, 0.08);
}