/* ========================================================================== Yiertek v4 · tokens ========================================================================== The only file on the site that holds a literal colour, size or duration. site.css reads everything from here (the tokenDiscipline probe fails on a literal colour anywhere else). Names and values are fixed by docs/v4-contract.md §2; the reasoning is in docs/design-foundations.md, "v4". Source of every value: the 2026 printed catalogue (v3). Cream pages, copper codes and eyebrows, Newsreader titles, Archivo labels, Inter text. ========================================================================== */ :root { /* -- colour · the book's palette ------------------------------------------ APCA Lc on --paper / --paper-2, measured with scripts/lib/color.mjs: ink 94.1 / 85.9 · ink-2 86.8 / 78.7 (body >= 75) · ink-3 75.9 / 67.7 copper 75.2 / 67.1 · copper-line 54.2 / 46.1 (non-text >= 45 only) on-copper on copper 91.0 · danger 72.2 / 64.1 */ --paper: #F1ECE4; --paper-2: #E4DED2; --rule: #CFC7B8; --ink: #151412; --ink-2: #393532; --ink-3: #57524D; --copper: #7E4508; --copper-deep: #5E3306; --copper-line: #B87333; --on-copper: #FFFFFF; --night: #262522; --night-ink: #EDE7DD; /* Contract value #BDB5A9 measures Lc 59.94 on --night, under the meta floor of 60. One step lighter on the same hue (ΔL +0.006) gives 61.1. Recorded in docs/v4-requests.md. */ --night-ink-2: #BFB7AB; --night-copper: #E59B5B; /* Lc 54.2 on night: accents, not text */ --danger: #9A3B2E; --field-line: #7A7267; /* field borders: 4.0:1 on paper, 3.5:1 on panel */ /* Channel triplets, so a colour used at an alpha is written once. */ --paper-rgb: 241 236 228; --ink-rgb: 21 20 18; --night-rgb: 38 37 34; --night-ink-rgb: 237 231 221; /* Derived surfaces. Every alpha on the site is one of these. */ --glass: rgb(var(--paper-rgb) / 0.8); /* scrolled header, blurred */ --scrim: rgb(var(--night-rgb) / 0.36); /* behind tray and palette */ --veil: rgb(var(--ink-rgb) / 0.04); /* hover wash on paper */ --swatch-ring: rgb(var(--ink-rgb) / 0.16); /* keeps a pale finish visible */ --night-rule: rgb(var(--night-ink-rgb) / 0.14); --night-wash: rgb(var(--night-ink-rgb) / 0.1); --shadow-overlay: 0 1px 2px rgb(var(--ink-rgb) / 0.05), 0 24px 64px -16px rgb(var(--ink-rgb) / 0.2); /* tray + palette 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='%2357524D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Icon masks (the stroke colour is irrelevant: the element paints currentColor). */ --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"); /* Print is the one place the palette does not apply. */ --print-paper: #FFFFFF; --print-ink: #000000; /* -- type · three families in the book's roles --------------------------- Newsreader is variable on opsz; font-optical-sizing:auto drives the axis from the painted size, so one family serves 22px and 104px. */ --f-display: 'Newsreader', 'Noto Serif SC', Georgia, serif; --f-label: 'Archivo', 'Noto Sans SC', system-ui, -apple-system, sans-serif; --f-text: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif; /* Every clamp runs linearly from 390px to 1600px wide. */ --t-display-family: var(--f-display); --t-display-weight: 400; --t-display-size: clamp(3rem, 1.872rem + 4.628vw, 6.5rem); --t-display-track: -0.022em; --t-display-lead: 1; --t-h1-family: var(--f-display); --t-h1-weight: 400; --t-h1-size: clamp(2.4rem, 1.723rem + 2.777vw, 4.5rem); --t-h1-track: -0.02em; --t-h1-lead: 1.04; --t-h2-family: var(--f-display); --t-h2-weight: 400; --t-h2-size: clamp(2rem, 1.549rem + 1.851vw, 3.4rem); --t-h2-track: -0.015em; --t-h2-lead: 1.08; --t-h3-family: var(--f-display); --t-h3-weight: 400; --t-h3-size: clamp(1.35rem, 1.189rem + 0.661vw, 1.85rem); --t-h3-track: -0.01em; --t-h3-lead: 1.2; --t-lead-family: var(--f-text); --t-lead-weight: 300; --t-lead-size: clamp(1.15rem, 1.053rem + 0.397vw, 1.45rem); --t-lead-track: -0.005em; --t-lead-lead: 1.45; --t-body-family: var(--f-text); --t-body-weight: 400; --t-body-size: clamp(1rem, 0.98rem + 0.083vw, 1.0625rem); --t-body-track: 0em; --t-body-lead: 1.6; --t-meta-family: var(--f-text); --t-meta-weight: 400; --t-meta-size: 0.875rem; --t-meta-track: 0em; --t-meta-lead: 1.5; --t-code-family: var(--f-label); --t-code-weight: 700; --t-code-size: clamp(0.95rem, 0.918rem + 0.132vw, 1.05rem); --t-code-track: 0.02em; --t-code-lead: 1.2; --t-eyebrow-family: var(--f-label); --t-eyebrow-weight: 600; --t-eyebrow-size: 0.75rem; --t-eyebrow-track: 0.253em; /* the book's tracking */ --t-eyebrow-lead: 1.3; --t-versal-family: var(--f-label); --t-versal-weight: 600; --t-versal-size: 0.72rem; --t-versal-track: 0.22em; --t-versal-lead: 1.3; --t-micro-family: var(--f-label); --t-micro-weight: 700; --t-micro-size: 0.72rem; --t-micro-track: 0.11em; --t-micro-lead: 1.3; --t-stat-family: var(--f-label); --t-stat-weight: 700; --t-stat-size: clamp(2.2rem, 1.749rem + 1.851vw, 3.6rem); --t-stat-track: -0.02em; --t-stat-lead: 1; --t-button-family: var(--f-label); --t-button-weight: 600; --t-button-size: 0.95rem; --t-button-track: 0.01em; --t-button-lead: 1; /* -- space ---------------------------------------------------------------- */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 3rem; /* 48 */ --s-8: 4rem; /* 64 */ --s-9: 6rem; /* 96 */ --s-10: 8rem; /* 128 */ --band-y: clamp(72px, 10vw, 160px); --gutter: clamp(20px, 4vw, 64px); --max: 1440px; --measure: 62ch; /* -- shape ---------------------------------------------------------------- */ --r-0: 0; /* photographs: the book's square cut */ --r-chip: 2px; /* the NEW chip */ --r-pill: 999px; /* buttons, chips, swatches */ --r-card: 4px; /* fields, tray, palette */ --hdr-h: 72px; --mark-h: 34px; /* base height of a certification mark; .mark--* scales it */ --swatch: var(--rule); /* -- motion ---------------------------------------------------------------- Only transform and opacity are ever animated. */ --d-press: 120ms; --d-hover: 200ms; --d-ui: 320ms; --d-reveal: 600ms; --d-hero: 1200ms; --e-out: cubic-bezier(0.16, 1, 0.3, 1); --e-move: cubic-bezier(0.65, 0, 0.35, 1); /* -- layers ---------------------------------------------------------------- */ --z-hdr: 50; --z-scrim: 60; --z-tray: 70; --z-toast: 80; } @media (max-width: 599.98px) { :root { --mark-h: 26px; } } /* Chinese: Noto Sans SC has no serif and no display cut, so the ramp moves by weight instead of family. Headings take the label stack (Archivo for Latin, Noto for Han) at 400; display sizes drop ~8% because Han glyphs fill the em box; tracking turns positive; body leading opens to 1.8. */ :root:lang(zh) { --t-display-family: var(--f-label); --t-display-weight: 400; --t-display-size: clamp(2.75rem, 1.72rem + 4.26vw, 6rem); --t-display-track: 0.01em; --t-display-lead: 1.1; --t-h1-family: var(--f-label); --t-h1-weight: 400; --t-h1-size: clamp(2.2rem, 1.58rem + 2.55vw, 4.1rem); --t-h1-track: 0.01em; --t-h1-lead: 1.15; --t-h2-family: var(--f-label); --t-h2-weight: 400; --t-h2-size: clamp(1.85rem, 1.43rem + 1.7vw, 3.1rem); --t-h2-track: 0.01em; --t-h2-lead: 1.2; --t-h3-family: var(--f-label); --t-h3-weight: 400; --t-h3-track: 0.01em; --t-h3-lead: 1.3; --t-lead-weight: 400; --t-body-lead: 1.8; --t-eyebrow-track: 0.16em; --t-versal-track: 0.14em; --measure: 36em; }