/* ===================================================================
   OASIS SAUNA CLUB — Design tokens
   All values used across the site are defined here.
   =================================================================== */

:root {
  /* ─── Brand colors ─────────────────────────────────────────── */
  --color-charcoal:         #2A2A2A;
  --color-off-white:        #FBF6EE;
  --color-orange:           #F28C28;
  --color-terracotta:       #E85A3C;
  --color-mustard:          #E5C670;

  /* Derived colors (opacities) */
  --color-charcoal-90:      rgba(42, 42, 42, 0.9);
  --color-charcoal-70:      rgba(42, 42, 42, 0.7);
  --color-charcoal-50:      rgba(42, 42, 42, 0.5);
  --color-charcoal-30:      rgba(42, 42, 42, 0.3);
  --color-off-white-80:     rgba(251, 246, 238, 0.8);
  --color-off-white-60:     rgba(251, 246, 238, 0.6);

  /* Semantic tokens */
  --color-bg-primary:       var(--color-off-white);
  --color-bg-dark:          var(--color-charcoal);
  --color-text-primary:     var(--color-charcoal);
  --color-text-inverse:     var(--color-off-white);
  --color-text-muted:       var(--color-charcoal-70);
  --color-accent:           var(--color-orange);
  --color-cta:              var(--color-terracotta);
  --color-cta-hover:        #D14A2C;
  --color-mustard-hover:    #D9B85A;

  /* ─── Typography ───────────────────────────────────────────── */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid font sizes — clamp(min, preferred, max) */
  --fs-display:    clamp(2.5rem, 6vw + 1rem, 5.5rem);
  --fs-h1:         clamp(2.25rem, 5vw + 1rem, 4.5rem);
  --fs-h2:         clamp(1.75rem, 3vw + 1rem, 3rem);
  --fs-h3:         clamp(1.35rem, 1.5vw + 1rem, 2rem);
  --fs-body-large: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --fs-body:       clamp(1rem, 0.25vw + 0.9375rem, 1.125rem);
  --fs-small:      0.875rem;
  --fs-caps:       0.75rem;

  --lh-tight:      1.1;
  --lh-heading:    1.2;
  --lh-body:       1.6;
  --lh-loose:      1.75;

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

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-caps:    0.15em;

  /* ─── Spacing scale ────────────────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  --section-padding-y: clamp(3rem, 8vw, 6rem);
  --section-padding-x: clamp(1.25rem, 4vw, 2.5rem);

  /* ─── Layout ───────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-medium:  960px;
  --container-narrow:  680px;
  --container-tight:   540px;

  /* ─── Radii ────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ─── Shadows ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(42, 42, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(42, 42, 42, 0.12);
  --shadow-lg: 0 12px 32px rgba(42, 42, 42, 0.18);

  /* ─── Transitions ──────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-med:    250ms ease;
  --transition-slow:   400ms ease;

  /* ─── Z-index scale ────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  10;
  --z-header:  50;
  --z-modal:   100;
  --z-toast:   200;
}