/* Token bridge: the prototype's names (public/assets/tokens.css, 01 — Digital Design System TK-02)
   mapped onto the WordPress presets from theme.json, so prototype CSS and motion scripts can be
   ported unchanged. Values live in theme.json only; this file adds no new value except the
   prototype's own responsive steps below. */
:root {
  /* Layer 1 — approved palette, plus white for text on Bronze (CL-05). */
  --lea-black: var(--wp--preset--color--noir);
  --lea-bronze: var(--wp--preset--color--bronze);
  --lea-sand: var(--wp--preset--color--sable);
  --lea-white: var(--wp--preset--color--white);

  /* Layer 2 — semantic. */
  --color-surface: var(--lea-white);
  --color-surface-alt: var(--lea-sand);
  --color-surface-inverse: var(--lea-black);
  --color-text: var(--lea-black);
  --color-text-muted: var(--wp--custom--color--text-muted);
  --color-text-inverse: var(--lea-white);
  --color-accent: var(--lea-bronze);
  --color-accent-text: var(--lea-white);
  --color-border: var(--wp--custom--color--border);
  --color-faint: var(--wp--custom--color--faint);
  --color-focus: var(--lea-black);
  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);
  --container-max: var(--wp--style--global--wide-size);
  --reading-width: var(--wp--style--global--content-size);
  --radius-pill: var(--wp--custom--radius--pill);
  --duration-fast: var(--wp--custom--duration--fast);
  --duration-base: var(--wp--custom--duration--base);
  --ease-standard: var(--wp--custom--ease--standard);

  /* Vertical rhythm. */
  --chapter-gap: var(--wp--preset--spacing--chapter-gap);
  --within-gap: var(--wp--preset--spacing--within-gap);
  --heading-gap: var(--wp--preset--spacing--heading-gap);
  --page-top: var(--wp--preset--spacing--page-top);
}

/* The prototype's responsive steps (tokens.css and site.css), applied to the presets themselves so
   blocks using them follow too. `html:root` outranks the `:root` rule in the global styles. */
@media (max-width: 900px) {
  html:root {
    --wp--preset--spacing--chapter-gap: 120px;
    --wp--preset--spacing--within-gap: 64px;
    --wp--preset--spacing--gutter: 20px;
  }
}
@media (max-width: 700px) {
  html:root {
    --wp--preset--spacing--chapter-gap: 96px;
    --wp--preset--spacing--within-gap: 56px;
    --wp--preset--spacing--page-top: 34px;
    --wp--preset--spacing--gutter: 16px;
    --wp--preset--font-size--heading-2: clamp(2.65rem, 10vw, 3.5rem);
    --wp--preset--font-size--large: 1.2rem;
  }
}
@media (max-width: 600px) {
  html:root { --wp--preset--font-size--medium: 16px; }
}