/*
 * Base layer: reset, typography defaults, theme background, and the
 * theme-change transition. Loaded after tokens.css and grid.css.
 */

/* ---------- Webfonts (self-hosted Questa kits in src/fonts/) ----------
 * Available cuts: Questa Sans Light/Regular/Medium/Bold/Black (+italics) and
 * Questa Grande Regular only. The type scale uses Grande Regular (H1/H2/H4),
 * Sans Regular (body/caption) and Sans Medium (H3/H5/H6); Bold + Italic are
 * declared for prose <strong>/<em>.
 *
 * The four above-the-fold faces use `font-display: optional` and are
 * <link rel=preload>ed in head_redesign.html: preload gets them into the
 * browser's ~100ms block window, so they paint immediately with no
 * fallback-to-webfont swap (no flash of unstyled text). On a slow first
 * (uncached) load the fallback shows with no later swap; the font is cached
 * for subsequent loads. Italic/Bold are rarer and below the fold, so they
 * keep `swap`. */
@font-face {
  font-family: "Questa Sans";
  src: url("/fonts/questasans_regular_macroman/2-Questa_Sans_Regular-webfont.woff2") format("woff2"),
       url("/fonts/questasans_regular_macroman/2-Questa_Sans_Regular-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Questa Sans";
  src: url("/fonts/questasans_italic_macroman/2-Questa_Sans_Regular_Italic-webfont.woff2") format("woff2"),
       url("/fonts/questasans_italic_macroman/2-Questa_Sans_Regular_Italic-webfont.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Questa Sans";
  src: url("/fonts/questasans_medium_macroman/3-Questa_Sans_Medium-webfont.woff2") format("woff2"),
       url("/fonts/questasans_medium_macroman/3-Questa_Sans_Medium-webfont.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Questa Sans";
  src: url("/fonts/questasans_bold_macroman/4-Questa_Sans_Bold-webfont.woff2") format("woff2"),
       url("/fonts/questasans_bold_macroman/4-Questa_Sans_Bold-webfont.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Questa Grande";
  src: url("/fonts/questagrande_regular_macroman/2-questa_grande_regular_31-webfont.woff2") format("woff2"),
       url("/fonts/questagrande_regular_macroman/2-questa_grande_regular_31-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Questa";
  src: url("/fonts/questa_regular_macroman/2-Questa_Regular-webfont.woff2") format("woff2"),
       url("/fonts/questa_regular_macroman/2-Questa_Regular-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: optional;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  font: var(--type-body);
  color: var(--color-text);

  /* Theme background. Painted immediately from the edge-injected data-theme,
   * so there is no flash. The sky gradient itself lives on the hero/header
   * bands (see components.css); the page body is the flat horizon colour. */
  background-color: var(--color-bg);

  /* Color tokens animate on theme change; the gradient itself is crossfaded
   * via the View Transitions API in theme.js (see below). */
  transition:
    color var(--theme-transition-duration) var(--theme-transition-ease);
}

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

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--theme-transition-duration) var(--theme-transition-ease);
}
a:hover { color: var(--color-link-hover); }

/* ---------- Typography (per-element specs from the Figma type scale) ---------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); }
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }
h5 { font: var(--type-h5); }
h6 { font: var(--type-h6); }

p { margin: 0 0 var(--space-3); }

small, .text-caption { font: var(--type-caption); }
.text-muted { color: var(--color-text-muted); }

/* ---------- Theme crossfade ----------
 * theme.js wraps the data-theme swap in document.startViewTransition() where
 * supported, producing a full-page crossfade. Tune its duration here. Where
 * unsupported, the swap applies instantly and the color transitions above
 * still ease the text/link colors. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--theme-transition-duration);
}

@media (prefers-reduced-motion: reduce) {
  body, a { transition: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}