/* ============================================================
   Design Tokens — Olive Garden Feast Palette
   ============================================================ */
:root {
  /* Colours */
  --color-bg:        #f5f0e8;
  --color-text:      #2c2a1e;
  --color-olive:     #6b7c3a;
  --color-moss:      #4a5e2a;
  --color-gold:      #c9972b;
  --color-copper:    #b05e2f;
  --color-surface:   #ede8d8;
  --color-surface-2: #e3ddc8;
  --color-code-bg:   #eee9d6;
  --color-border:    #d4cdb4;
  --color-muted:     #7a7560;

  /* Gradients */
  --gradient-brand:  linear-gradient(135deg, var(--color-olive) 0%, var(--color-gold) 60%, var(--color-copper) 100%);
  --gradient-hero:   linear-gradient(160deg, #4a5e2a 0%, #6b7c3a 40%, #c9972b 100%);

  /* Typography */
  --font-sans:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  --font-size-base: 1rem;
  --line-height: 1.7;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  /* Layout */
  --max-width:      1440px;
  --content-width:  960px;
  --gutter:         clamp(1rem, 4vw, 3rem);
  --header-height:  64px;
  --radius:         6px;
  --radius-lg:      12px;
  --radius-xl:      20px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(44,42,30,.08), 0 1px 2px rgba(44,42,30,.06);
  --shadow-md:  0 4px 12px rgba(44,42,30,.10), 0 2px 6px rgba(44,42,30,.06);
  --shadow-lg:  0 10px 30px rgba(44,42,30,.12), 0 4px 12px rgba(44,42,30,.08);

  /* Transitions */
  --transition: 180ms ease;
}