/* =========================================================================
 * base.css — design tokens, resets, typography. Framework-owned.
 *
 * Components and instance regions should reference these via var(--u-*).
 * Override a token in a region's CSS to retint just that region; override
 * it at :root in a theme file to retint globally.
 * ========================================================================= */

:root {
  /* Semantic tokens — the smallest vocabulary every component shares. */
  --u-bg:           #0b0c0e;    /* page background                       */
  --u-bg-elev:      #14161a;    /* elevated surface (tiles, panels)       */
  --u-text:         #d8d9da;    /* primary text                           */
  --u-text-dim:     #8b8c90;    /* secondary text, labels                 */
  --u-accent:       #4fc1c9;    /* default brand accent (overridable)     */
  --u-accent-glow:  rgba(79,193,201,0.45);
  --u-border:       rgba(255,255,255,0.06);
  --u-border-accent:rgba(79,193,201,0.18);

  /* Typography primitives — faces pinned here so components don't each
     pick their own font. */
  --u-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --u-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Header height is measured at runtime by header.js (mobile wraps etc.)
     and re-set on this var. Fallback keeps sticky positioning sane before
     the measurement runs. */
  --header-h: 54px;
}

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

html, body {
  background: var(--u-bg);
  color: var(--u-text);
  font-family: var(--u-sans);
  font-size: 14px;
  line-height: 1.4;
  max-width: 100vw;
  overflow-x: hidden;
}

a { color: var(--u-accent); text-decoration: none; }
a:hover { text-decoration: underline; }