/*
 * base.css
 * ----------------------------------------------------------------------------
 * Foundation styles shared by every site: fonts, spacing scale, page
 * defaults and typography. Component styles (header, cards, buttons) live in
 * components.css.
 *
 * Reads tokens from tokens.css (generated from brands/tokens.json):
 *   --color-paper, --color-stone-200/400/700, --color-ink
 *   --color-accent, --color-accent-light   (set by <html data-brand="...">)
 *   --font-heading, --font-body
 *
 * Load order in the page head: tokens.css, base.css, components.css.
 * ----------------------------------------------------------------------------
 */

/* ===== Fonts ===============================================================
 * Self-hosted WOFF2 files in /fonts (copied from shared/fonts). They are the
 * brand system's own web fonts (Brand/00_shared/fonts/*/woff2), subset to
 * Latin and Latin-1 with all OpenType features kept. No calls to Google
 * Fonts or any other third party. Both families are SIL OFL 1.1; license
 * files sit next to the font files.
 * font-display: swap shows fallback text immediately, then swaps in the
 * brand font once it loads, so text is never invisible.
 */
@font-face {
  font-family: "Zilla Slab";
  src: url("/fonts/ZillaSlab-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/fonts/ZillaSlab-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/fonts/ZillaSlab-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Source Sans 3 is a variable font: one file covers weights 200 to 900. */
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ===== Layout scale ========================================================
 * Spacing and sizing values used everywhere. Change a value here to adjust
 * rhythm across all three sites. (These move into tokens.json once the
 * brand system defines spacing.)
 */
:root {
  --space-1: 0.25rem;  /*  4 px */
  --space-2: 0.5rem;   /*  8 px */
  --space-3: 0.75rem;  /* 12 px */
  --space-4: 1rem;     /* 16 px */
  --space-5: 1.5rem;   /* 24 px */
  --space-6: 2rem;     /* 32 px */
  --space-7: 3rem;     /* 48 px */
  --space-8: 4.5rem;   /* 72 px */
  --space-9: 6rem;     /* 96 px */

  --page-max: 72rem;   /* widest the content gets (1152 px) */
  --measure: 66ch;     /* comfortable line length for paragraphs */
  --radius: 2px;       /* corner rounding on buttons and cards */
  --rule: 1px solid var(--color-stone-200); /* standard divider line */

  /* Card surface: Paper lifted slightly toward white. Derived here, in one
   * place, until tokens.json defines surface colors. */
  --color-surface: color-mix(in srgb, var(--color-paper) 60%, white);
}

/* ===== Reset ===============================================================
 * Removes browser default margins and makes sizing predictable.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
h1, h2, h3, h4,
p, figure, blockquote,
ul, ol, dl, dd {
  margin: 0;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ===== Page defaults ======================================================= */
html {
  /* Body text size scales gently from 17 px on phones to 18 px on desktop. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
main {
  flex: 1; /* pushes the footer to the bottom on short pages */
}

/* ===== Typography ==========================================================
 * Headings: Zilla Slab, 500 to 700, only at about 20 px and larger.
 * Everything else, including all numbers: Source Sans 3.
 * Rule from the brand system: never mix the two in one line.
 */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); }

/* h4 and below are too small for the slab face, so they use the body font. */
h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

p,
li {
  max-width: var(--measure);
}
p + p {
  margin-top: var(--space-4);
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 2px;
}

/* Visible keyboard focus everywhere. Never remove this: keyboard users
 * depend on it to see where they are. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Text for screen readers only (for example a "skip to content" link that
 * appears when focused). */
.visually-hidden:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Respect the visitor's "reduce motion" system setting. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}