/* base.css — Design tokens, reset, icon sizing and accessibility helpers.
   Load order matters: base → components → sections → responsive → animations. */

:root {
  --bg: #0a111d;
  --bg-alt: #0e1726;
  --panel: #121e31;
  --panel-2: #172640;
  --ink: #0d1624;
  --text: #eef2fa;
  --soft: #9fb0c8;
  --muted: #6f7f98;
  --line: rgba(198, 215, 255, .13);
  --line-strong: rgba(198, 215, 255, .24);
  --accent: #a7bce7;
  --accent-bright: #c6d7ff;
  --warm: #f19757;
  --red: #db7263;
  --blue: #9bbadd;
  --green: #8fd3b0;
  --light: #f4f6fb;
  --light-2: #e8ecf5;
  --light-line: #dde3ef;
  --light-text: #0d1624;
  --light-soft: #5d6b82;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
.site-shell { overflow: clip; }
.container { width: min(1200px, calc(100% - 10vw)); margin: 0 auto; }
.hidden { display: none !important; }

/* inline SVG icons (sprite defined at top of index.html) */
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; }
.button .ic { font-size: 16px; }

/* ---------- accessibility ---------- */
/* One visible outline for keyboard users (mouse clicks don't trigger :focus-visible). */
:where(a, button, summary, [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}
.dashboard-window :focus-visible, .stage-ui :focus-visible { outline-color: #4f6fc4; }
main:focus { outline: none; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--accent-bright); color: var(--ink); font-weight: 800; font-size: 14px; transition: top .2s ease; }
.skip-link:focus { top: 12px; }
.skip-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
/* Small grey labels on the slightly lighter sections use the lighter grey so they keep readable contrast. */
.section-alt { --muted: var(--soft); }
/* Looping animations pause while their section is off-screen (class set by script.js). */
.js [data-anim-scope].offscreen *, .js [data-anim-scope].offscreen *::before, .js [data-anim-scope].offscreen *::after { animation-play-state: paused !important; }

/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }