:root {
  /* Core Brand Tokens — Dark (Default) */
  --bg: #05070B;
  --bg-deep: #020305;
  --surface: #0B101B;
  --surface-2: #101626;
  --surface-3: #182035;
  --surface-translucent: rgba(11, 16, 27, 0.78);
  
  --text: #F8F6F1;
  --text-muted: #9DA6B8;
  --text-subtle: #626C82;
  --border: #1C2436;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(216, 177, 91, 0.28);
  
  /* Restrained Champagne & Metallic Gold */
  --accent: #D8B15B;
  --accent-light: #F3D788;
  --accent-dark: #9E792B;
  --accent-gradient: linear-gradient(135deg, #ECC875 0%, #C89F43 50%, #ECC875 100%);
  --accent-glow: rgba(216, 177, 91, 0.18);
  
  --danger: #E0585B;
  --success: #3ECF8E;
  --info: #4A90E2;
  
  /* Typography */
  --font-heading: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  
  /* Spatial System */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  
  --container-max: 1320px;
  --container: min(var(--container-max), calc(100vw - clamp(28px, 5vw, 64px)));
  --nav-h: 76px;
  
  /* Depth & Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 10px 30px rgba(216, 177, 91, 0.15);
  
  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.18s var(--ease);
  --transition-normal: 0.35s var(--ease);
  --transition-slow: 0.7s var(--ease);
}

/* Light Theme Mode */
html[data-theme='light'] {
  color-scheme: light;
  --bg: #FAF8F5;
  --bg-deep: #F1EDE4;
  --surface: #FFFFFF;
  --surface-2: #F4EFE6;
  --surface-3: #E8E2D5;
  --surface-translucent: rgba(255, 255, 255, 0.85);
  
  --text: #121418;
  --text-muted: #5C6272;
  --text-subtle: #8A91A2;
  --border: #E0D7C9;
  --border-light: rgba(0, 0, 0, 0.06);
  --border-gold: rgba(184, 137, 46, 0.35);
  
  --accent: #B8892E;
  --accent-light: #D9B96A;
  --accent-dark: #7A5714;
  --accent-gradient: linear-gradient(135deg, #D4A94B 0%, #A67520 50%, #D4A94B 100%);
  --accent-glow: rgba(184, 137, 46, 0.12);
  
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.12);
  --shadow-gold: 0 10px 30px rgba(184, 137, 46, 0.1);
}

html[data-theme='dark'] {
  color-scheme: dark;
}