/* ──────────────────────────────────────────────────────────────
   microanalytics — Design System
   tokens.css · design tokens only (custom properties)
   ──────────────────────────────────────────────────────────────
   This file MUST NOT contain selectors that style elements.
   Only :root { --token: value } declarations live here.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── INK SCALE — blue-undertoned graphite ───────────────── */
  --ink:         #0E1628;
  --graphite:    #1D2535;
  --mist-900:    #2C3445;
  --mist-700:    #4A5161;
  --mist-500:    #7B8290;
  --mist-300:    #B4B8C1;
  --mist-200:    #D7D9DE;
  --mist-100:    #E7E6E0;

  /* ── PAPER — warm cream, three tones ────────────────────── */
  --paper:       #F6F4ED;
  --paper-2:     #ECE8DB;
  --paper-3:     #DDD7C4;
  --paper-pure:  #FBFAF6;

  /* ── SIGNALS — used sparingly, ALWAYS paired ────────────── */
  --lime:        #C8D551;   /* Signal #1 — measured · after · good */
  --lime-dk:     #6D7A1F;   /* lime accent / borders / dots */
  --lime-text:   #5A6618;   /* lime for small text on cream (≥4.5:1; lime-dk fails at 4.18:1) */
  --clay:        #C46A3C;   /* Signal #2 — problem · before · loss */
  --clay-dk:     #8E3F1E;

  /* ── ACTION — electric blue, reserved for CTAs ──────────────
     The brand's electric blue (live on microanalytics.works). Used ONLY
     on calls to action — book a call, subscribe, primary submit — with
     white text (≈7:1). It is NOT a signal: never for decoration, borders,
     or body accents. One job: "click here". */
  --electric-blue:    #2933FE;   /* CTA button background */
  --electric-blue-dk: #222AD0;   /* CTA hover / pressed */

  /* ── HERITAGE — palette from v1 mini-brandguide ──────────
     Use sparingly: --heritage-navy for legacy print,
     --heritage-violet for anniversary / brand-history surfaces.
     Lime is the continuity anchor. */
  --heritage-navy:       #192341;
  --heritage-warm-black: #2B2422;
  --heritage-gray:       #9D9D9C;
  --heritage-violet:     #484E9C;
  --heritage-lime:       #D5DD67;

  /* ── SECTION TONES ──────────────────────────────────────── */
  --petrol:      #1F4248;
  --petrol-dk:   #122A2E;

  /* ── RULES & HAIRLINES ──────────────────────────────────── */
  --rule:        rgba(14, 22, 40, 0.10);
  --rule-strong: rgba(14, 22, 40, 0.22);
  --rule-light:  rgba(244, 241, 233, 0.18);

  /* ── SEMANTIC ALIASES ───────────────────────────────────── */
  --fg-1:         var(--ink);          /* primary text */
  --fg-2:         var(--mist-700);     /* secondary / lede */
  --fg-3:         #5E6573;             /* labels / meta — darkened from mist-500 (#7B8290) for 4.5:1 on cream */
  --fg-mute:      var(--mist-300);     /* placeholder text */
  --bg-page:      var(--paper);
  --bg-card:      var(--paper-pure);
  --bg-section-2: var(--paper-2);
  --bg-emphasis:  var(--ink);
  --bg-break:     var(--petrol);
  --accent-1:     var(--lime);
  --accent-2:     var(--clay);

  /* ── FOCUS RING — two-tone (light vs dark surfaces) ─────────
     Lime fails 3:1 on cream paper, so the old global lime ring was
     invisible to keyboard users on almost every surface. Use ink on
     light surfaces and lime only on dark (ink / petrol) ones. */
  --color-focus:         var(--ink);   /* light / cream surfaces (~16:1) */
  --color-focus-on-dark: var(--lime);  /* dark surfaces (~11:1)          */

  /* ── TYPE FAMILIES ──────────────────────────────────────── */
  --font-hero:    'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;  /* hero titles — geometric sans, echoes the logo wordmark */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;   /* H1–H3 / section titles */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ── SPACING ────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;
  --space-6:  28px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --shell-max: 1480px;
  --shell-pad: 40px;
  --grid-cols: 12;
  --grid-gap:  16px;

  /* ── RADII ──────────────────────────────────────────────── */
  --radius-sharp: 2px;
  --radius-soft:  4px;
  --radius-pill:  999px;

  /* ── SHADOWS (used sparingly) ───────────────────────────── */
  --shadow-lift:  0 8px 24px rgba(14, 22, 40, 0.06);

  /* ── MOTION ─────────────────────────────────────────────── */
  --ease:         cubic-bezier(.2, .7, .3, 1);
  --dur-quick:    120ms;
  --dur-hover:    180ms;
  --dur-enter:    280ms;

  /* ── BREAKPOINTS (for reference; CSS uses values inline) ── */
  --bp-mobile:    720px;
  --bp-tablet:    980px;
  --bp-desktop:   1200px;
}