/* ==========================================================================
   Fork Yeah! — Design Tokens
   All brand colors, typography, spacing, and animation values.
   ========================================================================== */

:root {
  /* === Brand Colors === */
  --orange:          #F26A2E;
  --yellow:          #F4B400;
  --green:           #4E7C59;
  --red:             #C62828;
  --brown:           #291910;
  --cream:           #FAF3E8;

  /* === Derived Colors === */
  --cream-dark:      #F0E6D4;
  --brown-light:     #5D4037;
  --brown-muted:     #6B5344;
  --warm-white:      #FFFDF8;
  --divider:         #E0D5C7;

  /* Tinted backgrounds */
  --orange-tint:     rgba(242, 106, 46, 0.10);
  --green-tint:      rgba(78, 124, 89, 0.10);
  --yellow-tint:     rgba(244, 180, 0, 0.10);
  --red-tint:        rgba(198, 40, 40, 0.08);

  /* === Typography === */
  --font-display:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:       'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Type Scale (mobile-first) */
  --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:    2rem;
  --text-4xl:    2.75rem;
  --text-5xl:    3.5rem;
  --text-6xl:    4.5rem;
  --text-7xl:    6rem;

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Font Weights */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* === Spacing === */
  --space-2xs:   0.125rem;
  --space-xs:    0.25rem;
  --space-sm:    0.5rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2rem;
  --space-2xl:   3rem;
  --space-3xl:   4rem;
  --space-4xl:   6rem;
  --space-5xl:   8rem;
  --space-6xl:   12rem;

  /* === Layout === */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --nav-height:        76px;
  --radius-sm:         8px;
  --radius-md:         12px;
  --radius-lg:         16px;
  --radius-xl:         20px;
  --radius-2xl:        28px;
  --radius-pill:       999px;

  /* === Shadows (warm brown tones) === */
  --shadow-sm:   0 1px 3px rgba(41, 25, 16, 0.06), 0 1px 2px rgba(41, 25, 16, 0.04);
  --shadow-md:   0 4px 12px rgba(41, 25, 16, 0.07), 0 2px 4px rgba(41, 25, 16, 0.04);
  --shadow-lg:   0 12px 32px rgba(41, 25, 16, 0.10), 0 4px 8px rgba(41, 25, 16, 0.04);
  --shadow-xl:   0 20px 48px rgba(41, 25, 16, 0.14), 0 8px 16px rgba(41, 25, 16, 0.06);
  --shadow-glow-orange: 0 8px 32px rgba(242, 106, 46, 0.25);
  --shadow-glow-green:  0 8px 32px rgba(78, 124, 89, 0.25);

  /* === Animation === */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  500ms;
  --duration-slower: 800ms;
}