:root {
  /* === Colors — Hyper-Premium Dark Theme === */
  --bg-primary: #020611; /* Deeper, cinematic black-blue */
  --bg-secondary: #0a0f1d;
  --bg-card: rgba(10, 15, 29, 0.65);
  --bg-card-solid: #0f172a;
  --bg-card-hover: rgba(15, 20, 35, 0.85);
  --bg-glass: rgba(10, 15, 29, 0.5);
  --bg-header: rgba(2, 6, 17, 0.75);
  --bg-input: rgba(255, 255, 255, 0.03);
  --bg-modal-overlay: rgba(0, 0, 0, 0.85);

  /* Gradient accents - True Metallic Gold */
  --gradient-gold: linear-gradient(135deg, #d4af37 0%, #ffdf73 25%, #c59b27 50%, #f9d976 75%, #b8860b 100%);
  --gradient-hero: linear-gradient(135deg, #020611 0%, #150a21 40%, #06111a 100%);
  --gradient-card-border: linear-gradient(135deg, rgba(212, 175, 55, 0.4), rgba(179, 136, 255, 0.15), rgba(79, 195, 247, 0.25));
  --gradient-shine: linear-gradient(45deg, transparent 20%, rgba(255,255,255,0.08) 50%, transparent 80%);
  --gradient-neon-border: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(79, 195, 247, 0.4), rgba(179, 136, 255, 0.5));

  /* Accent palette */
  --accent-gold: #d4af37; /* Metallic gold base */
  --accent-gold-light: #f9d976;
  --accent-gold-dark: #b8860b;
  --accent-gold-glow: rgba(212, 175, 55, 0.3);
  --accent-blue: #4fc3f7;
  --accent-blue-glow: rgba(79, 195, 247, 0.2);
  --accent-purple: #b388ff;
  --accent-purple-glow: rgba(179, 136, 255, 0.2);
  --accent-green: #69f0ae;
  --accent-rose: #ff6b9d;
  --accent-cyan: #22d3ee;

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: var(--accent-gold);

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.06);
  --border-color-hover: rgba(255, 255, 255, 0.12);
  --border-glow: rgba(240, 180, 41, 0.25);

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Noto Serif', Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.5rem;

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* === 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;

  /* === Border Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0,0,0,0.5);
  --shadow-glow-gold: 0 0 40px rgba(212, 175, 55, 0.2), 0 0 80px rgba(212, 175, 55, 0.1);
  --shadow-glow-blue: 0 0 40px rgba(79, 195, 247, 0.15);
  --shadow-glow-purple: 0 0 40px rgba(179, 136, 255, 0.15);
  /* Added inset white shadow for glass edge highlight */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 -1px 1px rgba(0,0,0,0.2);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 40px rgba(212, 175, 55, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0,0,0,0.3);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* === Layout === */
  --header-height: 72px;
  --container-max: 1320px;
  --sidebar-width: 320px;
}

/* === Light Theme === */
[data-theme="light"] {
  --bg-primary: #f8f6f1;
  --bg-secondary: #efeade;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-solid: #ffffff;
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.6);
  --bg-header: rgba(248, 246, 241, 0.85);
  --bg-input: rgba(0, 0, 0, 0.04);
  --bg-modal-overlay: rgba(0, 0, 0, 0.5);

  --gradient-hero: linear-gradient(135deg, #f8f6f1 0%, #efeade 40%, #f5f0e6 100%);
  --gradient-card-border: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.15));
  --gradient-shine: linear-gradient(45deg, transparent 20%, rgba(0,0,0,0.02) 50%, transparent 80%);

  --accent-gold: #b8860b;
  --accent-gold-light: #d4a017;
  --accent-gold-dark: #8b6914;
  --accent-gold-glow: rgba(184, 134, 11, 0.15);

  --text-primary: #1a1a2e;
  --text-secondary: #555568;
  --text-muted: #8888a0;
  --text-accent: var(--accent-gold);

  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-hover: rgba(0, 0, 0, 0.15);
  --border-glow: rgba(184, 134, 11, 0.2);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-glow-gold: 0 0 30px rgba(184, 134, 11, 0.1), 0 0 60px rgba(184, 134, 11, 0.05);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 20px rgba(184, 134, 11, 0.05);
}

/* Smooth theme transition */
body, body * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}