/* CSS Variables for Theme System */
:root {
  color-scheme: dark;

  /* Dark Mode (Default) */
  --bg-primary: #000000;
  --bg-secondary: #12121a;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.14);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);

  /* Accent + Headings */
  --accent-rgb: 128 156 255;
  --heading-color: #a78bfa;
  --heading-gradient: linear-gradient(135deg, #667eea, #764ba2);
  --accent-gradient: var(--heading-gradient);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Breakpoints */
  --mobile: 0px;
  --tablet: 768px;
  --desktop: 1024px;
  --wide: 1440px;
}

/* Light Mode */
body:has(#theme-toggle-checkbox:checked),
[data-theme="light"] {
  color-scheme: light;

  /* Cooler, technical white palette */
  --bg-primary: #ffffff;
  --bg-secondary: #f1f5f9;
  /* Slate-100 */
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: #cbd5e1;
  /* Slate-300 */
  --text-primary: #0f172a;
  /* Slate-900 */
  --text-secondary: #475569;
  /* Slate-600 */

  /* Technical Grid Color */
  --grid-color: rgba(148, 163, 184, 0.15);

  /* Flat accent colors */
  --accent-rgb: 71 85 105;
  --heading-color: #1e293b;
  --heading-gradient: linear-gradient(135deg, #334155, #475569);
  /* Subtle matte gradient */
}