/* ═══════════════════════════════════════════════════════════
   Design Tokens — Golden Summer Fields Palette
   CSS Cascade Layers · css-cascade-layers.com
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Color : Base palette ─────────────────────────────── */
  --color-bg:            #f7f3e9;
  --color-surface:       #fffdf5;
  --color-surface-alt:   #f0ead6;
  --color-border:        #d4c89a;
  --color-border-light:  #e8deb8;

  /* ── Color : Text ─────────────────────────────────────── */
  --color-text:          #3b3522;
  --color-text-muted:    #6b5e3e;
  --color-text-subtle:   #9a8b6a;

  /* ── Color : Primary (muted olive green) ──────────────── */
  --color-primary:       #6b7c3a;
  --color-primary-dark:  #4e5c29;
  --color-primary-light: #8fa44e;
  --color-primary-bg:    #eef2e0;

  /* ── Color : Accent (golden amber) ───────────────────── */
  --color-accent:        #c49a2a;
  --color-accent-dark:   #9a760f;
  --color-accent-light:  #f0d97a;
  --color-accent-bg:     #fdf6dc;

  /* ── Color : Code ─────────────────────────────────────── */
  --color-code-bg:       #f0ead6;
  --color-code-border:   #d4c89a;
  --color-code-text:     #3b3522;

  /* ── Color : UI states ────────────────────────────────── */
  --color-focus:         #c49a2a;
  --color-shadow:        rgba(59, 53, 34, 0.12);
  --color-shadow-md:     rgba(59, 53, 34, 0.18);
  --color-overlay:       rgba(247, 243, 233, 0.95);

  /* ── Typography ───────────────────────────────────────── */
  --font-body:    'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --font-heading: var(--font-body);

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  1.875rem;  /* 30px */
  --font-size-3xl:  2.25rem;   /* 36px */
  --font-size-4xl:  3rem;      /* 48px */

  --line-height-tight:  1.25;
  --line-height-snug:   1.375;
  --line-height-normal: 1.6;
  --line-height-relaxed:1.75;

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

  /* ── Spacing scale (base 0.25rem) ────────────────────── */
  --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 ───────────────────────────────────────────── */
  --header-height:    4rem;
  --content-max-width: 1400px;
  --prose-max-width:   none;
  --sidebar-width:     280px;

  /* ── Border radius ────────────────────────────────────── */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-full:9999px;

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:  0.15s ease;
  --transition-base:  0.2s ease;
  --transition-slow:  0.3s ease;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow-md);
  --shadow-lg: 0 8px 24px var(--color-shadow-md);
}