/* ============================================================
   base.css — font loading plus the base rules the app needs on
   top of tokens.css.

   tokens.css is a verbatim copy of design/design-tokens.css and
   already carries the reset, heading scale, focus ring, reduced
   motion, colour-blind cues and .sr-only. Nothing here repeats
   those. This file adds what a stylesheet cannot know from the
   direction alone: where the font files live, and the handful of
   element defaults the product relies on.
   ============================================================ */

/* ---- fonts: self-hosted, latin subset, four files total ----
   Bricolage Grotesque and Public Sans ship as variable fonts, so one
   file each covers every weight the direction calls for. IBM Plex Mono
   has no variable release, hence two static cuts. Thai is deliberately
   not loaded: the product UI is English-only for now, and pulling a
   Thai face would break the four-file budget for text that never
   renders. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/public-sans-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

/* ---- element defaults ---- */

html {
  /* Tells the browser to render form controls and scrollbars in the
     right mode. Kept in sync with data-theme by the two rules below. */
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

body {
  min-height: 100vh;
  transition: background var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout);
}

::selection { background: var(--signal-bg); color: var(--tx); }

a { color: var(--signal-text); text-underline-offset: 2px; }
a:hover { color: var(--signal); }

/* Numbers that have to line up. tokens.css defines the face; these are
   the app's own aliases for the same role. */
.num, .credits, .timecode, .charcount, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* Display face has a floor of 16px per the direction. h3 and below are
   body face on purpose — see the type role table in VISUAL_DIRECTION. */
h3, h4, h5, h6 { font-family: var(--font-body); }

hr { border: 0; border-top: var(--border-width) solid var(--line); margin: 0; }

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

/* Icons inherit the text colour so a component never has to restate it. */
.icon {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; flex: none;
}

/* The <symbol> sprite every page carries. It renders nothing itself, but it
   still has to be taken out of flow or it reserves a line box. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Long-form writing surface. The direction asks for prose leading on
   the script textarea specifically, not on every input. */
.prose, .composer textarea { line-height: var(--leading-prose); }

/* Utility: something that must stay reachable by keyboard but visually
   sits behind other content until focused. */
.skip-link {
  position: absolute; left: var(--space-2); top: calc(var(--space-2) * -10);
  z-index: 200; padding: var(--space-2) var(--space-4);
  background: var(--surface-raised); color: var(--tx);
  border: var(--border-width) solid var(--line-control);
  border-radius: var(--radius-input);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-2); }