/* ============================================================
   variables.css — Design Tokens
   The Beauty Lounge
   ============================================================ */

:root {
  /* ── Colors ───────────────────────────────────────────── */
  --color-bg: #e8e4e2;               /* warm off-white, primary background */
  --color-bg-alt: #ddd8d5;           /* alternate card / surface background */
  --color-bg-warm: #ddd8d5;
  --color-accent: #2b4a45;           /* deep pine green, primary brand */
  --color-accent-dark: #1c332f;      /* darker shade — hovers, footer */
  --color-accent-light: #4a6b65;     /* lighter shade — subtle UI */
  --color-hero-bg: #2b4a45;          /* balanced emerald-pine canopy, perfectly between previous and dark */
  --color-text: #1f2422;             /* near-black-green for body text */
  --color-text-inverse: #f4f1ec;     /* warm alabaster text on dark/accent backgrounds */
  --color-line: rgba(43, 74, 69, 0.15); /* hairline dividers */
  --color-gold: #dfb974;             /* champagne gold accents */
  --color-gold-light: #e8c786;       /* radiant core gold */
  --color-gold-pale: #f3d699;        /* soft contour gold */
  --color-error: #9b4444;            /* muted rose-burgundy for validation */

  /* Derived */
  --color-accent-hover: #223b37;
  --color-overlay: rgba(28, 51, 47, 0.95);

  /* ── Typography ───────────────────────────────────────── */
  --font-primary: 'Playfair Display', 'Georgia', serif;
  --font-accent: 'Hurricane', cursive;

  /* Fluid type scale using clamp() */
  --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.075rem);
  --text-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --text-2xl: clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
  --text-3xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.6rem + 2vw, 3.6rem);
  --text-display: clamp(2.75rem, 2rem + 3.2vw, 5rem);

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.15em;
  --tracking-widest: 0.2em;

  /* Line height */
  --leading-tight: 1.15;
  --leading-normal: 1.7;
  --leading-relaxed: 1.85;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-xs: clamp(0.45rem, 0.4rem + 0.2vw, 0.65rem);
  --space-sm: clamp(0.7rem, 0.6rem + 0.35vw, 0.95rem);
  --space-md: clamp(0.95rem, 0.8rem + 0.5vw, 1.35rem);
  --space-lg: clamp(1.35rem, 1rem + 1vw, 2.1rem);
  --space-xl: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);
  --space-2xl: clamp(3rem, 2rem + 2.5vw, 5rem);
  --space-3xl: clamp(4.5rem, 3rem + 3.5vw, 7rem);

  /* ── Transitions (Luxury Editorial & Weighted Feel) ─── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 450ms;
  --duration-normal: 750ms;
  --duration-slow: 1200ms;
  --duration-heavy: 1500ms;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm: 0 4px 12px rgba(43, 74, 69, 0.05);
  --shadow-md: 0 12px 36px rgba(43, 74, 69, 0.06);
  --shadow-lg: 0 20px 60px rgba(43, 74, 69, 0.08);

  /* ── Layout ───────────────────────────────────────────── */
  --container-max: 1320px;
  --container-narrow: 900px;
  --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* ── Borders ──────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}