/*
 * Base — reset + typography + document defaults.
 *
 * Depends on tokens.css. Every value in here references a semantic token
 * from Layer 2. No primitives, no hardcoded hex, no hardcoded pixel sizes.
 */

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

  * { margin: 0; }

  html {
    font-size: 17px;              /* Apple HIG base */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

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

  body {
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img, picture, video, canvas, svg { display: block; max-width: 100%; }

  video { height: auto; }

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

  button { background: none; border: 0; cursor: pointer; }

  button:disabled { cursor: not-allowed; }

  a {
    color: var(--link-default);
    text-decoration-skip-ink: auto;
  }

  a:hover { color: var(--link-hover); }
  a:visited { color: var(--link-default); }

  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

  p { text-wrap: pretty; }

  :where(ul, ol) { padding-inline-start: 1.25em; }

  strong, b { font-weight: var(--fw-semibold); }

  small { font-size: var(--fs-caption); }

  hr {
    border: 0;
    border-top: 1px solid var(--border-default);
    margin-block: var(--sp-lg);
  }

  ::selection {
    background: var(--terracotta-light);
    color: var(--bark);
  }
}


@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--text-primary);
    background: var(--bg-canvas);
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Chinese-language descendants switch to Noto for both display and body */
  [lang="zh-Hant"],
  [lang="zh"] {
    font-family: var(--font-body-zh);
    line-height: var(--lh-zh-body);
  }

  [lang="zh-Hant"] h1,
  [lang="zh-Hant"] h2,
  [lang="zh-Hant"] h3,
  [lang="zh-Hant"] h4,
  [lang="zh-Hant"] .display,
  [lang="zh"] h1,
  [lang="zh"] h2,
  [lang="zh"] h3,
  [lang="zh"] h4,
  [lang="zh"] .display {
    font-family: var(--font-display-zh);
  }

  /* Display + headings */
  .display {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: var(--fw-medium);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
  }

  h1, .h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
  }

  h2, .h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  h3, .h3 {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
  }

  h4, .h4 {
    font-family: var(--font-body);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-h4);
  }

  /* Body variants */
  .body-lg {
    font-size: var(--fs-body-lg);
    line-height: 1.45;
  }

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

  .caption {
    font-size: var(--fs-caption);
    line-height: 1.4;
    color: var(--text-secondary);
  }

  .label,
  .eyebrow {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    line-height: 1.38;
    color: var(--text-secondary);
    font-family: var(--font-body);
  }

  .eyebrow {
    display: inline-block;
  }

  /* Prose: natural paragraph reading width */
  .prose {
    max-width: var(--content-width);
  }

  .prose p + p { margin-top: 1em; }

  .prose h2 { margin-block: 2em 0.5em; }

  .prose h3 { margin-block: 1.6em 0.4em; }

  .prose a { text-decoration: underline; }

  /* Focus ring — Slate blue. Keeps it distinct from the rose error state. */
  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Skip to content link */
  .skip-link {
    position: absolute;
    left: var(--sp-md);
    top: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md);
    background: var(--bark);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
    z-index: 100;
  }

  .skip-link:focus {
    transform: translateY(0);
    color: var(--text-inverse);
  }

  /* Screen-reader only utility */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}