/* ============================================================
   Torad Design System · Base
   Element defaults built from semantic tokens. A finished
   starting point, not a reset: write semantic HTML, get Torad.
   Requires torad-tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 18px;
  background: var(--surface);
  scroll-behavior: smooth;
  /* kill horizontal page-scroll from off-screen absolute/fixed children
     (hidden glossary tooltips, the closed mobile drawer). clip (not hidden)
     establishes no scroll container, so position:sticky on the nav still works. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* anchor targets land clear of the sticky nav (only applies when an element is :target-ed) */
[id] { scroll-margin-block-start: calc(var(--nav-h, 60px) + var(--space-4)); }

body {
  background: var(--surface);
  color: var(--ink-body);
  font-family: var(--font-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* contain off-screen absolute children (e.g. hidden glossary tooltips near the
     right edge on narrow screens) so they never add horizontal page-scroll.
     clip (not hidden) creates no scroll container, so the fixed nav stays put. */
  overflow-x: clip;
}

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

/* film grain: faint fixed texture so the flat dark reads as a surface, not a void.
   never intercepts input; no shadow, no glow. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-strong);
  line-height: 1.05;
  text-wrap: balance;
  letter-spacing: -0.012em;
}
h1 { font-size: var(--text-9); letter-spacing: -0.018em; margin-bottom: var(--space-6); }
h2 { font-size: var(--text-7); margin-bottom: var(--space-6); }
h3 { font-size: var(--text-6); margin-bottom: var(--space-4); }
h4 { font-size: var(--text-5); margin-bottom: var(--space-3); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-1); }
a:hover { color: var(--accent-bright); }
strong, b { color: var(--ink-strong); font-weight: 600; }
em { font-style: italic; color: var(--ink-strong); }
/* .t-mark · the gold voltage in running prose. for key brand terms, used sparingly. */
.t-mark { color: var(--accent); font-weight: 500; }
.t-mark--ul { text-decoration: underline; text-decoration-thickness: var(--hair);
  text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, var(--accent) 38%, transparent); }
small { font-size: var(--text-2); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
hr { border: 0; height: var(--hair); background: var(--line); margin: var(--space-6) 0; }

ul, ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }

img, svg, canvas { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

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