/* =========================================================================
   Reset and base typography — Step 1.2
   -------------------------------------------------------------------------
   Fonts are self-hosted from Google Fonts (SIL OFL, licences in src/fonts/).
   Never pulled from Wix's CDN — see the clean-room rule in CLAUDE.md.
   ========================================================================= */

/* ---- fonts ------------------------------------------------------------- */
/* Inter ships as a variable font, so one file covers 400-700. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kalam-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kalam-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: var(--step-body-lh);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* Images always declare width/height so nothing shifts as they load. */
img { height: auto; }

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

/* ---- type scale --------------------------------------------------------
   Class-based, not tag-based: heading LEVEL is a document-structure decision
   and must stay free to follow the outline, while SIZE is a visual one. */
.t-hero {
  font-family: var(--font-hand);
  font-size: var(--step-hero);
  line-height: var(--step-hero-lh);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-none);
  color: var(--ink);
}
.t-title {
  font-size: var(--step-title);
  line-height: var(--step-title-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title);
}
.t-section {
  font-size: var(--step-section);
  line-height: var(--step-section-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-section);
}
.t-sub {
  font-size: var(--step-sub);
  line-height: var(--step-sub-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.t-body {
  font-size: var(--step-body);
  line-height: var(--step-body-lh);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
}
.t-body strong, .t-body b { font-weight: var(--weight-bold); }
.t-lead {
  font-size: var(--step-lead);
  line-height: var(--step-lead-lh);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}
.t-lead-strong {
  font-size: var(--step-lead);
  line-height: var(--step-lead-lh);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
}
.t-small {
  font-size: var(--step-small);
  line-height: var(--step-small-lh);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-none);
}
.t-muted { color: var(--text-muted); }

/* Default heading tags inherit sensible sizes so a page is never unstyled. */
h1 { font-size: var(--step-title);   line-height: var(--step-title-lh);   font-weight: var(--weight-bold); letter-spacing: var(--tracking-title); }
h2 { font-size: var(--step-section); line-height: var(--step-section-lh); font-weight: var(--weight-bold); letter-spacing: var(--tracking-section); }
h3 { font-size: var(--step-sub);     line-height: var(--step-sub-lh);     font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
h4, h5, h6 { font-size: var(--step-lead); line-height: var(--step-lead-lh); font-weight: var(--weight-semi); letter-spacing: var(--tracking-tight); }

/* ---- links and focus ---------------------------------------------------
   Focus is never removed, only replaced. The original relied on the browser
   default; we give it a real token-driven ring. */
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  /* No border-radius here. Setting one would OVERRIDE the element's own
     radius, squaring off the pill buttons while focused. Browsers already
     make the outline follow whatever radius the element has. */
}
:focus:not(:focus-visible) { outline: none; }

/* Visible only to screen readers, until focused. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  z-index: var(--z-overlay);
  background: var(--surface);
  color: var(--ink);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: top var(--duration) var(--easing);
}
.skip-link:focus { top: var(--space-sm); }