/* ============================================================
   tokens.css — Design tokens (single source of truth)
   ============================================================ */

:root {
  /* ---- Color: Canvas / surfaces ---- */
  --canvas:          #FAFAF7;        /* off-white, warm */
  --canvas-alt:      #F2F2EC;        /* subtle elevation */
  --canvas-deep:     #E8E8E0;        /* third level */

  /* ---- Color: Ink / text ---- */
  --ink:             #0A0A0A;        /* near-black */
  --ink-soft:        #4A4A48;        /* secondary */
  --ink-mute:        #8A8A85;        /* muted / captions */
  --ink-faint:       #B8B8B0;        /* very light text */

  /* ---- Color: Borders ---- */
  --rule:            #E5E5DF;        /* hairline */
  --rule-strong:     #D5D5CD;        /* emphasis */

  /* ---- Color: Signal (accent) ---- */
  --signal:          #FF5C28;        /* vivid orange */
  --signal-deep:     #E84A1A;        /* hover */
  --signal-soft:     #FFE6DC;        /* tint background */
  --signal-faint:    rgba(255, 92, 40, 0.08);

  /* ---- Color: Code blocks (dark) ---- */
  --code-bg:         #0A0A0A;
  --code-text:       #E8E8E2;
  --code-mute:       #6A6A65;
  --code-accent:     #FF8A5C;        /* slightly lighter for dark bg */
  --code-string:     #9ECC8E;
  --code-keyword:    #C98AC9;

  /* ---- Typography: Families ---- */
  --font-display:    'Geist', 'Inter', system-ui, sans-serif;
  --font-serif:      'Newsreader', Georgia, serif;
  --font-body:       'Geist', 'Inter', system-ui, sans-serif;
  --font-mono:       'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Typography: Scale (clamp() for fluid) ---- */
  --fs-xs:           clamp(11px, 0.7rem + 0.1vw, 12px);
  --fs-sm:           clamp(13px, 0.8rem + 0.1vw, 14px);
  --fs-base:         clamp(15px, 0.9rem + 0.15vw, 17px);
  --fs-md:           clamp(17px, 1rem + 0.25vw, 20px);
  --fs-lg:           clamp(20px, 1.1rem + 0.5vw, 26px);
  --fs-xl:           clamp(28px, 1.5rem + 1vw, 38px);
  --fs-2xl:          clamp(36px, 2rem + 2vw, 56px);
  --fs-3xl:          clamp(48px, 3rem + 3vw, 88px);
  --fs-display:      clamp(44px, 3rem + 2.5vw, 88px);

  /* ---- Typography: Properties ---- */
  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Spacing scale (use only these) ---- */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         24px;
  --space-6:         32px;
  --space-7:         48px;
  --space-8:         64px;
  --space-9:         96px;
  --space-10:        128px;
  --space-11:        160px;

  /* ---- Layout ---- */
  --container:       1240px;
  --container-text:  720px;
  --gutter:          clamp(20px, 4vw, 48px);

  --section-y:       clamp(80px, 10vw, 160px);

  /* ---- Radii ---- */
  --r-xs:            2px;
  --r-sm:            4px;
  --r-md:            8px;
  --r-lg:            12px;
  --r-pill:          999px;

  /* ---- Motion ---- */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:          0.18s var(--ease-in-out);
  --t-base:          0.28s var(--ease-in-out);
  --t-slow:          0.6s var(--ease-out);

  /* ---- Z-index ---- */
  --z-nav:           50;
  --z-sticky:        40;
  --z-overlay:       30;
}