/* ============================================================
   Kuribo landing site: the site's own tokens
   (openspec/changes/archive/2026-09-22-landing-site/design.md Decisions 5, 6, 18)

   Loaded after /assets/tokens.css, the global design-tokens.css copied
   byte for byte, which this file never re-types. It holds only what the
   site adds: the self-hosted font, the --site-* values the phone-shaped
   tokens don't carry, and the two palettes, which re-point the role
   tokens here and nowhere else. This is the one site stylesheet where a
   literal value may live; site.css takes everything through var().

   Breakpoints. Custom properties can't be read inside @media or
   @container, so site.css writes these two literally, as container
   queries on .site:
     720px   tablet: wider gutters, the audience lines side by side
     1024px  12-column grid, side heads, the figure column
   ============================================================ */

/* Hanken Grotesk, variable 100-900, Latin, from fontsource 5.3.0
   (src/fonts/SOURCE.md). The family is named exactly as the tokens'
   --font-sans names it, and the range is the package's own Latin one. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-wght-normal.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;
}

:root {
  /* ---- display sizes above --fs-display (34px) ----
     Fluid against a container (cqi is 1% of its width): .site for the
     section and page headings, and .hero-head for the hero headline, so
     it breaks the same way at every width. Sized for both headlines,
     "Home practice, built on ABA." and the fallback "Home practice for
     your child with autism.". */
  --site-fs-hero: clamp(var(--fs-h1), 14.5cqi, 56px); /* under 720: 51px at 393 */
  --site-fs-hero-wide: clamp(var(--fs-h1), 8.4cqi, 96px); /* from 720: two lines for both */
  --site-fs-section: clamp(36px, 26px + 2.4cqi, 56px); /* section headings, 36 to 56 */
  --site-fs-page: clamp(40px, 28px + 3.2cqi, 72px); /* the /delete-account heading */

  /* ---- layout ---- */
  --site-max: 1200px; /* max content width */
  --site-measure: 36rem; /* text column, about 65 characters at body-lg */
  --site-measure-page: 44rem; /* the /delete-account column */

  /* ---- section rhythm beyond --sp-11 (64px) ---- */
  --site-sec-y: clamp(72px, 44px + 7cqi, 144px);

  /* ---- the focus ring: every link, button and summary ---- */
  --site-focus-width: 3px;
  --site-focus-offset: 3px;
  --site-focus-inset: calc(-1 * var(--site-focus-width) - 2px); /* drawn inside a card's row */
  --site-focus-color: var(--ink);

  /* ---- links and the rose pill (rose-500 at rest, rose-600 on hover and press) ---- */
  --site-link: var(--rose-600);
  --site-link-hover: var(--rose-700);
  --site-btn-h: 56px;
  --site-btn-press: 0.98;

  /* ---- the wordmark, the question rows and their chevron ---- */
  --site-mark-h: 30px;
  --site-mark-h-wide: 36px;
  --site-mark-h-footer: 28px;
  --site-summary-h: 64px;
  --site-icon: 24px;

  /* ---- the one device frame ---- */
  --site-frame-w: 300px;
  --site-frame-w-hero: 340px;
  --site-frame-bezel: 10px;
  --site-frame-radius: 48px;
  --site-frame-screen-radius: 38px;
  --site-frame-color: var(--ink);

  /* ---- warm paper, the default palette (Decision 18) ----
     A shade warmer than the tokens' canvas and body text, which Kevin
     chose over them (docs/decisions.md, 2026-09-25). Ink, rose and the
     semantic colors still come from the tokens. */
  --bg-canvas: #f7f2ef;
  --bg-sunken: #eee6e2;
  --bg-subtle: #faf6f4;
  --border-subtle: #e8deda;
  --border-strong: #d7cbc6;
  --text-body: #554d4a;
  color-scheme: light;
}

/* ---- Night, when the visitor's system prefers a dark scheme ----
   No toggle and no script: the page follows the system. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas: #141412;
    --bg-surface: #1f1f1c;
    --bg-sunken: #2a2a26;
    --bg-subtle: #24241f;
    --border-subtle: #30302c;
    --border-strong: #474742;
    --text-strong: #f4f4f1;
    --text-body: #c9c9c1;
    --text-muted: #a8a8a0;
    --site-link: var(--rose-300);
    --site-link-hover: var(--rose-200);
    --site-focus-color: #f4f4f1;
    --site-frame-color: #3a3a35;
    color-scheme: dark;
  }
}