/* Base styles: reset, type roles, layout helpers, focus, motion. Load after tokens.css.
   Spec: docs/design/tokens.md (type, motion) and docs/design/layout.md (layout helpers). */

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font: var(--weight-regular) var(--text-body) / var(--leading-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Any element can switch theme; give it the theme's page colors. */
[data-theme] {
  background-color: var(--c-bg);
  color: var(--c-ink);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: var(--weight-bold);
}

ul[role="list"],
ol[role="list"],
ul.u-plain,
ol.u-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--focus-width) solid var(--c-focus);
  outline-offset: var(--focus-offset);
}

::selection {
  background: var(--c-mark-wash);
  color: var(--c-ink);
}

/* Type roles. docs/design/tokens.md has the table. */
.t-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.t-display,
.t-display-s {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.t-display-s {
  font-size: var(--text-display-s);
  letter-spacing: -0.01em;
}

.t-caps {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-caps);
  font-size: var(--text-caps);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.t-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-heading);
  font-size: var(--text-heading);
  line-height: 1.2;
}

.t-title {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-title);
  line-height: var(--leading-snug);
}

.t-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.t-body-s {
  font-size: var(--text-s);
  line-height: 1.45;
}

.t-caption {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--c-ink-3);
  max-width: 72ch;
}

.t-label {
  font: var(--weight-medium) var(--text-label) / 1.35 var(--font-mono);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.t-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.t-num-tight {
  font-family: var(--font-mono);
  font-stretch: var(--stretch-mono-tight);
  font-variant-numeric: tabular-nums;
}

.t-num-l {
  font: var(--weight-heavy) var(--text-num-l) / 1 var(--font-mono);
  font-stretch: 90%;
  font-variant-numeric: tabular-nums;
}

.t-num-xl {
  font: var(--weight-heavy) var(--text-num-xl) / 1 var(--font-mono);
  font-stretch: 90%;
  font-variant-numeric: tabular-nums;
}

.t-lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--c-ink-2);
  max-width: 56ch;
}

.t-secondary { color: var(--c-ink-2); }
.t-muted { color: var(--c-ink-3); }
.t-up { color: var(--c-up-text); }
.t-down { color: var(--c-down-text); }
.t-mark { color: var(--c-mark-text); }

/* Layout helpers. docs/design/layout.md. */
.l-wrap {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.l-read {
  max-width: var(--layout-read);
}

.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-12));
  min-width: 0;
}

.l-stack--s { --stack-gap: var(--space-6); }
.l-stack--l { --stack-gap: var(--space-24); }

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-8));
  min-width: 0;
}

.l-cluster--end { justify-content: flex-end; }
.l-cluster--between { justify-content: space-between; }

.l-grid {
  display: grid;
  gap: var(--grid-gap, var(--space-16));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

.l-section {
  padding-block: var(--space-32);
  border-top: var(--border-hairline) solid var(--c-line);
}

@media (min-width: 720px) {
  .l-wrap {
    padding-inline: var(--layout-gutter-wide);
  }
}

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

.u-nowrap { white-space: nowrap; }

.u-skip-link {
  position: absolute;
  left: var(--space-8);
  top: var(--space-8);
  z-index: var(--z-toast);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-m);
  background: var(--c-action);
  color: var(--c-on-action);
  transform: translateY(-200%);
}

.u-skip-link:focus {
  transform: none;
}

/* Shared animations. Each one is decorative: content is complete without it. */
@keyframes ui-arrive {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}

@keyframes ui-fade {
  from { opacity: 0; }
}

@keyframes ui-stamp {
  0% { transform: scale(2.2); box-shadow: 0 0 0 6px var(--c-mark-wash); }
}

@keyframes ui-sheet-up {
  from { transform: translateY(40%); opacity: 0.4; }
}

@keyframes ui-sheet-in {
  from { transform: translateX(30%); opacity: 0.4; }
}

@keyframes ui-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes ui-pulse {
  0% { opacity: 0.7; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.6); }
}

@keyframes ui-blink {
  0%, to { opacity: 0.25; }
  50% { opacity: 1; }
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

@keyframes ui-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* Reduced motion: no movement, no loops. State changes are instant. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}