/* tokens.css — binding values. See DESIGN.md.
   v2: grey ground, signal palette (small marks only), night tokens, type roles:
   sans display (Lausanne) → serif ~18px (Recife) → small sans caps (Lausanne). Mono (Lettera) only in UPPERCASE. */

@font-face { font-family: 'Lausanne'; src: url('../assets/fonts/lausanne-200.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: block; }
@font-face { font-family: 'Lausanne'; src: url('../assets/fonts/lausanne-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lausanne'; src: url('../assets/fonts/lausanne-300i.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lausanne'; src: url('../assets/fonts/lausanne-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lausanne'; src: url('../assets/fonts/lausanne-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lausanne'; src: url('../assets/fonts/lausanne-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lausanne'; src: url('../assets/fonts/lausanne-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lettera'; src: url('../assets/fonts/lettera-mono-light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Lettera'; src: url('../assets/fonts/lettera-mono-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lettera'; src: url('../assets/fonts/lettera-mono-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Azeret'; src: url('../assets/fonts/alt/azeret-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Azeret'; src: url('../assets/fonts/alt/azeret-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Recife'; src: url('../assets/fonts/recife-text-book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Recife'; src: url('../assets/fonts/recife-text-book-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;

  /* ground + ink (light) */
  --ground: #e4e4e1;
  --ground-2: #d8d8d4;
  --ground-3: #cfcfca;
  --ink: #111111;
  --ink-2: #4b4b48;
  --ink-3: #85857f;
  --rule: rgba(17,17,17,.18);
  --rule-2: rgba(17,17,17,.09);
  --scrim: rgba(17,17,17,.46);

  /* the drawing accent (redlines, live/selected) */
  --red: #f5320b;
  --red-soft: rgba(245,50,11,.12);

  /* signal palette: tiny marks only (dots, pixels, chips). never fields of colour */
  --sig-yellow: #dbff00;
  --sig-purple: #948eff;
  --sig-pink: #fdceeb;
  --sig-green: #c7f3c6;
  --sig-blue: #cde0f5;
  --sig-azure: #0095ff;
  --sig-orchid: #e362d3;
  --sig-orange: #f5320b;

  /* type */
  --font-sans: 'Lausanne', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Recife', Georgia, 'Times New Roman', serif;
  --font-mono: 'Azeret', 'Lettera', ui-monospace, 'SF Mono', Menlo, monospace;
  --scale: 1;            /* reading + small type multiplier (config panel) */
  --dscale: 1;           /* display multiplier (config panel) */
  --fs-micro: calc(10px * var(--scale));      /* sans caps */
  --fs-cap: calc(11px * var(--scale));        /* sans caps / small labels */
  --fs-small: calc(12px * var(--scale));      /* small sans */
  --fs-ui: calc(13px * var(--scale));         /* nav, chips */
  --fs-serif: calc(18px * var(--scale));      /* the reading size */
  --fs-serif-l: calc(clamp(19px, 1.5vw, 24px) * var(--scale));
  --fs-title: calc(clamp(40px, 6vw, 112px) * var(--dscale));
  --fs-wordmark: clamp(72px, 15.2vw, 260px);
  --lh-serif: 1.4;
  --track-display: -0.035em;
  --track-caps: .08em;
  /* legacy aliases used by module CSS */
  --fs-meta: var(--fs-cap); --fs-mono: var(--fs-small); --fs-body: var(--fs-ui); --fs-lede: var(--fs-serif); --fs-prose-xl: var(--fs-serif-l); --track-label: .08em; --track-mono: .06em; --lh-body: 1.5;

  /* layout */
  --gutter: clamp(16px, 2.2vw, 32px);
  --margin: clamp(16px, 3.4vw, 56px);
  --header-h: 52px;
  --section-gap: clamp(64px, 10vh, 140px);
  --cols: 4;

  /* motion */
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-out-soft: cubic-bezier(.33,1,.68,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --dur-tap: 140ms; --dur-base: 200ms; --dur-enter: 260ms; --dur-morph: 300ms; --dur-slow: 440ms; --dur-hero: 900ms;
  --stagger: 40ms;

  /* z */
  --z-header: 50; --z-drawer: 80; --z-modal: 90; --z-night: 95; --z-cursor: 120;
}

/* palettes (config panel sets html[data-palette]); 'grey' is the default above */
html[data-palette="paper"] { --ground: #f3f1eb; --ground-2: #e9e6de; --ground-3: #dfdbd0; --ink: #171614; --ink-2: #57544d; --ink-3: #8f8b81; --rule: rgba(23,22,20,.16); --rule-2: rgba(23,22,20,.08); --red: #e0492f; --red-soft: rgba(224,73,47,.12); }
html[data-palette="bone"]  { --ground: #ebe9df; --ground-2: #e0ddd0; --ground-3: #d4d0c1; --ink: #14140f; --ink-2: #4e4d43; --ink-3: #8b8978; --rule: rgba(20,20,15,.18); --rule-2: rgba(20,20,15,.09); --red: #d8401f; --red-soft: rgba(216,64,31,.12); }
html[data-palette="blueprint"] { --ground: #dfe4ea; --ground-2: #d2d9e1; --ground-3: #c4ccd6; --ink: #0f1a2b; --ink-2: #44506a; --ink-3: #7c879a; --rule: rgba(15,26,43,.2); --rule-2: rgba(15,26,43,.1); --red: #1e57ff; --red-soft: rgba(30,87,255,.12); }
html[data-palette="mint"]  { --ground: #e6ebe4; --ground-2: #d9e1d6; --ground-3: #cad4c6; --ink: #101511; --ink-2: #47524a; --ink-3: #7f8b82; --rule: rgba(16,21,17,.18); --rule-2: rgba(16,21,17,.09); --red: #ff3b1f; --red-soft: rgba(255,59,31,.12); }
html[data-palette="grey40"] { --ground: #8f8f8b; --ground-2: #86867f; --ground-3: #7b7b75; --ink: #101010; --ink-2: #2b2b28; --ink-3: #4a4a45; --rule: rgba(16,16,16,.3); --rule-2: rgba(16,16,16,.14); --scrim: rgba(0,0,0,.5); --red: #ff2f0d; --red-soft: rgba(255,47,13,.16); }
html[data-palette="kelvin"] { color-scheme: dark; --ground: #c9461f; --ground-2: #b93f1b; --ground-3: #a93817; --ink: #f7dfc9; --ink-2: #f0c6a6; --ink-3: #dca385; --rule: rgba(247,223,201,.35); --rule-2: rgba(247,223,201,.16); --scrim: rgba(60,18,6,.6); --red: #fff1e4; --red-soft: rgba(255,241,228,.18); }
html[data-palette="cobalt"] { color-scheme: dark; --ground: #1f3fc4; --ground-2: #1b38b0; --ground-3: #18319c; --ink: #eef2ff; --ink-2: #c9d3ff; --ink-3: #9fb0f0; --rule: rgba(238,242,255,.3); --rule-2: rgba(238,242,255,.14); --scrim: rgba(6,12,50,.6); --red: #ffd23f; --red-soft: rgba(255,210,63,.18); }
html[data-palette="moss"] { color-scheme: dark; --ground: #3d5a3a; --ground-2: #365233; --ground-3: #2f482c; --ink: #eef2e6; --ink-2: #cdd7c2; --ink-3: #a3b399; --rule: rgba(238,242,230,.3); --rule-2: rgba(238,242,230,.14); --scrim: rgba(10,20,8,.6); --red: #ffb347; --red-soft: rgba(255,179,71,.18); }
html[data-palette="plum"] { color-scheme: dark; --ground: #4a2a4f; --ground-2: #432546; --ground-3: #3b203e; --ink: #f4e9f5; --ink-2: #dcc9de; --ink-3: #b69cb9; --rule: rgba(244,233,245,.3); --rule-2: rgba(244,233,245,.14); --scrim: rgba(20,6,22,.6); --red: #ff7a59; --red-soft: rgba(255,122,89,.18); }
html[data-palette="black"] { color-scheme: dark; --ground: #050505; --ground-2: #111111; --ground-3: #1c1c1c; --ink: #f0f0ec; --ink-2: #b7b7b1; --ink-3: #77776f; --rule: rgba(240,240,236,.22); --rule-2: rgba(240,240,236,.1); --scrim: rgba(0,0,0,.7); --red: #ff2d10; --red-soft: rgba(255,45,16,.16); }
html[data-palette="ink"]   { color-scheme: dark; --ground: #141414; --ground-2: #1e1e1e; --ground-3: #2a2a2a; --ink: #ecece7; --ink-2: #b4b4ae; --ink-3: #78786f; --rule: rgba(236,236,231,.2); --rule-2: rgba(236,236,231,.09); --scrim: rgba(0,0,0,.6); --red: #ff3a1a; --red-soft: rgba(255,58,26,.16); }

/* night: the flash state (js/night.js sets html[data-mode="dark"]) — an authored dark scheme, not an inversion */
html[data-mode="dark"] {
  color-scheme: dark;
  --ground: #0b0b0b;
  --ground-2: #161616;
  --ground-3: #222222;
  --ink: #f1f1ed;
  --ink-2: #b9b9b2;
  --ink-3: #7c7c76;
  --rule: rgba(241,241,237,.22);
  --rule-2: rgba(241,241,237,.10);
  --scrim: rgba(0,0,0,.6);
  --red: #ff2d10;
  --red-soft: rgba(255,45,16,.16);
}
html.is-switching, html.is-switching * { transition-property: background-color, color, border-color, fill, stroke, opacity !important; transition-duration: 220ms !important; transition-timing-function: var(--ease-out-soft) !important; }

@media (max-width: 720px) { :root { --cols: 2; --header-h: 48px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-tap: 0ms; --dur-base: 0ms; --dur-enter: 0ms; --dur-morph: 0ms; --dur-slow: 0ms; --dur-hero: 0ms; --stagger: 0ms; }
}