/* =========================================================
   THE RELEAF CLINIC — DESIGN TOKENS
   Warm healing sanctuary meets modern medical
   Sage green + warm gold + soft white
   ========================================================= */

:root {
  /* ── COLORS ── */
  --color-sage:          #4a7c59;
  --color-sage-mid:      #5a9470;
  --color-sage-light:    #7ab08a;
  --color-sage-pale:     #d4e8da;
  --color-sage-faint:    #eef5f0;
  --color-sage-bg:       rgba(74,124,89,0.08);

  --color-gold:          #c9a84c;
  --color-gold-light:    #dfc070;
  --color-gold-dim:      #9a7a2e;
  --color-gold-bg:       rgba(201,168,76,0.10);
  --color-gold-border:   rgba(201,168,76,0.30);

  --color-warm-white:    #faf9f6;
  --color-cream:         #f5f2eb;
  --color-cream-deep:    #ede8dc;
  --color-white:         #ffffff;

  --color-text:          #2d3e2f;
  --color-text-mid:      #4a5e4d;
  --color-text-muted:    #7a9080;
  --color-text-faint:    #b0c4b8;
  --color-border:        rgba(74,124,89,0.12);
  --color-border-mid:    rgba(74,124,89,0.22);

  /* ── TYPOGRAPHY ── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Nunito', 'Lato', sans-serif;
  --font-heading:  'Nunito', 'Lato', sans-serif;

  /* Type scale */
  --text-xs:    0.72rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.3rem;
  --text-xl:    1.6rem;
  --text-2xl:   2rem;
  --text-3xl:   2.75rem;
  --text-hero:  clamp(2.8rem, 5.5vw, 5rem);
  --text-display: clamp(3.2rem, 6vw, 6rem);

  /* ── 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;
  --space-32:  8rem;

  /* ── LAYOUT ── */
  --container-max:  1280px;
  --container-pad:  clamp(1.25rem, 5vw, 4rem);
  --nav-height:     80px;
  --section-pad:    clamp(4rem, 8vw, 8rem);

  /* ── RADIUS ── */
  --radius-sm:   6px;
  --radius-base: 12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ── TRANSITIONS ── */
  --transition-fast:  180ms ease;
  --transition-base:  300ms ease;
  --transition-slow:  600ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── SHADOWS ── */
  --shadow-sm:    0 2px 10px rgba(74,124,89,0.08);
  --shadow-md:    0 6px 24px rgba(74,124,89,0.14);
  --shadow-lg:    0 12px 48px rgba(74,124,89,0.18);
  --shadow-gold:  0 4px 20px rgba(201,168,76,0.22);
  --shadow-warm:  0 8px 32px rgba(45,62,47,0.12);
}