/* ============================================================================
   bouly.io — design tokens (the Constellation)
   Source of truth: BRAND-BOOK.md §6 · DESIGN.md
   Values extracted from the locked homepage: exploration/bouly-constellation-v5.html
   Variable CONTRACT matches the forked roxabi-site SSG (styles.css consumes
   --accent, --r-, --s-, --code- tokens) so chrome renders unmodified; the three node
   accents (--azure/--rose/--emerald) are exposed on top for the graph.
   Chrome primary accent = AZURE (Projects) — neutral, AA on both themes.
   Theme: dark default; light via :root[data-theme="light"] (key: bouly-theme).
   RULE: amber #f0b429 is BANNED — it is Roxabi's identity color, not bouly's.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* ── Ground (dark, default) ─────────────────────────────────────────────── */
  --bg: #0b0f17;
  --panel: #0f1420;
  --surface: #141926;
  --border: #1e2640;
  --border-hi: #293358;

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --text: #e9e5df;            /* warm off-white — never pure #fff */
  --text-muted: #8994a4;
  --text-dim: #52606e;

  /* ── Chrome accent (SSG contract) = azure ───────────────────────────────── */
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-on: #f6f7f9;       /* text on filled accent */

  /* ── Node accents (the three taxonomies) ────────────────────────────────── */
  --azure: #3b82f6;           /* Projects ●    (== --accent) */
  --rose: #ec4899;            /* Experiences ◆ */
  --emerald: #10b981;         /* Skills ▲      */
  --azure-dim: rgba(59,130,246,0.14);
  --rose-dim: rgba(236,72,153,0.14);
  --emerald-dim: rgba(16,185,129,0.14);

  /* ── Code surface — ALWAYS dark, regardless of theme (BRAND-BOOK §6) ─────── */
  --code-bg: #0b0f17;
  --code-text: #e9e5df;
  --code-keyword: #3b82f6;
  --code-muted: #52606e;
  --code-string: #9ecbff;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px;
  --radius-sm: var(--r-sm);          /* alias consumed by the shared topbar */

  /* ── Topbar (shared chrome — matches landing, theme-aware) ──────────────── */
  --topbar-grad: rgba(11,15,23,0.95);

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 40px; --s-2xl: 64px;

  /* ── Elevation ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --glow-accent: 0 0 40px rgba(59,130,246,.22);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --dur-fast: 120ms; --dur: 200ms; --ease: cubic-bezier(.2,0,0,1);

  /* ── Type (IBM Plex; 700 = display signature, never Inter) ──────────────── */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --maxw: 1080px;
  --maxw-prose: 720px;
}

/* Dark-theme text-on-accent: light text on azure is only 3.43:1 (fails AA).
   Dark ink on azure = 5.21:1 PASS. Scoped to non-light so the light theme keeps
   #f6f7f9 on its darker azure (#2563eb = 4.82:1 PASS). Fixes .btn-primary +
   .skip-link contrast site-wide in one place. */
:root:not([data-theme="light"]) {
  --accent-on: #0b0f17;
}

/* ── Light theme (docs / toggle) ────────────────────────────────────────────
   Marketing default stays dark; light exposed via the navbar theme toggle. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f7f9;
  --panel: #eef0f4;
  --surface: #e8eaf0;
  --border: #cdd2de;
  --border-hi: #b0b8ca;

  --text: #1a2030;
  --text-muted: #4a5568;
  --text-dim: #8896a8;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-on: #f6f7f9;

  --azure: #2563eb;
  --rose: #db2777;
  --emerald: #059669;
  --azure-dim: rgba(37,99,235,0.10);
  --rose-dim: rgba(219,39,119,0.10);
  --emerald-dim: rgba(5,150,105,0.10);

  --glow-accent: 0 0 40px rgba(37,99,235,.16);
  --topbar-grad: rgba(246,247,249,0.95);
  /* code surface intentionally NOT overridden — stays dark */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}