/* ==========================================================================
   Yiertek v5 · tokens
   ==========================================================================
   The only file that holds a literal colour, size or duration; site.css reads
   everything from here. Values are fixed by docs/v5-contract.md §2: a light
   canvas, cards, one accent (the catalogue's copper), two families used the
   america.gov way — a serif for the few emotional lines, Inter for the rest.
   ========================================================================== */

:root {
  /* -- colour ---------------------------------------------------------------
     APCA Lc on canvas / card / card-2 (scripts/lib/color.mjs):
       ink 101.5/94.1/87.8 · ink-2 94.3/86.8/80.5 · ink-3 80.8/73.4/67.1
       copper 82.7/75.2/69.0 · copper-line 61.7/54.2/47.9 (non-text only)
       white on copper 91.0 · field-line 4.5:1 / 4.0:1 / 3.7:1 (WCAG, borders) */
  --canvas: #FBF9F5;
  --card: #F1ECE4;
  --card-2: #E8E1D5;
  --ink: #151412;
  --ink-2: #393532;
  --ink-3: #5E5852;
  --rule: #DDD5C8;
  --copper: #7E4508;
  --copper-deep: #5E3306;
  --copper-line: #B87333;
  --on-copper: #FFFFFF;
  --ok: #2F6B4F;
  --danger: #9A3B2E;
  --field-line: #7A7267;

  --canvas-rgb: 251 249 245;
  --ink-rgb: 21 20 18;
  --glass: rgb(var(--canvas-rgb) / 0.82);          /* scrolled header, blurred */
  --scrim: rgb(var(--ink-rgb) / 0.32);             /* behind drawer and palette */
  --veil: rgb(var(--ink-rgb) / 0.05);              /* hover wash */
  --wash-on-ink: rgb(var(--canvas-rgb) / 0.14);    /* buttons on the ink toast / viewer */
  --swatch-ring: rgb(var(--ink-rgb) / 0.16);
  --shadow-float:
    0 1px 2px rgb(var(--ink-rgb) / 0.06),
    0 24px 60px -18px rgb(var(--ink-rgb) / 0.22);  /* floating UI only */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E5852' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --print-paper: #FFFFFF;
  --print-ink: #000000;

  /* -- type -----------------------------------------------------------------
     Newsreader only for emotional lines; Inter 4 (variable opsz 14–32) for
     everything else — font-optical-sizing:auto gives its display cut from
     28 px up. Every clamp runs from 390 px (phone value) to 1200 px (desktop). */
  --f-serif: 'Newsreader', 'Noto Serif SC', Georgia, serif;
  --f-sans: 'Inter', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-hero: clamp(2.9375rem, 1.463rem + 6.05vw, 6rem);
  --t-hero-lh: clamp(56px, 36.74px + 4.938vw, 96px);
  --t-hero-tr: -0.054em;
  --t-serif: clamp(2.5rem, 1.778rem + 2.963vw, 4rem);
  --t-serif-lh: clamp(46px, 35.41px + 2.716vw, 68px);
  --t-serif-tr: -0.049em;
  --t-h2: clamp(1.75rem, 1.389rem + 1.481vw, 2.5rem);
  --t-h2-lh: clamp(32px, 27.19px + 1.235vw, 42px);
  --t-h2-tr: -0.03em;
  --t-intro: clamp(1.3125rem, 1.102rem + 0.864vw, 1.75rem);
  --t-intro-lh: clamp(28px, 24.15px + 0.988vw, 36px);
  --t-sub: 1.5rem;
  --t-sub-lh: 2rem;
  --t-input: clamp(1rem, 0.849rem + 0.617vw, 1.3125rem);
  --t-input-lh: clamp(24px, 20.39px + 0.926vw, 31.5px);
  --t-body-lg: clamp(1.0625rem, 1.0325rem + 0.123vw, 1.125rem);
  --t-body-lg-lh: clamp(25px, 24.52px + 0.123vw, 26px);
  --t-body: 1rem;
  --t-body-lh: 1.5rem;
  --t-label: 0.875rem;
  --t-label-lh: 1.3125rem;
  --t-micro: 0.75rem;
  --t-micro-lh: 1.125rem;
  --t-code: 0.875rem;
  --t-code-lh: 1.25rem;

  /* -- space · shape · layout ---------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;   --s-5: 1.5rem;  --s-6: 2rem;
  --s-7: 3rem;     --s-8: 4rem;    --s-9: 6rem;     --s-10: 8rem;  --s-11: 10rem;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --measure: 62ch;
  --section-y: clamp(var(--s-7), 4.5vw, var(--s-8));  /* 48 → 64 between sections */
  --r-card: clamp(28px, 1.5vw + 22px, 40px);
  --r-tile: clamp(24px, 1vw + 20px, 32px);
  --r-pill: 999px;
  --r-sm: 12px;
  --hdr-h: 72px;
  --strip-h: 36px;
  --bbar-h: 64px;
  --swatch: var(--rule);
  --mark-h: 20px;

  /* -- motion (america.gov recipe) ----------------------------------------------
     Entrance "focus", spring pill, UI 150–300 ms. Only transform, opacity, filter. */
  --d-ui: 200ms;
  --d-ui-slow: 300ms;
  --d-press: 150ms;
  --d-enter: 900ms;
  --d-spring: 450ms;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --stagger: 70ms;

  --z-hdr: 50;
  --z-bbar: 55;
  --z-scrim: 60;
  --z-drawer: 70;
  --z-toast: 80;
}

@media (max-width: 599.98px) {
  :root { --hdr-h: 60px; --strip-h: 32px; }
}

/* Chinese: Noto Sans SC for Han (both stacks fall back to it). The serif lines
   keep Newsreader for Latin and take Noto for Han at 400; tracking opens
   because Han glyphs fill the em box. */
:root:lang(zh) {
  --f-serif: 'Noto Sans SC', 'Newsreader', system-ui, sans-serif;
  --t-hero: clamp(2.25rem, 1.167rem + 4.444vw, 4.5rem);
  --t-hero-lh: clamp(46px, 26.74px + 4.938vw, 86px);
  --t-hero-tr: 0.01em;
  --t-serif-tr: 0.01em;
  --t-h2-tr: 0.01em;
  --t-input-tr: 0;
  --measure: 36em;
}