/* =============================================================
   Ciclo — Design Tokens
   The single source of truth for color, type, and surface.
   Reusable across landing, blog, and any future page.
   ============================================================= */

:root {
  /* Palette — matched to the Ciclo product UI (shadcn Radix Nova theme).
     Values converted from the app's oklch tokens (apps/web globals.css). */
  --paper-cream:   #F8F8F8;          /* product --background */
  --off-white:     #F5F5F5;          /* product --sidebar / --muted */
  --bright-white:  #FFFFFF;          /* product --card */
  --pale-cobalt:   #EDF7F6;          /* soft mint tint surface */
  --ink:           #1D293D;          /* product --foreground */
  --ink-soft:      #2A3850;

  /* Brand — #008F92 is THE primary (app --primary token, Alex's call).
     Soft teal #35BABC stays only for app-faithful mock details (org icon, rings).
     --brand itself stays untouched (borders, fills, zone polygon, stamp
     circles, arc numerals) — only its TEXT uses get the darker variants
     below, so the page's overall teal doesn't shift:
       white text on --brand      = 3.93:1 (fails 4.5)
       white text on --brand-deep = 6.32:1 (passes) — used for .btn-brand
         and the bot's thread bubbles (idle state)
       white text on --brand-ink  = 8.14:1 (passes, more headroom) — used
         for .btn-brand's hover/pressed state so it still reads as a step
         darker than idle
       --brand-deep as text on --paper-cream = 5.95:1 (passes) — used for
         .arc-num, which previously set --brand directly at 3.70:1
       --brand-deep as text on light surfaces (paper-cream/off-white/pale-
         cobalt, 5.79–5.95:1) — used for .nav-links a:hover, .section-jump
         a:hover and .faq-list .q:hover, which previously set --brand
         directly at 3.70–3.93:1
       .nav-bg-navy .nav-links a:hover previously set --brand directly at
         3.72:1 against raw --ink — but .nav-bg-navy is a translucent fill
         (rgba(14,22,40,0.85) + backdrop-filter blur/saturate), so the
         real rendered background is a lighter composite, measured in
         Chrome as rgb(53,59,74), not raw --ink. --brand-deep/--brand-ink
         are darker than --brand and read WORSE there; --brand-soft (the
         .nav-bg-navy .nav-logo .accent color) computes to ~4.7:1 against
         that composite in isolation but measured only 4.11:1 rendered
         (translucency + saturate() shift the actual pixel beyond a flat
         alpha-composite calc) — fails 4.5:1. Used --accent-soft (#E3EAFB,
         periwinkle, product --accent — "active states") instead: 9.29:1
         against the measured composite, enough headroom to hold across
         however that composite shifts with scroll content, and visually
         distinct from the surrounding #FFFFFF idle nav-link text. */
  --brand:         #008F92;          /* product --primary — the lead color */
  --brand-deep:    #006B6D;          /* product chart-5 — text-safe variant: idle text-on-brand + text-on-light */
  --brand-ink:     #00595B;          /* text-safe variant: hover/pressed step below --brand-deep */
  --brand-soft:    #35BABC;          /* product --ring / --sidebar-primary — mock details, on-dark accents */
  --brand-tint:    #E6F4F4;
  --brand-ring:    #35BABC;
  --accent-soft:   #E3EAFB;          /* product --accent periwinkle — active states */

  --sun:           #008F92;          /* synced — single accent */

  /* Status chips — product status.tsx style: color/10 bg, color/20 border, color-600 text.
     Foregrounds darkened for WCAG AA at 12px (chips render as small text, so
     the large-text 3:1 exemption doesn't apply — needs >=4.5:1 against their
     own -b background). Hues kept intact (they mirror the product's stage
     taxonomy); only lightness moved. Backgrounds untouched.
       chip-new:  #6C727E → #686E7A on #F1F3F6  (4.35:1 → 4.61:1)
       chip-proc: #EA580C → #C0480A on #FEF3EC  (3.25:1 → 4.61:1)
       chip-done: #16A34A → #11813B on #EDF9F0  (3.05:1 → 4.59:1)
     (chip-pick 4.69:1 and chip-route 5.60:1 already passed; unchanged.) */
  --chip-new-b:    #F1F3F6; --chip-new-f:   #686E7A; /* default/muted */
  --chip-pick-b:   #EFF4FE; --chip-pick-f:  #2563EB; /* info blue */
  --chip-proc-b:   #FEF3EC; --chip-proc-f:  #C0480A; /* warning orange */
  --chip-route-b:  #E6F4F4; --chip-route-f: #006B6D; /* brand teal */
  --chip-done-b:   #EDF9F0; --chip-done-f:  #11813B; /* success green */
  /* legacy aliases */
  --chip-ready-b:  #EFF4FE; --chip-ready-f: #2563EB;

  /* Hairlines — from product --border oklch(0.87 0.01 258.34) = #D0D4DB */
  --hairline:           #D0D4DB;
  --hairline-soft:      #E4E6EA;
  --hairline-on-dark:   rgba(255, 255, 255, 0.14);
  --hairline-on-dark-soft: rgba(255, 255, 255, 0.07);

  /* Body — from product foreground/muted-foreground.
     --body-muted darkened for WCAG AA at 12-16px against the off-white/tint
     surfaces it actually sits on in this page (was #6C727E, 4.43:1 on
     #F5F5F5 — fails; #6C727E passes on pure white only). Same value as
     --chip-new-f (coincidence of the same lightness move, not a shared
     token — chip backgrounds are untouched). */
  --body:          #45506A;
  --body-muted:    #686E7A;          /* was #6C727E — 4.70:1 on #F5F5F5, 4.69:1 on #FEF3EC */
  --body-on-dark:  rgba(255, 255, 255, 0.78);
  --body-on-dark-muted: rgba(255, 255, 255, 0.52);

  /* Type — matched to the product app: Inter headings, Geist body, JetBrains Mono */
  --font-display: 'Inter', 'Geist', -apple-system, sans-serif;
  --font-body:    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --font-serif:   'Instrument Serif', 'Cormorant Garamond', Georgia, serif;

  --tracking-display: -0.025em;
  --tracking-display-tight: -0.03em;
  --tracking-mono: 0.06em;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(72px, 9vw, 144px);

  /* Radius — the product app has a single scale: --radius 0.625rem (10px), --radius-xl 14px. */
  --radius:    10px;
  --radius-xl: 14px;

  /* Shadows — copied from the product app's ramp. */
  --shadow-xs: 0px 4px 8px -1px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0px 4px 8px -1px rgba(0, 0, 0, 0.10), 0px 1px 2px -2px rgba(0, 0, 0, 0.10);
  --shadow-md: 0px 4px 8px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0px 4px 8px -1px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.10);

  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

.surface-cream  { background: var(--paper-cream); color: var(--ink); }
.surface-off    { background: var(--off-white);   color: var(--ink); }
.surface-bright { background: var(--bright-white); color: var(--ink); }
.surface-tint   { background: var(--pale-cobalt); color: var(--ink); }
.surface-ink    { background: var(--ink);         color: #FFFFFF; }