/* ================================================================
   RITUALS SPA THEME — DESIGN TOKENS
   ================================================================ */

:root {

  /* ── Color Palette ──────────────────────────────────────────── */
  --bg-0:           #05050a;   /* deepest background */
  --bg-1:           #09090f;   /* page background */
  --bg-2:           #111118;   /* card background */
  --bg-3:           #18181f;   /* elevated card / hover */
  --surface:        #1e1e26;   /* input background */
  --surface-2:      #26262f;   /* border / divider */
  --surface-3:      #32323c;   /* strong border */

  /* Gold — richer, more saturated for luxury feel */
  --gold:           #c9a24e;
  --gold-light:     #e2c07a;
  --gold-pale:      #f5e6c0;
  --gold-dim:       #7a601e;
  --gold-glow:      rgba(201,162,78,0.15);
  --gold-rgb:       201,162,78;

  /* Cream accent for text */
  --cream:          #f5efe4;

  --text-primary:   #f0ece3;
  --text-secondary: #9e9585;
  --text-muted:     #5e5850;
  --text-inverse:   #09090f;

  --success:        #4d9962;
  --warning:        #c2813a;
  --error:          #b34f4f;
  --info:           #4478a0;

  /* ── Typography — Noto Serif + Inter ────────────────────────── */
  --font-display:   'Noto Serif', Georgia, serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-mono:      'DM Mono', 'Courier New', monospace;

  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-md:        1.125rem;
  --text-lg:        1.25rem;
  --text-xl:        1.5rem;
  --text-2xl:       1.875rem;
  --text-3xl:       2.25rem;
  --text-4xl:       3rem;
  --text-5xl:       3.75rem;
  --text-6xl:       4.5rem;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.14em;

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

  /* ── Spacing Scale ───────────────────────────────────────────── */
  --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 ─────────────────────────────────────────────────── */
  --max-width:        1240px;
  --max-width-text:   720px;
  --max-width-narrow: 560px;

  --header-height:        130px;
  --header-height-mobile: 80px;
  --cta-bar-height:       64px;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ── Borders & Radius ────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  --border:      1px solid var(--surface-2);
  --border-gold: 1px solid rgba(201,162,78,0.35);

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.7);
  --shadow-gold: 0 0 40px rgba(201,162,78,0.18);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.04);

  /* ── Transitions ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-enter:   700ms;

  /* ── Z-Index ─────────────────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    500;
  --z-toast:    600;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  0ms;
    --dur-base:  0ms;
    --dur-slow:  0ms;
    --dur-enter: 0ms;
  }
}