/* ============================================================
   HEALTHY HAPPY COMMUNITY — Design Tokens
   Extracted from original site. Single source of truth.
   ============================================================ */

:root {
  /* ── Brand Colors ──────────────────────────────────────── */
  --forest:        #1C4B2E;
  --forest-light:  #2D7A4F;
  --forest-deep:   #0F2E1A;
  --gold:          #C8970A;
  --gold-light:    #E5B420;
  --gold-pale:     #F5E6B8;
  --cream:         #FAF7F0;
  --cream-dark:    #F0EBE0;
  --white:         #FFFFFF;
  --charcoal:      #2C3E2D;
  --text-muted:    #6B7C6C;
  --border:        rgba(28,75,46,0.12);
  --border-gold:   rgba(200,151,10,0.3);

  /* ── Semantic Colors ───────────────────────────────────── */
  --color-primary:       var(--forest);
  --color-primary-hover: var(--forest-light);
  --color-accent:        var(--gold);
  --color-accent-hover:  var(--gold-light);
  --color-bg:            var(--cream);
  --color-surface:       var(--white);
  --color-text:          var(--charcoal);
  --color-text-muted:    var(--text-muted);

  /* Status Colors */
  --color-success: #2D7A4F;
  --color-error:   #C0392B;
  --color-warning: #C8970A;
  --color-info:    #2980B9;

  /* ── Typography ────────────────────────────────────────── */
  --font-serif:  'Playfair Display', 'Georgia', serif;
  --font-sans:   'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:   'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-base:   1.6;
  --leading-relaxed:1.75;

  /* ── Spacing ───────────────────────────────────────────── */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(28,75,46,0.08), 0 1px 2px rgba(28,75,46,0.04);
  --shadow-md:  0 4px 16px rgba(28,75,46,0.10), 0 2px 4px rgba(28,75,46,0.06);
  --shadow-lg:  0 10px 40px rgba(28,75,46,0.14), 0 4px 16px rgba(28,75,46,0.08);
  --shadow-xl:  0 20px 60px rgba(28,75,46,0.18);
  --shadow-gold:0 4px 24px rgba(200,151,10,0.25);

  /* ── Layout ────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

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

  /* ── Z-Index Stack ─────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-cursor:   9999;

  /* ── Nav ───────────────────────────────────────────────── */
  --nav-height: 72px;
}