/* ============================================================
   AvoJoy Marketing — Design Tokens
   Single source of truth for all design values.
   NEVER use raw values in other files — always reference these.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR — Backgrounds
     ---------------------------------------------------------- */
  --bg-warm:    #FFFDF9;   /* page background */
  --bg-cream:   #F7F1E8;   /* section alternate */
  --bg-sage:    #EEF3EA;   /* light green tint */
  --bg-gold:    #FFF8EA;   /* warm gold tint */

  /* ----------------------------------------------------------
     COLOR — Brand Greens
     ---------------------------------------------------------- */
  --green-primary: #5B7553;
  --green-dark:    #3D5438;
  --green-deeper:  #2C3D28;
  --green-light:   #8FAD86;
  --green-pale:    #D4E3CF;

  /* ----------------------------------------------------------
     COLOR — Brand Gold
     ---------------------------------------------------------- */
  --gold:       #C9A96E;
  --gold-light: #F5E6C8;
  --gold-dark:  #A8833F;

  /* ----------------------------------------------------------
     COLOR — Text
     ---------------------------------------------------------- */
  --text-dark:  #2D2A26;
  --text-body:  #4A4640;
  --text-muted: #8A8379;
  --text-light: #B5ADA5;
  --text-white: #FFFFFF;
  --text-on-green: #F7F1E8;

  /* ----------------------------------------------------------
     COLOR — UI
     ---------------------------------------------------------- */
  --border:        #E5DDD3;
  --border-strong: #C9BFB5;
  --white:         #FFFFFF;
  --black:         #1A1714;
  --error:         #C0392B;
  --success:       #27AE60;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Families
     ---------------------------------------------------------- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Scale (fluid, using clamp)
     ---------------------------------------------------------- */
  --text-xs:   clamp(0.75rem,  1.5vw, 0.8125rem);   /* 12–13px */
  --text-sm:   clamp(0.875rem, 1.8vw, 0.9375rem);   /* 14–15px */
  --text-base: clamp(1rem,     2vw,   1.0625rem);   /* 16–17px */
  --text-lg:   clamp(1.125rem, 2.2vw, 1.25rem);    /* 18–20px */
  --text-xl:   clamp(1.25rem,  2.5vw, 1.5rem);     /* 20–24px */
  --text-2xl:  clamp(1.5rem,   3vw,   1.875rem);   /* 24–30px */
  --text-3xl:  clamp(1.875rem, 4vw,   2.5rem);     /* 30–40px */
  --text-4xl:  clamp(2.25rem,  5vw,   3.25rem);    /* 36–52px */
  --text-5xl:  clamp(2.75rem,  6vw,   4rem);       /* 44–64px */

  /* ----------------------------------------------------------
     TYPOGRAPHY — Weights & Leading
     ---------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   900;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --leading-loose:  1.9;

  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.15em;

  /* ----------------------------------------------------------
     SPACING SCALE
     ---------------------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-9:  2.25rem;   /* 36px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --max-width:        1200px;
  --max-width-content: 980px;
  --max-width-narrow:  720px;
  --max-width-tight:   560px;
  --nav-height:        68px;
  --section-pad-y:     clamp(4rem, 8vw, 7rem);
  --section-pad-x:     clamp(1.25rem, 5vw, 2rem);

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(45, 42, 38, 0.06);
  --shadow-sm:  0 1px 6px rgba(45, 42, 38, 0.08);
  --shadow-md:  0 4px 16px rgba(45, 42, 38, 0.10);
  --shadow-lg:  0 8px 32px rgba(45, 42, 38, 0.12);
  --shadow-xl:  0 16px 48px rgba(45, 42, 38, 0.14);
  --shadow-gold: 0 4px 20px rgba(201, 169, 110, 0.25);
  --shadow-green: 0 4px 24px rgba(61, 84, 56, 0.20);

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-sticky:  200;
  --z-popup:   300;
  --z-overlay: 400;
  --z-toast:   500;
}

/* ----------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-spring: 0ms;
  }
}