/* CSS Design Tokens: Clean (Light) & Dark Luxury (Dark) */

:root {
  /* ========================================================================
     DARK LUXURY (Dark Mode Default)
     Warm obsidian black, metallic amber gold, deep elevated surfaces
     ======================================================================== */
  --bg: #0a0907;
  --surface: #100f0d;
  --surface-hover: #161412;
  --card: #141210;
  --card-shadow: inset 0 1px 0 rgba(255, 248, 230, 0.08), 0 4px 24px rgba(0, 0, 0, 0.45);
  --card-shadow-hover: inset 0 1px 0 rgba(255, 248, 230, 0.12), 0 12px 36px rgba(0, 0, 0, 0.55);
  --border: rgba(255, 248, 230, 0.08);
  --border-medium: rgba(255, 248, 230, 0.14);
  --border-focus: rgba(212, 160, 60, 0.55);
  --text: #f0ebe0;
  --body: #8a8070;
  --muted: #5a544a;
  --text-primary: var(--text);
  --text-muted: var(--body);
  --accent: #d4a03c;
  --accent-hover: #e8b84e;
  --accent-glow: rgba(212, 160, 60, 0.18);
  --accent-subtle: rgba(212, 160, 60, 0.08);
  --btn-primary-bg: #14120f;
  --btn-primary-text: #f0ebe0;
  --btn-primary-border: rgba(212, 160, 60, 0.55);
  --btn-primary-glow: 0 0 20px rgba(212, 160, 60, 0.22);
  --dot-color: 255, 248, 230;

  /* Typography */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --heading-spacing: -0.035em;
  --body-line-height: 1.65;

  /* Fluid Font Scale */
  --font-hero: clamp(2.5rem, 5.5vw + 1rem, 5.25rem);
  --font-h1: clamp(2rem, 3.5vw + 0.5rem, 3.25rem);
  --font-h2: clamp(1.4rem, 2vw + 0.5rem, 2rem);
  --font-h3: clamp(1.1rem, 1.2vw + 0.4rem, 1.35rem);
  --font-body-size: clamp(0.9375rem, 0.25vw + 0.9rem, 1.0625rem);
  --font-small: 0.875rem;
  --font-xs: 0.75rem;

  /* Spacing Scale (8px Grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* Layout */
  --max-width: 1240px;
  --header-height: 64px;

  /* Transitions */
  --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Dot Number Core */
  --dot-num-core: #ffffff;
}

/* ==========================================================================
   CLEAN STYLE (Light Mode)
   Pure white, warm off-white surface rhythm, near-black CTA, subtle cobalt
   ========================================================================== */
[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #F7F6F2;
  --surface-hover: #EFECE6;
  --card: #FFFFFF;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.07);
  --border: #E8E6E1;
  --border-medium: #DCD8D0;
  --border-focus: rgba(37, 99, 235, 0.55);
  --text: #0F0E0C;
  --body: #6B6760;
  --muted: #A8A49F;
  --text-primary: var(--text);
  --text-muted: var(--body);
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, 0.16);
  --accent-subtle: rgba(37, 99, 235, 0.08);
  --btn-primary-bg: #0F0E0C;
  --btn-primary-text: #FFFFFF;
  --btn-primary-border: #0F0E0C;
  --btn-primary-glow: 0 2px 10px rgba(15, 14, 12, 0.15);
  --dot-color: 15, 14, 12;
  --dot-num-core: #1d4ed8;
}