/* ============================================================
   LIQUID BREATHWORK — DESIGN TOKENS
   Deep Surrender brand system
   "Water at Night" aesthetic
   ============================================================ */

:root {
  /* ---- Color Palette ---- */
  --abyss:       #0a1628;
  --deep-water:  #131f38;
  --undertow:    #1a2a4a;
  --cream:       #f5f0e8;
  --warm-sand:   #d4c5a9;
  --gold:        #c9a96e;

  /* ---- Transparency Tokens ---- */
  --undertow-60: rgba(26, 42, 74, 0.6);
  --undertow-80: rgba(26, 42, 74, 0.8);
  --gold-10:     rgba(201, 169, 110, 0.1);
  --gold-20:     rgba(201, 169, 110, 0.2);
  --gold-40:     rgba(201, 169, 110, 0.4);
  --cream-80:    rgba(245, 240, 232, 0.8);
  --cream-60:    rgba(245, 240, 232, 0.6);
  --cream-50:    rgba(245, 240, 232, 0.5);
  --cream-40:    rgba(245, 240, 232, 0.4);

  /* ---- Typography ---- */
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-h1:       clamp(2rem, 5vw, 3.5rem);
  --fs-h2:       clamp(1.5rem, 4vw, 2.5rem);
  --fs-h3:       clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h4:       1.25rem;
  --fs-body:     1.05rem;
  --fs-small:    0.9rem;
  --fs-xs:       0.8rem;
  --fs-nav:      0.95rem;
  --fs-btn:      1rem;
  --fs-eyebrow:  clamp(10px, 1vw, 12px);

  --lh-heading:  1.2;
  --lh-body:     1.8;

  /* ---- Spacing ---- */
  --space-xs:    0.5rem;
  --space-sm:    0.75rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2rem;
  --space-2xl:   3rem;
  --space-3xl:   4rem;
  --space-4xl:   6rem;
  --space-section: 6rem;

  /* ---- Layout ---- */
  --max-width:     1200px;
  --max-width-nav: 1400px;
  --max-width-text: 780px;

  /* ---- Border Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill:  20px;
  --radius-full: 50%;

  /* ---- Shadows ---- */
  --shadow-card:   0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-hover:  0 8px 24px rgba(201, 169, 110, 0.2);
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* ---- Transitions ---- */
  --ease:        0.3s ease;
  --ease-slow:   0.6s ease;

  /* ---- Breakpoints (for reference, used in responsive.css) ---- */
  /* --bp-mobile:  480px;  */
  /* --bp-tablet:  768px;  */
  /* --bp-desktop: 1024px; */
}