/* Shared layout, two color palettes. Theme selection happens before first paint. */
:root {
  color-scheme: dark;
  --net-link: 129, 140, 248;
  --net-mouse: 34, 211, 238;
  --net-dot-a: rgba(125, 211, 252, 0.9);
  --net-dot-b: rgba(192, 132, 252, 0.85);
  --net-line-opacity: 0.34;
  --net-line-width: 1;
  --net-mouse-opacity: 0.4;
  --net-dot-scale: 1;
}

.theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: color var(--hover-duration) var(--hover-ease), background var(--hover-duration) var(--hover-ease), border-color var(--hover-duration) var(--hover-ease);
}

.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--c2); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-icon-moon { display: none; }

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fc;
  --bg-2: #eef1f8;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: #e8edf7;
  --line: rgba(36, 56, 96, 0.14);
  --text: #17213a;
  --muted: #52617a;
  --c1: #086f88;
  --c2: #5558c9;
  --c3: #8543a6;
  --warn: #bd3848;
  --good: #167454;
  --net-link: 57, 77, 133;
  --net-mouse: 8, 95, 125;
  --net-dot-a: rgba(8, 95, 125, 0.86);
  --net-dot-b: rgba(77, 69, 170, 0.8);
  --net-line-opacity: 0.5;
  --net-line-width: 1.15;
  --net-mouse-opacity: 0.58;
  --net-dot-scale: 1.12;
  scrollbar-color: #bbc5d6 transparent;
}

[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }
[data-theme="light"] body::after { opacity: 0.012; }
[data-theme="light"] ::selection { background: #d8e4ff; color: var(--text); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #bbc5d6; }

[data-theme="light"] .nav { background: linear-gradient(rgba(247, 248, 252, 0.94), rgba(247, 248, 252, 0)); }
[data-theme="light"] .nav.scrolled { background: rgba(247, 248, 252, 0.88); }
[data-theme="light"] .mobile-nav { background: rgba(247, 248, 252, 0.97); }
[data-theme="light"] .mobile-nav a { border-bottom-color: var(--line); }
[data-theme="light"] .section-kicker::after { background: #c5cede; }

[data-theme="light"] .hero-veil {
  background:
    radial-gradient(ellipse 90% 65% at 50% 42%, transparent 30%, rgba(247, 248, 252, 0.58) 100%),
    linear-gradient(180deg, rgba(247, 248, 252, 0.18), transparent 30%, var(--bg) 96%);
}
[data-theme="light"] .aurora { opacity: 0.55; }
[data-theme="light"] .aurora-1 { background: radial-gradient(circle, rgba(100, 179, 222, 0.32), transparent 70%); }
[data-theme="light"] .aurora-2 { background: radial-gradient(circle, rgba(163, 145, 224, 0.32), transparent 70%); }
[data-theme="light"] .h1-dim { color: #4a5972; }
[data-theme="light"] .intro-claim .w { color: #8b97aa; }
[data-theme="light"] .intro-claim .w.lit { color: var(--text); }
[data-theme="light"] .intro-claim .w.accent.lit { color: transparent; }

[data-theme="light"] .btn-primary { color: #fff; box-shadow: 0 6px 20px rgba(85, 88, 201, 0.16); }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 10px 28px rgba(85, 88, 201, 0.24); }
[data-theme="light"] .btn-ghost { background: rgba(255, 255, 255, 0.65); }
[data-theme="light"] .bento-card {
  background: linear-gradient(145deg, #fff, #f3f6fc);
  border-color: rgba(36, 56, 96, 0.19);
  box-shadow: 0 3px 8px rgba(36, 56, 96, 0.035), 0 12px 28px rgba(36, 56, 96, 0.045);
}
[data-theme="light"] .bento-card.featured { background: linear-gradient(130deg, #eaf5f9, #f0edfc 65%, #f8f9fd); }
[data-theme="light"] .bento-card:hover { border-color: rgba(85, 88, 201, 0.4); box-shadow: 0 5px 12px rgba(36, 56, 96, 0.045), 0 16px 32px rgba(36, 56, 96, 0.065); }
[data-theme="light"] .bento-card::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(85, 88, 201, 0.07), transparent 65%); }
[data-theme="light"] .mini-window { background: rgba(255, 255, 255, 0.7); box-shadow: 0 14px 30px rgba(36, 56, 96, 0.08); }
[data-theme="light"] .tstep-card { background: rgba(255, 255, 255, 0.9); border-color: rgba(36, 56, 96, 0.17); box-shadow: 0 5px 16px rgba(36, 56, 96, 0.045); }
[data-theme="light"] .tstep.done .tstep-card { border-color: rgba(85, 88, 201, 0.3); box-shadow: 0 8px 24px rgba(85, 88, 201, 0.06); }

[data-theme="light"] .story-progress span { background: #7988a3; }
[data-theme="light"] .story-progress span.on { background: var(--grad); box-shadow: 0 2px 8px rgba(85, 88, 201, 0.2); }
[data-theme="light"] .story-visual .node-label { fill: var(--muted); }
[data-theme="light"] .story-visual .node-label-b { fill: var(--text); }
[data-theme="light"] .node-core-chaos { fill: var(--bg); stroke: var(--warn); }
[data-theme="light"] .story-visual .chaos-line { stroke: rgba(189, 56, 72, 0.36); }
[data-theme="light"] .flow-dash { stroke: var(--c2); }
[data-theme="light"] #flowGrad stop:nth-child(1) { stop-color: var(--c1); }
[data-theme="light"] #flowGrad stop:nth-child(2) { stop-color: var(--c2); }
[data-theme="light"] #flowGrad stop:nth-child(3) { stop-color: var(--c3); }
[data-theme="light"] .about-badge { color: var(--text); background: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.65); }

[data-theme="light"] .contact { background: radial-gradient(ellipse at 0 0, rgba(108, 179, 221, 0.09), transparent 65%), #eef1f8; }
[data-theme="light"] .contact-form { background: rgba(255, 255, 255, 0.9); border-color: rgba(36, 56, 96, 0.17); box-shadow: 0 8px 24px rgba(36, 56, 96, 0.055); }
[data-theme="light"] .field input, [data-theme="light"] .field textarea { background: #f7f8fc; }
[data-theme="light"] .field input::placeholder, [data-theme="light"] .field textarea::placeholder { color: #65728a; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] .intro-claim .w { color: var(--text); }
  [data-theme="light"] .intro-claim .w.accent { color: transparent; }
}