/* ═══════════════════════════════════════════
   DESIGN TOKENS — The Hair Mary
   Single source of truth for all design values
═══════════════════════════════════════════ */

:root {

  /* ── Surfaces ── */
  --surface-dark:      #0d0d0d;
  --surface-mid:       #141414;
  --surface-card:      #1a1a1a;
  --surface-light:     #ffffff;
  --surface-warm:      #f5f0ea;
  --surface-warm-alt:  #ede6db;

  /* ── Text ── */
  --text-on-dark:      #f0ece6;
  --text-on-light:     #1a1a1a;
  --text-secondary:    #6b6b6b;
  --text-muted-dark:   #8a8480;
  --text-muted-light:  #999390;

  /* ── Accent (gold) ── use < 15% surface area ── */
  --accent:            #c8a96e;
  --accent-hover:      #d4b87a;
  --accent-dim:        #9a7d4e;
  --accent-subtle:     rgba(200, 169, 110, 0.18);
  --accent-border:     rgba(200, 169, 110, 0.35);

  /* ── Overlays ── */
  --overlay-hero:      rgba(10, 8, 6, 0.58);
  --overlay-gallery:   rgba(13, 13, 13, 0.80);

  /* ── Fonts ── */
  --font-serif:        'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:         'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Type scale (desktop) ── */
  --text-display:      clamp(52px, 7vw, 92px);
  --text-h1:           clamp(40px, 5vw, 68px);
  --text-h2:           clamp(30px, 3.5vw, 48px);
  --text-h3:           clamp(20px, 2vw, 26px);
  --text-body-l:       clamp(17px, 1.3vw, 19px);
  --text-body:         16px;
  --text-sm:           14px;
  --text-label:        11px;

  /* ── Line heights ── */
  --lh-display:        1.04;
  --lh-heading:        1.15;
  --lh-body:           1.75;

  /* ── Letter spacing ── */
  --ls-label:          0.22em;
  --ls-button:         0.14em;

  /* ── Spacing (8px grid) ── */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;
  --sp-20: 160px;

  /* ── Section padding ── */
  --section-py:        clamp(80px, 10vw, 160px);

  /* ── Container ── */
  --container-max:     1200px;
  --container-px:      clamp(20px, 5vw, 64px);

  /* ── Transitions ── */
  --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:       cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:          200ms;
  --dur-base:          320ms;
  --dur-slow:          600ms;

  /* ── Z-index layers ── */
  --z-base:       1;
  --z-gallery:   10;
  --z-header:   100;
  --z-mobile-cta: 150;
  --z-overlay:   200;
  --z-lightbox:  300;
}