/* ══════════════════════════════════════════════════════════
   Bonus Brain — Spark Sunset design tokens (site-local copy)

   Source of truth: 3-brands/bonus-brain/design-system/styles.css
   (+ its tokens/*.css files). That directory lives OUTSIDE this
   Netlify site's publish root (site/, per site/netlify.toml
   publish="."), so nothing under design-system/ is reachable at
   a live URL. index.html already worked around this by inlining
   an equivalent token block; this file does the same thing as a
   shared, cacheable stylesheet for the /guides/ section instead
   of a per-page inline duplicate (guides/ will eventually hold
   ~30 pages — a shared file avoids re-shipping the same CSS on
   every request).

   IMPORTANT: if design-system/styles.css changes, re-sync this
   file by hand (or point a future build step at the source files
   directly during the Node build step, before Netlify publishes
   only the `site/` output — out of scope for this pass).
   Only the Spark palette is copied (the active one; Cloud/Prism
   variants are unused on the live site).
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Palette (Spark) ── */
  --bg: #ffffff;
  --surface: oklch(0.974 0.004 260);
  --ink: oklch(0.13 0.012 260);
  --ink-muted: oklch(0.54 0.010 260);
  --ink-faint: oklch(0.82 0.005 260);
  --border: oklch(0.91 0.004 260);
  --border-strong: oklch(0.76 0.008 260);

  --orange: oklch(0.76 0.22 55);
  --pink: oklch(0.63 0.28 345);
  --cyan: oklch(0.82 0.17 210);
  --cyan-text: oklch(0.55 0.13 210);
  --lime: oklch(0.91 0.25 132);
  --violet: oklch(0.68 0.25 295);

  --grad-spark-sunset: linear-gradient(120deg, var(--orange), var(--pink) 52%, var(--cyan));

  /* ── Type ── */
  --font-display: 'Gabarito', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --tracking-tight: -0.02em;
  --tracking-widest: 0.16em;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows / glow ── */
  --shadow-md: 0 4px 12px oklch(0.12 0.01 260 / 0.10), 0 2px 4px oklch(0.12 0.01 260 / 0.06);
  --shadow-lg: 0 8px 24px oklch(0.12 0.01 260 / 0.12), 0 4px 8px oklch(0.12 0.01 260 / 0.08);
  --glow-pink: 0 0 16px oklch(0.63 0.28 345 / 0.50), 0 0 40px oklch(0.63 0.28 345 / 0.20);

  --transition-fast: 120ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0;
}

a { color: var(--pink); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--orange); }
code, kbd, samp, pre { font-family: var(--font-mono); }
::selection { background: var(--pink); color: #ffffff; }
img { max-width: 100%; height: auto; display: block; }