/* Quoda base styles. Token-only — zero raw hex.
   Motion is opt-in at the OS level: wrap every transition in
   @media (prefers-reduced-motion: no-preference). */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  background: var(--color-surface-0);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Universal focus ring — the one accent rule, never overridden aesthetically. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Type scale utilities (values from the design guideline tokens) */
.t-display-hero { font-size: var(--fs-display-hero); font-weight: var(--fw-display-hero); line-height: var(--lh-display-hero); letter-spacing: var(--ls-display-hero); }
.t-display-lg   { font-size: var(--fs-display-lg);   font-weight: var(--fw-display-lg);   line-height: var(--lh-display-lg);   letter-spacing: var(--ls-display-lg); }
.t-display-md   { font-size: var(--fs-display-md);   font-weight: var(--fw-display-md);   line-height: var(--lh-display-md);   letter-spacing: var(--ls-display-md); }
.t-heading-sm   { font-size: var(--fs-heading-sm);   font-weight: var(--fw-heading-sm);   line-height: var(--lh-heading-sm);   letter-spacing: var(--ls-heading-sm); }
.t-body-lg      { font-size: var(--fs-body-lg);      font-weight: var(--fw-body-lg);      line-height: var(--lh-body-lg); }
.t-body         { font-size: var(--fs-body);         font-weight: var(--fw-body);         line-height: var(--lh-body);         letter-spacing: var(--ls-body); }
.t-body-sm      { font-size: var(--fs-body-sm);      font-weight: var(--fw-body-sm);      line-height: var(--lh-body-sm); }
.t-ui-label     { font-size: var(--fs-ui-label);     font-weight: var(--fw-ui-label);     line-height: var(--lh-ui-label);     letter-spacing: var(--ls-ui-label); }
.t-caption      { font-size: var(--fs-caption);      font-weight: var(--fw-caption);      line-height: var(--lh-caption);      letter-spacing: var(--ls-caption); }

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.tnum { font-feature-settings: "tnum" 1, "kern" 1; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}