/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Dark theme (default) */
  --bg: #0a0e14;
  --surface: #0a0e14;
  --surface-dim: #0a0e14;
  --surface-container-lowest: #000000;
  --surface-container-low: #0f141a;
  --surface-container: #151a21;
  --surface-container-high: #1b2028;
  --surface-container-highest: #20262f;
  --surface-bright: #262c36;
  --surface-variant: #20262f;
  --on-surface: #f1f3fc;
  --on-surface-variant: #d0d3da;
  --on-background: #f1f3fc;
  --primary: #cadefb;
  --primary-dim: #bcd0ed;
  --primary-container: #8ea2bd;
  --on-primary: #3c5067;
  --secondary: #79f5f7;
  --secondary-dim: #69e7e9;
  --secondary-container: #00696b;
  --on-secondary: #005b5d;
  --tertiary: #a68cff;
  --outline: #72757d;
  --outline-variant: #44484f;
  --error: #ff716c;
  --inverse-surface: #f8f9ff;
  --glass-bg: rgba(32, 38, 47, 0.6);
  --glass-border: rgba(255, 255, 255, 0.05);
  --shadow-color: rgba(0, 0, 0, 0.4);
  --nav-bg: rgba(0, 0, 0, 0.6);
  --logo-filter: none;
}

html.light {
  --bg: #e4e7ed;
  --surface: #eaecf1;
  --surface-dim: #dfe2e8;
  --surface-container-lowest: #f5f6f9;
  --surface-container-low: #eef0f4;
  --surface-container: #e4e7ed;
  --surface-container-high: #dadde4;
  --surface-container-highest: #d0d3db;
  --surface-bright: #f0f2f6;
  --surface-variant: #dadde4;
  --on-surface: #1a1e26;
  --on-surface-variant: #4a4f57;
  --on-background: #1a1e26;
  --primary: #3a5a7c;
  --primary-dim: #4d6079;
  --primary-container: #b8cce2;
  --on-primary: #ffffff;
  --secondary: #00797b;
  --secondary-dim: #00696b;
  --secondary-container: #a8f0f2;
  --on-secondary: #ffffff;
  --tertiary: #6b4fcf;
  --outline: #8a8d95;
  --outline-variant: #c4c7cf;
  --error: #c4332e;
  --inverse-surface: #1a1e26;
  --glass-bg: rgba(240, 242, 246, 0.7);
  --glass-border: rgba(0, 0, 0, 0.06);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --nav-bg: rgba(234, 236, 241, 0.8);
  --logo-filter: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(500%) hue-rotate(180deg);
}