/* ============================================================
   Base — reset, document defaults, typography primitives
   Depends on tokens/tokens.css
   ============================================================ */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

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

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

ul,
ol {
  padding: 0;
  list-style: none;
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

/* ── Focus: one visible treatment everywhere ── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

::selection {
  background: var(--vermilion-100);
  color: var(--ci-ink);
}

/* ============================================================
   Type primitives
   ============================================================ */

.t-display,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-wrap: balance;
}

/* Japanese line breaking. Without this, browsers break between any two
   kana/kanji, so 「毎日」 can split across lines. auto-phrase breaks at
   phrase boundaries instead; older browsers simply ignore it. */
:where(.t-display, .t-h1, .t-h2, .t-h3, .hero__title, .card__title,
  .step__title, .footer-col__head, .t-lead) {
  word-break: auto-phrase;
  line-break: strict;
}

.t-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.t-h1 {
  font-size: var(--fs-h1);
  line-height: 1.18;
  letter-spacing: var(--ls-heading);
}

.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

.t-h3 {
  font-size: var(--fs-h3);
  line-height: 1.4;
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--ink-2);
  max-width: var(--measure);
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.t-sm {
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.t-muted {
  color: var(--fg-muted);
}

/* The mono utility layer: eyebrows, section indices, spec keys.
   Always uppercase, always tracked out, never longer than a few words. */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.t-label--accent {
  color: var(--ci-vermilion);
}

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

/* ============================================================
   Layout primitives
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--gutter);
}

.stack > * + * {
  margin-top: var(--flow, var(--s-4));
}

.hr {
  height: 1px;
  border: 0;
  background: var(--rule);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}