/* shared/tokens.css — Part 2 of the Unified Framework ("One Light, Four
   Rooms") as CSS custom properties. Every color, size, and timing class in
   the site consumes these; no page may invent literal values.
   One deliberate departure from the spec's letter: fonts are self-hosted
   woff2, not a Google Fonts @import — the site must render fully with no
   network access (the operator's overriding platform requirement). */

@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 200; font-display: swap; src: url("../assets/fonts/titillium-web-200.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/titillium-web-300.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/titillium-web-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/titillium-web-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/titillium-web-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/titillium-web-700.woff2") format("woff2"); }

:root {
  /* Ground — identical on all pages (Part 2.1) */
  --ground: #0B0B0D;
  --ground-raised: #141417;
  --ink: #E9E6DE;
  --ink-dim: #8A877F;
  --line: #26262B;

  /* Series temperatures — accents ONLY (glows, reveals, 2px indicators) */
  --temp-mutable: #E8B87D;
  --temp-seaer: #8AFFC9;
  --temp-place: #9AB8A6;
  --temp-people: #A9B4D6;
  --temp-signals: #C9A7B0;  /* First Signals (earliest interactive works) — dusty rose, distinct from the four trajectories */

  --motion-scale: 1;
}

* { box-sizing: border-box; }

body {
  background: var(--ground);
  color: var(--ink);
  margin: 0;
  font-family: "Titillium Web", sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--ground); }

img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Type scale (Part 2.2) */
.type-hero  { font-size: clamp(40px, 7vw, 64px); font-weight: 200; letter-spacing: 0.02em; line-height: 1.05; margin: 0; }
.type-title { font-size: 28px; font-weight: 300; margin: 0; }
.type-body  { font-size: 17px; font-weight: 300; line-height: 1.6; margin: 0; }
.type-meta  { font-size: 13px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.type-glyph { font-size: 15px; font-weight: 600; margin: 0; }

/* Layout (Part 2.3): base unit 8px, content max 1120px */
.content-col {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 640px) { .content-col { padding: 0 16px; } }

:focus-visible { outline: 2px solid var(--temp-people); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}