:root {
  /* ═══════════════════════════════════════════
     COLOR PALETTE — YL Beauty Aesthetics
     Client-Specified: Sage + Teal + Warm Grey
     #374a2d #e1e0dc #c3dbe7 #9cc3d2 #578896
     ═══════════════════════════════════════════ */

  /* Warm Light Backgrounds (based on #e1e0dc) */
  --bg-deep:    #e1e0dc;
  --bg-base:    hsl(48, 6%, 89%); 
  --bg-card:    #ffffff;
  --bg-raised:  hsl(48, 6%, 93%);
  --bg-overlay: hsl(48, 6%, 87%);

  /* Primary Accent — Deep Teal #578896 */
  --gold-300: #9dc2d2; /* Soft Teal */
  --gold-400: #7aabbc; /* Mid step */
  --gold-500: #578896; /* Exact client Deep Teal */
  --gold-600: #426975;
  --gold-700: #32505a;
  --gold-800: #23373e;

  /* Secondary Accent — Coastal Blue #c3dbe7 & Soft Blue #9dc2d2 */
  --rose-300: #e3eff5; 
  --rose-400: #c3dbe7; /* Exact client Coastal Blue */
  --rose-500: #9dc2d2; /* Exact client Soft Teal */
  --rose-600: #578896; /* Exact client Deep Teal */

  /* Fresh Green (trust/results — from #374a2d family) */
  --green-400: #4e6a40;
  --green-500: #374a2d; /* Exact client Sage Green */

  /* Text (dark on light) */
  --cream:      #2c3a24;
  --cream-dim:  #5c6358;
  --text-muted: hsl(200, 6%, 50%);
  --text-dim:   hsl(200, 5%, 64%);

  /* Borders */
  --border:       hsla(193, 27%, 46%, 0.16);
  --border-light: hsla(193, 27%, 46%, 0.10);
  --border-gold:  hsla(193, 27%, 46%, 0.25);

  /* Semantic aliases */
  --color-primary:   var(--gold-500);
  --color-secondary: var(--rose-400);
  --color-success:   var(--green-500);

  /* ═══════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════ */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* Fluid Type Scale */
  --text-xs:   clamp(0.7rem, 0.65vw, 0.75rem);
  --text-sm:   clamp(0.8rem, 0.8vw, 0.875rem);
  --text-base: clamp(0.9rem, 0.95vw, 1rem);
  --text-lg:   clamp(1.05rem, 1.1vw, 1.2rem);
  --text-xl:   clamp(1.2rem, 1.4vw, 1.5rem);
  --text-2xl:  clamp(1.45rem, 2vw, 1.875rem);
  --text-3xl:  clamp(1.8rem, 2.8vw, 2.5rem);
  --text-4xl:  clamp(2.2rem, 3.5vw, 3.2rem);
  --text-5xl:  clamp(2.8rem, 5vw, 4.5rem);
  --text-6xl:  clamp(3.5rem, 7vw, 6rem);

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.65;
  --leading-relaxed: 1.8;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* ═══════════════════════════════════════════
     SPACING (8px grid)
     ═══════════════════════════════════════════ */
  --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;

  --section-pad: clamp(4rem, 8vw, 7rem);
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);

  /* ═══════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════ */
  --container-xl:  1280px;
  --container-lg:  1024px;
  --container-md:  768px;

  /* ═══════════════════════════════════════════
     RADIUS
     ═══════════════════════════════════════════ */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════ */
  --shadow-sm:  0 2px 8px hsla(200, 10%, 30%, 0.08);
  --shadow-md:  0 4px 20px hsla(200, 10%, 30%, 0.1);
  --shadow-lg:  0 8px 40px hsla(200, 10%, 30%, 0.12);
  --shadow-xl:  0 16px 60px hsla(200, 10%, 30%, 0.15);
  --shadow-gold: 0 4px 24px hsla(194, 30%, 40%, 0.15);
  --shadow-rose: 0 4px 24px hsla(200, 35%, 55%, 0.12);

  /* ═══════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   150ms;
  --dur-normal: 280ms;
  --dur-slow:   450ms;
  --dur-slower: 650ms;

  /* Z-index */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    1;
  --z-dropdown: 10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-max:    9999;
}