/*
  Design tokens - Umoya Wellness Spa
  Direction: deep charcoal canvas, warm cream text, muted gold accent,
  soft terracotta secondary - "quiet luxury wellness." Charcoal dominates;
  gold appears sparingly (accents, CTAs, dividers) - never a full section fill.
  --color-accent resolves to a lighter gold by default (correct for dark
  sections) and is deepened inside .section--light so it stays legible on
  cream - same variable name everywhere, context decides shade.
*/

:root {
  /* ---------- Charcoal (dark) ---------- */
  --charcoal-950: #100e0c;
  --charcoal-900: #1a1714; /* brand dark */
  --charcoal-800: #241f1a;
  --charcoal-700: #2e2822;
  --charcoal-600: #3a322a;

  /* ---------- Cream / bone (light) ---------- */
  --cream-50: #faf7f2;
  --cream-100: #f3ede4; /* brand cream */
  --cream-200: #e8dcc8;
  --cream-muted: #cabca2;

  /* ---------- Gold accent ---------- */
  --gold-300: #d8c09a;
  --gold-500: #b89768; /* brand gold */
  --gold-600: #8f7147; /* deeper - used where gold sits on cream */
  --gold-glow: rgba(184, 151, 104, 0.45);

  /* ---------- Terracotta / blush secondary ---------- */
  --terracotta-400: #c98b6b; /* brand terracotta */
  --terracotta-600: #a3684a;

  /* ---------- Text ---------- */
  --text-on-dark: var(--cream-100);
  --text-on-dark-muted: #a99a85;
  --text-on-light: var(--charcoal-900);
  --text-on-light-muted: #6b6156;

  /* ---------- Semantic ---------- */
  --color-bg-dark: var(--charcoal-900);
  --color-bg-light: var(--cream-100);
  --color-accent: var(--gold-300);
  --color-accent-strong: var(--terracotta-400);
  --color-border-dark: rgba(243, 237, 228, 0.14);
  --color-border-light: rgba(26, 23, 20, 0.12);

  /* ---------- Typography ---------- */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --tracking-eyebrow: 0.22em;
  --tracking-wide: 0.06em;

  --fs-eyebrow: 0.75rem;
  --fs-body: 1rem;
  --fs-lg: 1.25rem;
  --fs-h4: clamp(1.25rem, 1.5vw, 1.6rem);
  --fs-h3: clamp(1.75rem, 2.6vw, 2.4rem);
  --fs-h2: clamp(2.4rem, 4.6vw, 3.75rem);
  --fs-h1: clamp(3rem, 7vw, 6.25rem);

  /* ---------- Spacing ----------
     Scaled down at tablet/mobile breakpoints below. */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 10rem;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;

  /* ---------- Z-index scale ---------- */
  --z-header: 500;
  --z-cursor: 9999;
  --z-preloader: 9998;
  --z-transition: 9990;
  --z-grain: 40;
}

@media (max-width: 900px) {
  :root {
    --space-lg: 3rem;
    --space-xl: 4.5rem;
    --space-2xl: 6rem;
  }
}
@media (max-width: 560px) {
  :root {
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3.25rem;
    --space-2xl: 4.25rem;
  }
}