/* ==========================================================================
   base.css — Reset, element defaults and utility classes
   --------------------------------------------------------------------------
   Three cascade layers live in this file:
     @layer reset      — a small modern reset (box-sizing, margins, media)
     @layer base       — default styling for bare HTML elements
     @layer utilities  — single-purpose helpers prefixed with `u-`
   Nothing here uses a class except the utilities, so every page gets
   sensible typography even before component classes are applied.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Metric-matched fallback font
   While Libre Franklin downloads, text renders in local Arial resized to
   Libre Franklin's measurements, so the swap doesn't reflow the page
   (prevents Cumulative Layout Shift). Values were measured in Chrome:
   regular text is ~3.2% wider than Arial, bold weights are within 0.5%.
   ascent/descent overrides = Libre Franklin metrics ÷ size-adjust.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Libre Franklin Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  font-weight: 100 550;
  size-adjust: 103.2%;
  ascent-override: 94%;
  descent-override: 24.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Libre Franklin Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
  font-weight: 551 900;
  size-adjust: 99.6%;
  ascent-override: 97.4%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}

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

  * {
    margin: 0;
  }

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

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

  img {
    height: auto;
  }

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

  p,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
  }

  /* The `hidden` attribute must always win, even over component display rules
     (e.g. the theme toggle is display:inline-flex but starts hidden until JS runs). */
  [hidden] {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Base element styles
   -------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--space-s));
  }

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

    /* Belt-and-braces: stop any animation/transition not built on tokens */
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    font-weight: var(--weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* <main> grows so the footer sits at the bottom on short pages (404, thanks) */
  main {
    flex: 1 0 auto;
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--color-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--step-5);
    font-weight: var(--weight-black);
  }

  h2 {
    font-size: var(--step-4);
  }

  h3 {
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
  }

  h4 {
    font-size: var(--step-0);
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--dur-fast) ease;
  }

  a:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
  }

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

  ul,
  ol {
    padding-left: 1.25em;
  }

  /* One visible, high-contrast focus style for everything (WCAG 2.4.7 / 2.4.13).
     :focus-visible keeps it off for mouse clicks but on for keyboard users. */
  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection {
    background-color: var(--color-selection);
    color: inherit;
  }

  /* Headings targeted by in-page links clear the sticky header */
  [id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-s));
  }

  hr {
    border: 0;
    border-top: 1px solid var(--color-border);
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }
}

/* --------------------------------------------------------------------------
   Utilities (u-*) — single-purpose, highest-priority layer
   -------------------------------------------------------------------------- */
@layer utilities {
  /* Hide visually but keep available to screen readers */
  .u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .u-text-center {
    text-align: center;
  }

  .u-mt-l {
    margin-top: var(--space-l);
  }

  .u-mt-xl {
    margin-top: var(--space-xl);
  }
}