/* Sim Atlas design tokens — shared by the hub and every simulation.
 * Subjects override --accent (and --accent-2) with their own colour.
 */
:root {
  --bg: #05070f;
  --bg-elev: #0b1020;
  --panel: rgba(10, 14, 28, 0.78);
  --panel-solid: #0f1527;
  --panel-border: rgba(140, 170, 255, 0.16);
  --text: #e6eefc;
  --text-strong: #ffffff;
  --muted: #93a4c7;
  --accent: #3ee6ff;
  --accent-2: #a78bfa;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;

  --subject-physics: #3ee6ff;
  --subject-chemistry: #fb923c;
  --subject-biology: #34d399;
  --subject-mathematics: #a78bfa;
  --subject-earth-space: #60a5fa;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.3);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 34px; --fs-3xl: 48px;
  --lh: 1.55;

  --max-width: 1240px;
  --focus: 0 0 0 3px rgba(62, 230, 255, 0.55);
}

:root[data-theme="light"] {
  --bg: #f4f7ff;
  --bg-elev: #ffffff;
  --panel: rgba(255, 255, 255, 0.85);
  --panel-solid: #ffffff;
  --panel-border: rgba(20, 40, 90, 0.12);
  --text: #0f172a;
  --text-strong: #000000;
  --muted: #526081;
  --shadow: 0 10px 40px rgba(20, 40, 90, 0.14);
  --shadow-soft: 0 4px 18px rgba(20, 40, 90, 0.1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-md); line-height: var(--lh); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.glass { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.btn { background: rgba(255,255,255,.06); border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 12px; font-size: var(--fs-sm); cursor: pointer; transition: background .15s, transform .1s; color: var(--text); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.btn:hover { background: rgba(255,255,255,.12); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #06101f; border: 0; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--panel-border); }
.dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex: none; display: inline-block; }