/* ============================================================
   DESIGN TOKENS — Vibrant Spring palette
   ============================================================ */
:root {
  /* --- Greens (jewel) --- */
  --color-green-900: #0d3320;
  --color-green-800: #155c38;
  --color-green-700: #1a7a4a;
  --color-green-600: #219150;  /* primary brand green */
  --color-green-500: #28a760;
  --color-green-400: #3ec97a;
  --color-green-300: #6ddfa0;
  --color-green-200: #a8f0c8;
  --color-green-100: #d6f9e8;
  --color-green-50:  #edfdf4;

  /* --- Yellows / Sunny highlights --- */
  --color-yellow-700: #8a6000;
  --color-yellow-600: #b07c00;
  --color-yellow-500: #d99500;
  --color-yellow-400: #f5b800;  /* primary accent */
  --color-yellow-300: #ffd033;
  --color-yellow-200: #ffe480;
  --color-yellow-100: #fff4c2;
  --color-yellow-50:  #fffce8;

  /* --- Teals (secondary accent) --- */
  --color-teal-600: #0f766e;
  --color-teal-500: #0d9488;
  --color-teal-400: #2dd4bf;
  --color-teal-100: #ccfbf1;

  /* --- Neutrals --- */
  --color-neutral-950: #0c0f0d;
  --color-neutral-900: #111714;
  --color-neutral-800: #1e2820;
  --color-neutral-700: #334036;
  --color-neutral-600: #4a5c50;
  --color-neutral-500: #637569;
  --color-neutral-400: #8fa496;
  --color-neutral-300: #bfcfc4;
  --color-neutral-200: #dde8e1;
  --color-neutral-100: #ecf3ee;
  --color-neutral-50:  #f5f9f6;
  --color-white:       #ffffff;

  /* --- Semantic aliases --- */
  --color-brand:        var(--color-green-600);
  --color-brand-dark:   var(--color-green-800);
  --color-brand-light:  var(--color-green-400);
  --color-accent:       var(--color-yellow-400);
  --color-accent-dark:  var(--color-yellow-600);
  --color-surface:      var(--color-white);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-muted:  var(--color-neutral-100);
  --color-border:       var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-text:         var(--color-neutral-900);
  --color-text-muted:   var(--color-neutral-600);
  --color-text-subtle:  var(--color-neutral-500);
  --color-link:         var(--color-green-700);
  --color-link-hover:   var(--color-green-600);
  --color-code-bg:      #f0faf4;
  --color-code-border:  var(--color-green-200);

  /* --- Focus ring --- */
  --focus-color:        var(--color-yellow-400);
  --focus-width:        3px;
  --focus-offset:       2px;

  /* --- Typography --- */
  --font-sans:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  --font-display: var(--font-sans);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --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 --- */
  --header-height: 4rem;
  --max-width-content: 900px;
  --max-width-wide: 1400px;
  --sidebar-width: 260px;

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

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.05);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -2px rgb(0 0 0 / 0.04);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.10), 0 10px 10px -5px rgb(0 0 0 / 0.04);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}