/* ==========================================================================
   GLOW BEAUTY SALON — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Derived directly from the approved Luxury Design System document.
   ========================================================================== */

:root {

  /* ---------- COLOR SYSTEM ---------- */

  /* Primary / Secondary / Accent */
  --color-primary: #C6A15B;          /* Champagne Gold — CTAs, key accents */
  --color-primary-dark: #B08D48;     /* Hover/active state for gold elements */
  --color-secondary: #B98A93;        /* Deep Rose Mauve */
  --color-accent: #B97B5A;           /* Soft Terracotta */

  /* Backgrounds & Surfaces */
  --color-bg: #FAF6F1;               /* Warm Ivory — primary background */
  --color-bg-alt: #F3E7E4;           /* Blush Mist — alternating sections */
  --color-surface: #FFFFFF;          /* Pure White — cards & elevated components */
  --color-bg-dark: #1E1815;          /* Deep Espresso — footer / dark sections */

  /* Text */
  --color-text: #2B2320;             /* Espresso Charcoal — primary text */
  --color-text-muted: #6E635C;       /* Warm Taupe Grey — secondary text */
  --color-text-inverse: #FAF6F1;     /* Ivory text on dark backgrounds */

  /* Borders & Neutrals */
  --color-border: #E4D9CC;           /* Soft Gold-Grey */
  --color-neutral-light: #EDEAE6;    /* Fog Grey */
  --color-neutral-dark: #1E1815;     /* Deep Espresso */

  /* Status */
  --color-success: #8A9A83;          /* Muted Sage Green */
  --color-warning: #D9A441;          /* Soft Amber */
  --color-error: #B65C4D;            /* Muted Brick Red */

  /* ---------- TYPOGRAPHY ---------- */

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Jost', 'Montserrat', -apple-system, sans-serif;

  --fs-hero: clamp(2.25rem, 5vw + 1rem, 4rem);      /* 36px -> 64px */
  --fs-h1: clamp(2rem, 3.5vw + 1rem, 3rem);         /* 32px -> 48px */
  --fs-h2: clamp(1.625rem, 2.5vw + 1rem, 2.25rem);  /* 26px -> 36px */
  --fs-h3: clamp(1.375rem, 1.5vw + 1rem, 1.75rem);  /* 22px -> 28px */
  --fs-h4: clamp(1.125rem, 1vw + 0.9rem, 1.25rem);  /* 18px -> 20px */
  --fs-body: 1rem;                                  /* 16px */
  --fs-small: 0.8125rem;                            /* 13px */
  --fs-button: 0.875rem;                            /* 14px */
  --fs-nav: 0.875rem;                               /* 14px */
  --fs-eyebrow: 0.75rem;                            /* 12px */

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  --ls-tight: -0.02em;
  --ls-button: 0.09em;
  --ls-nav: 0.05em;
  --ls-eyebrow: 0.2em;

  /* ---------- SPACING SCALE (base 4px) ---------- */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ---------- LAYOUT ---------- */

  --container-max: 1280px;
  --container-narrow: 1140px;
  --gutter: 2rem;

  /* ---------- RADIUS ---------- */

  --radius-sm: 8px;      /* inputs */
  --radius-md: 12px;     /* cards, images */
  --radius-pill: 999px;  /* primary buttons */

  /* ---------- SHADOWS (warm-toned, never pure black) ---------- */

  --shadow-sm: 0 1px 3px rgba(43, 35, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(43, 35, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(43, 35, 32, 0.12);
  --shadow-luxury: 0 20px 50px rgba(198, 161, 91, 0.22);
  --shadow-glass: 0 8px 32px rgba(43, 35, 32, 0.10);

  /* ---------- GLASSMORPHISM ---------- */

  --glass-bg: rgba(250, 246, 241, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: 18px;

  /* ---------- MOTION ---------- */

  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* ---------- Z-INDEX SCALE ---------- */

  --z-navbar: 100;
  --z-mobile-menu: 200;
  --z-loading: 300;
  --z-floating: 90;
  --z-progress: 110;
}