/* ============================================================
   base.css — tokens, reset, themes, typography
   ============================================================ */

:root {
  /* palette */
  --abyss:  #02080F;
  --deep:   #061626;
  --navy:   #0D3050;
  --aqua:   #3FD9C9;
  --ice:    #D7E9F4;
  --mist:   #7F9EB4;

  /* semantic (deep theme is the default) */
  --bg:        var(--abyss);
  --bg-raised: var(--deep);
  --ink:       var(--ice);
  --ink-soft:  var(--mist);
  --accent:    var(--aqua);
  --rule:      rgba(215, 233, 244, 0.14);
  --glass-bg:  rgba(13, 48, 80, 0.32);
  --glass-edge:rgba(215, 233, 244, 0.16);
  --glow:      rgba(63, 217, 201, 0.35);

  /* type */
  --display: var(--text);
  --text: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* modular scale, fluid */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.12vw, 0.80rem);
  --t-sm:   clamp(0.84rem, 0.80rem + 0.20vw, 0.95rem);
  --t-base: clamp(1.00rem, 0.95rem + 0.25vw, 1.14rem);
  --t-md:   clamp(1.20rem, 1.05rem + 0.70vw, 1.62rem);
  --t-lg:   clamp(1.80rem, 1.30rem + 2.20vw, 3.10rem);
  --t-xl:   clamp(2.60rem, 1.40rem + 5.40vw, 6.20rem);
  --t-2xl:  clamp(3.20rem, 1.40rem + 8.00vw, 9.00rem);

  /* rhythm */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --flow:   clamp(1rem, 0.6rem + 1.4vw, 2rem);
  --shell-z: 60;

  /* motion */
  --ease: cubic-bezier(0.22, 0.85, 0.28, 1);
  --slow: 1.1s;
  --mid: 0.55s;
  --fast: 0.25s;
}

/* Lab light theme */
[data-theme="lab"] {
  --bg:        #EEF5F9;
  --bg-raised: #FFFFFF;
  --ink:       #061626;
  --ink-soft:  #4B6E87;
  --accent:    #0B8C8C;
  --rule:      rgba(6, 22, 38, 0.14);
  --glass-bg:  rgba(255, 255, 255, 0.55);
  --glass-edge:rgba(6, 22, 38, 0.10);
  --glow:      rgba(11, 140, 140, 0.22);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease);
}
body.is-loading { overflow: hidden; }
body.nav-open,
body.immersive-mode { overflow: hidden; }

/* ---------- typography ---------- */
.hero__title,
.chapter__title,
.finale__title,
.chapter__num,
.loader__count,
.readouts__val,
.mark__text,
.footer__mark {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.hero__title { font-size: var(--t-2xl); line-height: 0.92; }
.chapter__title, .finale__title { font-size: var(--t-xl); line-height: 0.96; }
.chapter__title .line, .hero__title .line, .finale__title .line { display: block; }
.hero__title .line--indent { padding-left: 0.22em; font-style: italic; }

h3 { font-family: var(--text); font-size: var(--t-base); font-weight: 500; letter-spacing: 0.005em; }

p { text-wrap: pretty; }

.chapter__lede, .hero__lede, .finale__lede {
  font-size: var(--t-md);
  line-height: 1.45;
  max-width: 34ch;
  color: var(--ink);
}

.note {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  max-width: 40ch;
  font-style: italic;
}

/* ---------- accessibility ---------- */
.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;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--abyss); }