:root {
  --color-primary: 195 245 255;
  --color-on-surface: 220 225 251;
  --color-on-surface-variant: 186 201 204;
  --color-surface: 12 19 36;
  --color-surface-container: 25 31 49;
  --color-surface-container-low: 21 27 45;
  --color-surface-container-high: 35 41 60;
  --color-surface-container-highest: 46 52 71;
  --color-background: 12 19 36;
  --color-outline-variant: 59 73 76;
  --color-primary-fixed-dim: 0 218 243;
  --color-on-primary: 0 54 61;
  --color-surface-tint: 0 218 243;
}

html.light {
  --color-primary: 14 165 233;
  --color-on-surface: 15 23 42;
  --color-on-surface-variant: 71 85 105;
  --color-surface: 241 245 249;
  --color-surface-container: 226 232 240;
  --color-surface-container-low: 248 250 252;
  --color-surface-container-high: 255 255 255;
  --color-surface-container-highest: 255 255 255;
  --color-background: 241 245 249;
  --color-outline-variant: 203 213 225;
  --color-primary-fixed-dim: 2 132 199;
  --color-on-primary: 255 255 255;
  --color-surface-tint: 14 165 233;
}

html.light body {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%) !important;
  color: #0f172a !important;
}

html.light body::before {
  background:
    radial-gradient(ellipse 800px 600px at 20% 50%, rgba(14, 165, 233, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 600px 500px at 80% 20%, rgba(59, 130, 246, 0.04) 0%, transparent 50%) !important;
}

html.light nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.88) 100%) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

html.light .glass-card {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

html.light .service-card-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light .pub-settings-panel,
html.light .settings-panel {
  background: #f8fafc;
  border-left-color: rgba(0, 0, 0, 0.08);
}

html.light .lang-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

html.light .lang-item {
  color: #475569;
}

html.light .lang-item:hover,
html.light .lang-item.active {
  color: #0284c7;
}