/* Shared structure. Reads ONLY tokens (tokens-base.css + the active tokens-<look>.css). No raw colors/sizes here
 * except 0, 100%, 1fr and similar layout values. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--c-bg); color: var(--c-ink); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.num { font-family: var(--font-num); font-weight: var(--fw-num); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); }
.display { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); text-transform: var(--tt-display); }

/* team color: set data-team-color on the element (whitelisted in js/lib/dom.js), CSS reads --team-*  */
.sw { background: var(--team, var(--team-silver)); outline: var(--hairline) solid var(--c-swatch-outline); outline-offset: -1px; }
[data-team-color="red"] { --team: var(--team-red); }       [data-team-color="gold"] { --team: var(--team-gold); }
[data-team-color="lime"] { --team: var(--team-lime); }     [data-team-color="green"] { --team: var(--team-green); }
[data-team-color="teal"] { --team: var(--team-teal); }     [data-team-color="sky"] { --team: var(--team-sky); }
[data-team-color="blue"] { --team: var(--team-blue); }     [data-team-color="violet"] { --team: var(--team-violet); }
[data-team-color="magenta"] { --team: var(--team-magenta); } [data-team-color="pink"] { --team: var(--team-pink); }
[data-team-color="sand"] { --team: var(--team-sand); }     [data-team-color="silver"] { --team: var(--team-silver); }

/* hazard stripe */
.hazard { height: var(--stripe-h); background: repeating-linear-gradient(-45deg, var(--c-stripe-a) 0 18px, var(--c-stripe-b) 18px 36px); }

/* logo + wordmark */
.logo { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.logo img { display: block; height: 100%; width: auto; }
.wordmark { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; line-height: .95; letter-spacing: var(--ls-display); }

/* calm "scores may be out of date" pill: grey, no alarm color (design-system TV/phone) */
.note { display: inline-flex; align-items: center; gap: var(--space-3); background: var(--c-surface-2); color: var(--c-ink);
  border: var(--panel-border); border-radius: var(--radius-sm); font-weight: 500; }   /* "square pill" (design-system TV note) */
.note svg { flex: none; fill: none; stroke: var(--c-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* skeleton block (no spinners) */
.skel { background: var(--c-skeleton); border-radius: var(--radius-sm); }

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