/* Dark-first: tránh flash light khi reload ở chế độ tối */
:root {
  --color-surface: #0b1326;
  --color-surface-dim: #0b1326;
  --color-surface-container-lowest: #060e20;
  --color-surface-container-low: #131b2e;
  --color-surface-container: #171f33;
  --color-surface-container-high: #222a3d;
  --color-surface-container-highest: #2d3449;
  --color-on-surface: #dae2fd;
  --color-on-surface-variant: #c1c6d7;
  --color-outline: #8b90a0;
  --color-outline-variant: #414754;
  --color-primary: #adc7ff;
  --color-on-primary: #002e68;
  --color-primary-container: #4a8eff;
  --color-on-primary-container: #00285b;
  --color-tertiary: #ffba38;
  --color-on-tertiary: #432c00;
  --color-tertiary-container: #c08600;
  --color-secondary: #c0c1ff;
  --color-glass-bg: rgba(19, 27, 46, 0.55);
  --color-header-bg: rgba(11, 19, 38, 0.72);
  --color-card-bg: rgba(23, 31, 51, 0.65);
  --color-card-hover: rgba(34, 42, 61, 0.75);
  --color-shader-opacity: 1;
  --color-mesh-1: rgba(74, 142, 255, 0.15);
  --color-mesh-2: rgba(192, 134, 0, 0.1);
  --color-mesh-3: rgba(49, 49, 192, 0.15);
  --color-card-shadow: none;
  --color-header-shadow: none;
  color-scheme: dark;
}

html:not(.dark) {
  --color-surface: #eef2fa;
  --color-surface-dim: #e4eaf6;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f6fc;
  --color-surface-container: #e8edf8;
  --color-surface-container-high: #dce4f4;
  --color-surface-container-highest: #cdd8ee;
  --color-on-surface: #141c2b;
  --color-on-surface-variant: #3d4a5c;
  --color-outline: #7a8496;
  --color-outline-variant: #c8d0e0;
  --color-primary: #2563eb;
  --color-on-primary: #ffffff;
  --color-primary-container: #d8e6ff;
  --color-on-primary-container: #00285b;
  --color-tertiary: #e5a000;
  --color-on-tertiary: #2a1d00;
  --color-tertiary-container: #ffdeac;
  --color-secondary: #4f46e5;
  --color-glass-bg: rgba(255, 255, 255, 0.82);
  --color-header-bg: rgba(255, 255, 255, 0.86);
  --color-card-bg: rgba(255, 255, 255, 0.94);
  --color-card-hover: rgba(255, 255, 255, 1);
  --color-shader-opacity: 1;
  --color-mesh-1: rgba(37, 99, 235, 0.12);
  --color-mesh-2: rgba(229, 160, 0, 0.09);
  --color-mesh-3: rgba(79, 70, 229, 0.1);
  --color-card-shadow: 0 4px 24px rgba(20, 28, 43, 0.07);
  --color-header-shadow: 0 8px 32px rgba(20, 28, 43, 0.08);
  color-scheme: light;
}

html {
  background-color: var(--color-surface);
}

body {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: Geist, 'Segoe UI', sans-serif;
}

/* Chỉ animate khi đổi theme bằng nút — không animate lúc reload */
html.theme-ready body,
html.theme-ready .theme-surface,
html.theme-ready .theme-surface-low,
html.theme-ready .theme-surface-container,
html.theme-ready .theme-surface-high {
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, .font-display-lg, .font-headline {
  font-family: 'Space Grotesk', sans-serif;
}

.font-body-md, .font-body-lg, p, li {
  font-family: Geist, 'Segoe UI', sans-serif;
}

.font-label-caps {
  font-family: 'JetBrains Mono', monospace;
}

main > section {
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  main > section {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.page-container {
  padding: 1rem;
}

.theme-surface { background-color: var(--color-surface); }
.theme-surface-low { background-color: var(--color-surface-container-low); }
.theme-surface-lowest { background-color: var(--color-surface-container-lowest); }
.theme-surface-container { background-color: var(--color-surface-container); }
.theme-surface-high { background-color: var(--color-surface-container-high); }
.theme-text { color: var(--color-on-surface); }
.theme-text-muted { color: var(--color-on-surface-variant); }
.theme-border { border-color: var(--color-outline-variant); }
.theme-primary { color: var(--color-primary); }
.theme-tertiary { color: var(--color-tertiary); }

.shader-bg {
  display: none !important;
}

/* Light mode polish */
html:not(.dark) .surface-card {
  box-shadow: var(--color-card-shadow);
}

html:not(.dark) .surface-card:hover {
  box-shadow: 0 8px 32px rgba(20, 28, 43, 0.1);
}

html:not(.dark) .floating-header {
  box-shadow: var(--color-header-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-color: rgba(200, 208, 224, 0.9);
}

html:not(.dark) .glass-panel {
  box-shadow: 0 2px 20px rgba(20, 28, 43, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html:not(.dark) .btn-outline {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--color-outline-variant);
}

html:not(.dark) .btn-outline:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
}

html:not(.dark) .pricing-popular {
  box-shadow: 0 12px 40px rgba(229, 160, 0, 0.15);
}