/* ==========================================================================
   The Alchemy of You - Design System Variables
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;
  --font-accent: 'Cinzel', Georgia, serif;

  /* -------------------------------------------------------------------------
     Default Theme (Dark) - Applied to :root for fallback
     ------------------------------------------------------------------------- */
  /* Backgrounds */
  --bg-primary: #0d0f14;
  --bg-secondary: #151821;
  --bg-tertiary: #1a1e2a;
  --bg-elevated: #1f2433;
  --bg-surface: #252a3a;

  /* Text */
  --text-primary: #e8e4df;
  --text-secondary: #9a958d;
  --text-tertiary: #6b6560;
  --text-inverse: #0d0f14;

  /* Brand Colors */
  --gold-primary: #d4a855;
  --gold-light: #f4d48a;
  --gold-dark: #a67c32;
  --gold-muted: rgba(212, 168, 85, 0.15);

  --silver: #c9d4e8;
  --silver-soft: #e8edf5;
  --silver-muted: rgba(201, 212, 232, 0.1);

  /* Program Colors */
  --moonlit-primary: #c9d4e8;
  --moonlit-glow: rgba(201, 212, 232, 0.3);
  --flame-primary: #e8a040;
  --flame-warm: #c45a30;
  --flame-glow: rgba(232, 160, 64, 0.3);

  /* Accent Colors */
  --twilight-deep: #2a2d4a;
  --twilight-mid: #4a4e7a;
  --earth-warm: #8b7355;
  --earth-sage: #7a8b6f;

  /* Interactive States */
  --border-default: rgba(212, 168, 85, 0.1);
  --border-hover: rgba(212, 168, 85, 0.3);
  --border-focus: var(--gold-primary);

  /* Shadows */
  --shadow-glow-gold: 0 0 30px rgba(212, 168, 85, 0.25);
  --shadow-glow-silver: 0 0 30px rgba(201, 212, 232, 0.2);

  /* Font Sizes - Fluid Typography */
  --text-hero: clamp(3rem, 8vw, 5.5rem);
  --text-h1: clamp(2.25rem, 5vw, 3.5rem);
  --text-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h3: clamp(1.35rem, 2.5vw, 1.75rem);
  --text-h4: clamp(1.125rem, 2vw, 1.35rem);
  --text-body: 1.125rem;
  --text-body-sm: 1rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

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

  /* Container */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --container-padding: clamp(1.5rem, 5vw, 3rem);

  /* -------------------------------------------------------------------------
     Animation
     ------------------------------------------------------------------------- */
  --ease-breath: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emergence: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;
  --duration-slower: 800ms;
  --duration-reveal: 1200ms;

  /* -------------------------------------------------------------------------
     Borders & Radius
     ------------------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  --border-thin: 1px;
  --border-medium: 2px;

  /* -------------------------------------------------------------------------
     Shadows (defined per theme)
     ------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 30px rgba(212, 168, 85, 0.3);

  /* -------------------------------------------------------------------------
     Z-Index Scale
     ------------------------------------------------------------------------- */
  --z-base: 0;
  --z-above: 10;
  --z-nav: 100;
  --z-modal: 1000;
  --z-toast: 2000;
}