/* ============================================
   DESIGN TOKENS — Prerna Athia Clone
   ============================================ */

:root {
  /* ---- Colors ---- */
  --bg-cream:       #FCF8F0;
  --bg-offwhite:    #FFFAF1;
  --bg-white:       #FFFFFF;

  --accent-orange:  #E15E41;
  --accent-red:     #F35233;
  --olive:          #737844;
  --olive-light:    #B3B175;
  --olive-alt:      #737843;

  --beige:          #E5D9C4;
  --gold:           #A57332;
  --brown:          #493E26;
  --brown-light:    #6B5D45;

  --pink:           #F3B3A5;
  --pink-light:     #FDE8E2;
  --black:          #000000;
  --white:          #FFFFFF;

  /* Card gradients */
  --grad-orange:    linear-gradient(135deg, #E15E41 0%, #F37B5A 100%);
  --grad-olive:     linear-gradient(135deg, #737844 0%, #8A8F55 100%);
  --grad-gold:      linear-gradient(135deg, #A57332 0%, #C4923F 100%);

  /* ---- Typography ---- */
  --font-serif:     'DM Serif Display', Georgia, serif;
  --font-sans:      'Bricolage Grotesque', 'Inter', sans-serif;
  --font-hand:      'Briem Hand', cursive;

  /* Type Scale — Major Third 1.25 */
  --fs-display:     clamp(2.8rem, 5vw, 4rem);
  --fs-h1:          clamp(1.8rem, 3vw, 2.4rem);
  --fs-h2:          clamp(1.4rem, 2.2vw, 1.8rem);
  --fs-h3:          clamp(1rem, 1.5vw, 1.15rem);
  --fs-body:        clamp(1rem, 1.1vw, 1.1rem);
  --fs-small:       clamp(0.8rem, 0.95vw, 0.85rem);
  --fs-xs:          0.75rem;
  --fs-xxs:         0.65rem;

  /* Line Heights */
  --lh-heading:     1.12;
  --lh-sub:         1.35;
  --lh-body:        1.7;

  /* Letter Spacing */
  --ls-wide:        0.2em;
  --ls-heading:     -0.02em;

  /* ---- Spacing (8px grid) ---- */
  --space-xs:       4px;
  --space-sm:       8px;
  --space-md:       16px;
  --space-lg:       24px;
  --space-xl:       32px;
  --space-2xl:      40px;
  --space-3xl:      48px;
  --space-4xl:      72px;

  /* ---- Borders & Radius ---- */
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-pill:    100px;
  --radius-round:   50%;

  /* ---- Shadows ---- */
  --shadow-sm:      0 2px 8px rgba(73, 62, 38, 0.08);
  --shadow-md:      0 4px 16px rgba(73, 62, 38, 0.1);
  --shadow-lg:      0 8px 32px rgba(73, 62, 38, 0.12);
  --shadow-card:    0 4px 20px rgba(73, 62, 38, 0.08);

  /* ---- Easing ---- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:      cubic-bezier(0.19, 1, 0.22, 1);

  /* ---- Layout ---- */
  --max-width:      1200px;
  --nav-height:     56px;
}