/* ============================================================
   AÉTHER Parfums — Design Tokens
   ============================================================ */
:root {
  /* Brand Palette */
  --black: #111111;
  --white: #FFFFFF;
  --gold: #C9A227;
  --gold-light: #D4B84A;
  --gold-dark: #A8871F;
  --gray-light: #F8F8F8;
  --gray: #E8E8E8;
  --gray-mid: #999999;
  --gray-dark: #444444;
  --red-sale: #C0392B;
  --green-stock: #27AE60;

  /* Gradients */
  --gradient-gold: linear-gradient(135deg, #C9A227 0%, #E8D48B 50%, #C9A227 100%);
  --gradient-dark: linear-gradient(135deg, #111111 0%, #1A1A1A 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
  --gradient-hero: linear-gradient(135deg, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0.45) 50%, rgba(17,17,17,0.25) 100%);
  --gradient-premium: linear-gradient(135deg, #C9A227 0%, #F4D03F 50%, #C9A227 100%);
  --gradient-overlay: linear-gradient(180deg, transparent 0%, rgba(17,17,17,0.8) 100%);

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', -apple-system, sans-serif;

  /* Spacing */
  --section-pad: 100px;
  --container-max: 1320px;
  --header-height: 106px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Effects */
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 50px rgba(0,0,0,0.12);
  --shadow-gold: 0 8px 30px rgba(201,162,39,0.25);
  --shadow-premium: 0 20px 60px rgba(201,162,39,0.3);
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.15);
  --glass-blur: blur(20px);
  --glass-strong: rgba(255,255,255,0.15);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --t-fast: 0.2s var(--ease);
  --t-base: 0.35s var(--ease);
  --t-slow: 0.6s var(--ease);
  --t-premium: 0.5s var(--ease-out);

  /* Theme — Light */
  --bg: var(--white);
  --bg-alt: var(--gray-light);
  --bg-dark: var(--black);
  --text: var(--black);
  --text-muted: var(--gray-mid);
  --text-inverse: var(--white);
  --border: var(--gray);
  --header-bg: transparent;
  --header-solid: rgba(255,255,255,0.97);
  --header-text: var(--white);
  --header-text-solid: var(--black);
  --card-bg: var(--white);
  --overlay: rgba(17,17,17,0.6);
}

[data-theme="dark"] {
  --bg: #141414;
  --bg-alt: #1C1C1C;
  --bg-dark: #0A0A0A;
  --text: #F0F0F0;
  --text-muted: #AAAAAA;
  --border: #2A2A2A;
  --header-solid: rgba(20,20,20,0.97);
  --header-text-solid: #F0F0F0;
  --card-bg: #1C1C1C;
  --gray-light: #1C1C1C;
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 50px rgba(0,0,0,0.45);
}