/* =========================================================
   variables.css — Design tokens for THE GLOW BEAUTY SALON
   Dark is default. data-theme="light" overrides.
   Never use #FFD700 — only champagne gold range below.
   ========================================================= */

:root,
[data-theme="dark"] {
  --bg: #050505;
  --surface: #0D0D0D;
  --surface-alt: #151515;

  --text: #F8F4EA;
  --text-muted: #B8B2A5;

  --gold: #D8B35A;
  --gold-light: #F3D98B;
  --gold-dark: #A88A45;

  --border: rgba(216, 179, 90, 0.25);
  --border-strong: rgba(216, 179, 90, 0.55);

  /* derived */
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.30);
  --radius: 4px;
  --radius-lg: 12px;
  --nav-height: 72px;
  --container: 1200px;
  --gutter: 24px;
}

[data-theme="light"] {
  --bg: #FAF7F0;
  --surface: #FFFFFF;
  --surface-alt: #F2EDE3;

  --text: #1C1C1C;
  --text-muted: #686257;

  --gold: #B8923E;
  --gold-light: #D8B35A;
  --gold-dark: #A88A45;

  --border: rgba(184, 146, 62, 0.25);
  --border-strong: rgba(184, 146, 62, 0.50);

  --shadow: 0 12px 40px rgba(28, 28, 28, 0.10);
  --shadow-soft: 0 8px 24px rgba(28, 28, 28, 0.08);
}