/* ============================================================
   tokens.css — Vibrant Spring design tokens
   Jewel greens + sunny yellow highlights, light backgrounds
   ============================================================ */
:root {
  /* ── Brand colours ──────────────────────────────────────── */
  --color-primary:        #16a34a;   /* jewel green */
  --color-primary-hover:  #15803d;
  --color-primary-dark:   #14532d;
  --color-primary-light:  #4ade80;
  --color-primary-subtle: #dcfce7;   /* green-100 */

  --color-accent:         #eab308;   /* sunny yellow */
  --color-accent-hover:   #ca8a04;
  --color-accent-light:   #fde047;
  --color-accent-subtle:  #fef9c3;   /* yellow-100 */

  /* ── Backgrounds ────────────────────────────────────────── */
  --color-bg:             #f5fef7;   /* very light green-tinted white */
  --color-bg-alt:         #f0fdf4;   /* green-50 */
  --color-bg-card:        #ffffff;
  --color-bg-code:        #ecfdf5;   /* light green for code */
  --color-bg-header:      rgba(255, 255, 255, 0.92);
  --color-surface:        #ffffff;

  /* ── Text ───────────────────────────────────────────────── */
  --color-text:           #14532d;   /* very dark green */
  --color-text-body:      #1c2b1e;   /* near-black with green tint */
  --color-text-muted:     #4b7a5a;
  --color-text-light:     #71a57f;
  --color-text-inverted:  #ffffff;

  /* ── Borders & dividers ────────────────────────────────── */
  --color-border:         #bbf7d0;   /* green-200 */
  --color-border-strong:  #86efac;
  --color-border-accent:  #fde047;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(21, 128, 61, 0.08);
  --shadow-md:   0 4px 12px rgba(21, 128, 61, 0.12);
  --shadow-lg:   0 8px 28px rgba(21, 128, 61, 0.16);
  --shadow-card: 0 2px 8px rgba(21, 128, 61, 0.10);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:   'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:   'Cascadia Code', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;

  --text-xs:   clamp(0.75rem,  1.5vw, 0.8rem);
  --text-sm:   clamp(0.85rem,  1.8vw, 0.9rem);
  --text-base: clamp(1rem,     2vw,   1.05rem);
  --text-lg:   clamp(1.1rem,   2.2vw, 1.2rem);
  --text-xl:   clamp(1.25rem,  2.5vw, 1.4rem);
  --text-2xl:  clamp(1.4rem,   3vw,   1.75rem);
  --text-3xl:  clamp(1.75rem,  4vw,   2.25rem);
  --text-4xl:  clamp(2.25rem,  5vw,   3rem);
  --text-5xl:  clamp(2.75rem,  6vw,   3.75rem);

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.65;
  --leading-loose:  1.85;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --width-site:    1440px;
  --width-content: 1200px;
  --width-prose:   820px;
  --padding-site:  clamp(1rem, 4vw, 3rem);

  /* ── Header ─────────────────────────────────────────────── */
  --header-height:  64px;

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

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
}