/* Longhorn brand layer. The tokens under ./tokens are copied verbatim from the
   design system (design/longhorn-design-system/tokens) — change them there and
   copy again; never edit the copies. This file adds only the type helpers the
   app's components use (t-*) and the coverage-state roles.

   Served statically from /public/brand so the relative font URLs resolve. */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";

:root {
  color-scheme: light;

  /* Coverage states — one role per facet terminal state (P3). Pasture is
     "ready", saffron "attention", cobalt "inferred / look elsewhere". */
  --state-answered: var(--pasture-500);
  --state-answered-tint: var(--pasture-50);
  --state-partial: var(--saffron-500);
  --state-partial-tint: var(--saffron-50);
  --state-unknown: var(--cobalt-500);
  --state-unknown-tint: var(--cobalt-50);
  --state-na: var(--ink-400);
  --state-na-tint: var(--paper-200);
  --state-pending: var(--paper-400);
}

html,
body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--saffron-200); color: var(--ink-900); }

/* Type helpers — names kept from the component layer, values from the system. */
.t-display-m { font: var(--weight-semibold) var(--text-display)/var(--lh-display) var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-strong); }
.t-h1 { font: var(--weight-semibold) var(--text-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-strong); }
.t-h2 { font: var(--weight-semibold) var(--text-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.t-h3 { font: var(--weight-semibold) var(--text-h3)/var(--lh-h3) var(--font-display); letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.t-h4 { font: var(--weight-semibold) var(--text-h4)/var(--lh-h4) var(--font-display); letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.t-body-l { font: var(--weight-regular) var(--text-body-lg)/var(--lh-body-lg) var(--font-body); }
.t-body { font: var(--weight-regular) var(--text-body)/var(--lh-body) var(--font-body); }
.t-body-s { font: var(--weight-regular) var(--text-body-sm)/var(--lh-body-sm) var(--font-body); }
.t-caption { font: var(--weight-medium) var(--text-caption)/var(--lh-caption) var(--font-body); color: var(--text-muted); }
/* The eyebrow is the system's mono label: 11px, +0.08em, uppercase. */
.t-eyebrow { font: var(--weight-medium) var(--text-mono-sm)/var(--lh-mono-sm) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }