/* ==========================================================================
   MY WELL — Design Tokens / CSS Variables
   Luxury wellness brand: Gold · Black · White
   ========================================================================== */

:root {
  /* ---- Brand Gold ---- */
  --gold: #d4af37;
  --gold-light: #f4d03f;
  --gold-dark: #b8860b;
  --gold-soft: #e8c95f;
  --gold-gradient: linear-gradient(135deg, #f4d03f 0%, #d4af37 45%, #b8860b 100%);
  --gold-gradient-soft: linear-gradient(135deg, #f4d03f 0%, #d4af37 100%);
  --gold-text-gradient: linear-gradient(100deg, #f4d03f 0%, #d4af37 50%, #b8860b 100%);

  /* ---- Black / Neutral ---- */
  --black: #0b0b0b;
  --charcoal: #111111;
  --charcoal-2: #181818;
  --charcoal-3: #1f1f1f;
  --ink-line: rgba(212, 175, 55, 0.18);

  /* ---- Light ---- */
  --white: #ffffff;
  --cream: #faf7ef;
  --muted: #b9b6ad;
  --muted-dark: #6f6c64;

  /* ---- Accent ---- */
  --heart-red: #e31b23;

  /* ---- Surfaces ---- */
  --surface-dark: #0d0d0d;
  --surface-card: #151515;
  --surface-card-2: #1a1a1a;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(212, 175, 55, 0.28);

  /* ---- Typography ---- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-label: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid type scale */
  --fs-hero: clamp(2.4rem, 6vw, 4.6rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 3.5vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.78rem;

  /* ---- Spacing ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --section-pad: clamp(3.5rem, 8vw, 7rem);
  --container: 1240px;
  --container-narrow: 920px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 10px 40px rgba(212, 175, 55, 0.28);
  --shadow-gold-strong: 0 16px 60px rgba(212, 175, 55, 0.4);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur: 0.45s;
  --dur-slow: 0.8s;

  /* ---- Layout ---- */
  --header-h: 84px;
  --z-header: 1000;
  --z-overlay: 1200;
}