/* ==========================================================================
   LETO Beauty Studio — Design tokens
   Layer 1: primitives  →  Layer 2: semantic  →  Layer 3: component
   ========================================================================== */

:root {
  /* ---------- Layer 1. Primitives ---------- */

  /* Brand green — sampled from the LETO botanical mark (#2A4708) */
  --c-green-950: #0B120A;
  --c-green-900: #101A0C;
  --c-green-850: #16240F;
  --c-green-800: #1D3110;
  --c-green-700: #2A4708;
  --c-green-600: #3B5D16;
  --c-green-500: #4F7325;
  --c-green-400: #6D8F4A;
  --c-green-300: #8FA87A;
  --c-green-200: #BECBAC;
  --c-green-100: #DCE4CF;
  --c-green-50:  #EDF1E6;

  /* Warm neutrals — the “paper” of the brand */
  --c-bone-50:  #FCFBF7;
  --c-bone-100: #F7F4ED;
  --c-bone-200: #F0EBE0;
  --c-bone-300: #E4DDCE;
  --c-bone-400: #D2C8B4;

  /* Brass accent — used sparingly, for prices and micro-marks */
  --c-brass-600: #9A7B44;
  --c-brass-500: #B08D57;
  --c-brass-400: #C9A961;
  --c-brass-100: #EFE4CE;

  --c-ink:   #12160F;
  --c-white: #FFFFFF;

  /* ---------- Layer 2. Semantic ---------- */
  --bg:            var(--c-bone-100);
  --bg-elevated:   var(--c-bone-50);
  --bg-sunken:     var(--c-bone-200);
  --bg-inverse:    var(--c-green-950);
  --bg-brand:      var(--c-green-700);

  --surface:       var(--c-white);
  --surface-muted: var(--c-bone-200);

  --text:          var(--c-ink);
  --text-soft:     #4A5142;      /* 7.5:1 on --bg */
  --text-muted:    #6A7163;      /* 4.6:1 on --bg — still passes as body copy */
  --text-inverse:  var(--c-bone-100);
  --text-inverse-muted: rgba(247, 244, 237, 0.52);

  --accent:        var(--c-green-700);
  --accent-soft:   var(--c-green-100);
  --accent-warm:   var(--c-brass-500);

  --border:        rgba(18, 22, 15, 0.10);
  --border-strong: rgba(18, 22, 15, 0.20);
  --border-inverse: rgba(247, 244, 237, 0.14);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--c-green-500);

  /* ---------- Typography ---------- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(5.5rem, 17.5vw, 18rem);
  --fs-d1:      clamp(2.75rem, 7.2vw, 6.5rem);
  --fs-d2:      clamp(2.25rem, 5vw, 4.25rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.35rem);
  --fs-h4:      clamp(1.2rem, 1.7vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1.25vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.6875rem;

  --lh-tight: 0.92;
  --lh-snug: 1.12;
  --lh-body: 1.65;

  --tracking-label: 0.16em;
  --tracking-wide: 0.06em;

  /* ---------- Space & layout ---------- */
  --sp-2: 0.125rem;
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-80: 5rem;
  --sp-96: 6rem;
  --sp-128: 8rem;

  --container: 1400px;
  --container-narrow: 940px;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --section-y: clamp(5rem, 9.5vw, 10.5rem);

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 48px;
  --r-pill: 999px;
  --r-arch: 50vw 50vw 0 0 / 34vw 34vw 0 0;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(18, 22, 15, 0.04);
  --shadow-sm: 0 2px 10px rgba(18, 22, 15, 0.05);
  --shadow-md: 0 12px 32px -12px rgba(18, 22, 15, 0.16);
  --shadow-lg: 0 32px 70px -28px rgba(18, 22, 15, 0.28);
  --shadow-glow: 0 20px 60px -24px rgba(42, 71, 8, 0.45);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 720ms;
  --dur-reveal: 1100ms;

  --header-h: 84px;
  --z-header: 100;
  --z-menu: 120;
  --z-lightbox: 200;
}

/* Sections rendered on the dark canvas re-map the semantic layer,
   so every component below inherits correct contrast automatically. */
.theme-dark {
  --bg: var(--c-green-950);
  --bg-elevated: #131C0F;
  --bg-sunken: #0A0F08;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-muted: rgba(255, 255, 255, 0.06);
  --text: var(--c-bone-100);
  --text-soft: rgba(247, 244, 237, 0.76);
  --text-muted: rgba(247, 244, 237, 0.56);
  --accent: var(--c-green-300);
  --accent-soft: rgba(143, 168, 122, 0.16);
  --border: rgba(247, 244, 237, 0.13);
  --border-strong: rgba(247, 244, 237, 0.28);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--c-green-300);
  color: var(--text);
  background: var(--bg);
}