/* * tokens.css · the Channels design tokens. Work package WP-01. * Implements SPEC v2.1 §2.5 (colour: the night and paper themes, the six source colours, the * focus ring), §2.6 (type: three self-hosted families, size-adjusted local fallbacks, the scale, * both type mappings), §2.7 (the channel line and the tether corner), §2.8 (layout metrics the * grid, the header, the record strip and scroll padding share) and §2.10 (motion). * docs/DESIGN-SYSTEM.md explains every token; this file is the source of truth for the values. * * How the themes work * Night: the `:root` colour block (the reader's choice). Paper, the default (decision R12; the * HTML starts data-theme="light"): `:root[data-theme='light']`. * Match my device: `:root[data-theme='system']`, which takes the paper block inside * `prefers-color-scheme: light` and the night block otherwise. prefs.js sets data-theme before * first paint (public/scripts/prefs.js). Role names never change between themes: `--chalk` is * the text colour in both (chalk on the slate, ink on paper), so a component written once reads * in both. The paper names in SPEC §2.5 (`--ink`, `--ink-2`, `--ink-3`, `--well`) are aliases. * `.theme-night` and `.plate` re-declare the night set on any element (the slate plate the mark, * the brain stills and the two night Stages sit on in the paper theme, §2.1, §2.5), and * `.theme-paper` re-declares the paper set (the styleguide's side-by-side view). A custom * property that points at another is resolved where it is declared, so each scope re-declares * every role, not only the base values. * * Accessibility * Every text pair meets WCAG 2.2 AA (4.5:1), every meaningful line and control outline 3:1, and * the focus ring is at least 11:1 on every ground. The contract at the end of this file lists the * pairs; gate G6 (scripts/contrast-check.mjs) reads it and recomputes every ratio from the values * here, and also checks the focus ring against every ground without a row. * `prefers-contrast: more` lifts the meaningful line and the hairline (end of this file). * * Rules this file enforces by construction * No gold, no orange, no gradients (SPEC §2.5, §2.9, G21). The six source colours are * provenance only: they are never a fill behind text, body text, a heading, chrome, or a * button (G21 checks where `--src-*` is used). Stroke widths come only from the `--ch-*` tokens. * Easings come only from the three motion curves below. */ /* ------------------------------------------------------------------ 1. faces (SPEC §2.6) */ /* * Three families, SIL Open Font License 1.1 (docs/licenses/, docs/THIRD-PARTY-LICENSES.md): * DM Sans (variable: weight 300 to 900, optical size 9 to 40; re-cut 20 Oct 2026 for the display * moments, TYPE-PLAN.md Tier B, Ishaan's yes in QUESTIONS.md Q16), Newsreader (two static instances * cut at optical size 16: 400 and 560, and "Newsreader Display", one static instance at optical * size 72, weight 400), DM Mono 400. Subset to the same Latin set as before (plus £ € × · ’ “ ” §); * 123.6 KB together against the 150 KB budget (SPEC §10.1). Only DM Sans, the display face and so * the H1's (the LCP element), is preloaded (src/components/Head.astro). Newsreader Display is a * family of its own and never preloaded, so a browser fetches it only on a page that sets a * display line in it (the display moments, base.css §11). * * The vertical metrics of every face are locked with ascent-, descent- and line-gap-override, * set to the fonts' own typographic metrics (DM Sans and DM Mono: 992 / 310 / 0 per 1000; * Newsreader: 1470 / 530 / 0 per 2000), so every platform builds the same line boxes whatever * the operating system would otherwise read from the font's Windows or Mac tables. */ @font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-var.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; ascent-override: 99.2%; descent-override: 31%; line-gap-override: 0%; } @font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 73.5%; descent-override: 26.5%; line-gap-override: 0%; } @font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-560.woff2') format('woff2'); font-weight: 560; font-style: normal; font-display: swap; ascent-override: 73.5%; descent-override: 26.5%; line-gap-override: 0%; } @font-face { font-family: 'Newsreader Display'; src: url('/fonts/newsreader-display-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 73.5%; descent-override: 26.5%; line-gap-override: 0%; } @font-face { font-family: 'DM Mono'; src: url('/fonts/dm-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 99.2%; descent-override: 31%; line-gap-override: 0%; } /* * Tabular figures. This cut of DM Sans has no `tnum` feature and proportional digits (a "1" is * 342 units, a "0" 656), so figures that must line up in a column take their digits from DM Mono * (every digit 600 units) through a digits-only face, and every other character stays DM Sans. * Decision 2 (26 Sep 2026) allows exactly this. Same file as DM Mono, so nothing extra downloads. * Declared across the weight range so a 500 value never asks for a synthetic bold digit. * Used by `--font-figures` and the `.tnum` utility in base.css; nowhere else. */ @font-face { font-family: 'Channels Figures'; src: url('/fonts/dm-mono-400.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0030-0039; ascent-override: 99.2%; descent-override: 31%; line-gap-override: 0%; } /* * Size-adjusted local fallbacks (SPEC §2.6, §10.1 CLS under 0.05). Each is a font already on the * reader's computer, scaled so a line set in it is as long as the same line in the web font, with * the web font's vertical metrics, so the swap moves nothing. * Measured at M0 (26 Sep 2026) in Chromium 1234 on Windows 11: a 310-character English paragraph * set in the web font at each role's size, weight and optical size, divided by the same paragraph * in the fallback at 100 %. The overrides are the web font's metric divided by the size-adjust. * DM Sans interface (15 to 17 px, 500) Arial 106.2 % (1.046 at 14/400 to 1.063) * DM Sans display (opsz 40, 300 to 340) Arial 91.4 % (0.909 at 88 px to 0.918 at 40) * Newsreader 400 Georgia 95.37 % * Newsreader 560 Georgia Bold 85.26 % * DM Mono 400 Courier New 100 % (0.9998) * Measured 20 Oct 2026 the same way (Chromium 1234, Windows 11, a 295-character paragraph at 100 px, * the web font against the fallback at 100 %; the same run read the display face at 0.905 against * M0's 0.909 and Newsreader 400 at 0.948 against 0.954, so the method agrees within half a percent): * DM Sans heavy (opsz 40, 860; 0.927 at 700) Arial Bold 94.17 % * Newsreader Display (opsz 72, 400) Georgia 99.95 % * Each face also names the metric-compatible open fonts Linux ships (Liberation Sans and Arimo * share Arial's widths, Gelasio Georgia's, Liberation Mono and Cousine Courier New's). The * styleguide page's "metric lock" specimen overlays each web font on its fallback so any drift * shows at a glance (src/styleguide/channels.astro). */ @font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); size-adjust: 106.2%; ascent-override: 93.41%; descent-override: 29.19%; line-gap-override: 0%; } @font-face { font-family: 'DM Sans Display Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); size-adjust: 91.4%; ascent-override: 108.53%; descent-override: 33.92%; line-gap-override: 0%; } @font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'), local('Gelasio'); font-weight: 300 500; size-adjust: 95.37%; ascent-override: 77.07%; descent-override: 27.79%; line-gap-override: 0%; } @font-face { font-family: 'Newsreader Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'), local('Gelasio Bold'), local('Gelasio-Bold'); font-weight: 501 700; size-adjust: 85.26%; ascent-override: 86.21%; descent-override: 31.08%; line-gap-override: 0%; } /* The heavy display line (TYPE-PLAN §1.4): Arial's bold file across the weight range, so a request * for 860 never asks for a synthetic bold. */ @font-face { font-family: 'DM Sans Heavy Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'); font-weight: 100 1000; size-adjust: 94.17%; ascent-override: 105.34%; descent-override: 32.92%; line-gap-override: 0%; } @font-face { font-family: 'Newsreader Display Fallback'; src: local('Georgia'), local('Gelasio'); size-adjust: 99.95%; ascent-override: 73.54%; descent-override: 26.51%; line-gap-override: 0%; } @font-face { font-family: 'DM Mono Fallback'; src: local('Courier New'), local('CourierNewPSMT'), local('Liberation Mono'), local('Cousine'); size-adjust: 100%; ascent-override: 99.2%; descent-override: 31%; line-gap-override: 0%; } /* ------------------------------------------------------------------ 2. theme-free tokens */ :root { /* Families (SPEC §2.6). The display, reading and interface roles are separate tokens so the * mapping is a token change only. */ --font-sans: 'DM Sans', 'DM Sans Fallback', sans-serif; --font-sans-display: 'DM Sans', 'DM Sans Display Fallback', sans-serif; --font-serif: 'Newsreader', 'Newsreader Fallback', serif; --font-mono: 'DM Mono', 'DM Mono Fallback', monospace; --font-figures: 'Channels Figures', 'DM Sans', 'DM Sans Fallback', sans-serif; --font-display: var(--font-sans-display); --font-reading: var(--font-serif); --font-ui: var(--font-sans); /* Display setting: light, optical size 40, a hair of negative tracking at display sizes only. */ --display-weight-statement: 300; --display-weight-h1: 310; --display-weight-h2: 340; --display-fvs: 'opsz' 40; --display-track: -0.01em; /* * The scale per device (DEVICE-SPEC §3; docs/DESIGN-SYSTEM.md "Devices"). Laptop, here: fluid * from 1024 px to 1440 px wide, landing on the 1024 column of the table at 1024 and on the values * the site has always had at 1440 (statement 88, H1 68, H2 40, H3 24, lead 22, body 19), held * beyond. Tablet and phone take fixed values (the device blocks after this rule), so 320 to 767 * reads the same. Set in rem so a reader's own font size still scales everything. * Fixed on every device: sidenote 15, interface 15, value 17, caption 14; locator 13.5 (13 on * phones, the G21 floor for a coloured locator). */ --t-statement: clamp(4rem, 0.3079385rem + 5.7688462vw, 5.5rem); --t-h1: clamp(3.5rem, 1.654rem + 2.8846vw, 4.25rem); --t-h2: clamp(2.25rem, 1.635rem + 0.9615vw, 2.5rem); --t-h3: clamp(1.375rem, 1.0678rem + 0.48vw, 1.5rem); --t-lead: clamp(1.3125rem, 1.1591458rem + 0.2396154vw, 1.375rem); --t-body: 1.1875rem; --t-sidenote: 0.9375rem; --t-ui: 0.9375rem; --t-value: 1.0625rem; --t-caption: 0.875rem; --t-loc: 0.84375rem; --lh-statement: 1.02; --lh-h1: 1.04; --lh-h2: 1.08; --lh-h3: 1.2; --lh-lead: 1.45; --lh-body: 1.6; --lh-sidenote: 1.5; --lh-ui: 1.35; --lh-caption: 1.4; --w-reading: 400; --w-reading-strong: 560; --w-ui: 500; --w-caption: 400; --w-value: 500; --w-selected: 600; --w-h3: 460; /* The reading measure: 60 to 66 characters of Newsreader at 19 px (SPEC §2.6). Set in em, not * ch: Newsreader's "0" is wide (tabular), so 1ch would overstate the line by a third. 27.5em is * 65 characters of running English at the face's average width. */ --measure: 27.5em; --measure-lead: 26em; --measure-h1: 16ch; --measure-h2: 22ch; /* * Display moments (Version 9, TYPE-PLAN.md §1.1; base.css §11; docs/DESIGN-SYSTEM.md "Display * moments"). A few chosen statements set as a heavy grotesque line and a display serif line, and a * few giant numerals. Fluid from 320 px to 1600 px and held from 1600 to 2560 px (a wide screen * needs the same measure, not larger type): size(v) = min + (max - min) * (v - 320) / 1280, in rem * plus vw so a reader's own text size and zoom still scale every value (WCAG 1.4.4). * Tier B (QUESTIONS.md Q16, approved): DM Sans reaches 900 and Newsreader has its 72 pt cut. */ --font-serif-display: 'Newsreader Display', 'Newsreader Display Fallback', serif; --font-heavy: 'DM Sans', 'DM Sans Heavy Fallback', sans-serif; /* 320 px 1024 1440 1600 to 2560 */ --t-display-xl: clamp(2.25rem, 0.9375rem + 6.5625vw, 7.5rem); /* 36 82 109 120 */ --t-display-l: clamp(2rem, 1.125rem + 4.375vw, 5.5rem); /* 32 63 81 88 */ --t-numeral-giant: clamp(4rem, 2.25rem + 8.75vw, 11rem); /* 64 126 162 176 */ --t-numeral-l: clamp(3rem, 1.75rem + 6.25vw, 8rem); /* 48 92 118 128 */ --t-numeral-m: clamp(2.25rem, 1.625rem + 3.125vw, 4.75rem); /* 36 58 71 76 */ --t-eyebrow: var(--t-caption); /* 14 (15 on phones) */ /* The heavy line is set at 0.9 of its partner's size, so the wide grotesque and the narrower serif * read as the same size. */ --heavy-scale: 0.9; --w-display-heavy: 860; --w-numeral: 820; --w-display-serif: 400; --w-display-quiet: 300; /* a quiet display line (one-column-motion.css) */ --w-hero-second: 400; /* the home hero's second line (moment 1): a book weight, not a hairline */ --w-eyebrow: 600; --track-heavy: -0.035em; --track-serif: -0.01em; /* the 72 pt cut is set tight already */ --track-numeral: -0.045em; --track-eyebrow: 0.02em; /* sentence case, so only a hair */ --lh-heavy: 0.95; --lh-hero-lock: 1.0; /* the home hero's two lines as one lockup */ --track-hero-second: -0.022em; --lh-serif: 1.0; /* Newsreader's ascent is 73.5 %, so 1.0 does not clip */ --lh-numeral: 0.88; /* The offset rule between a heavy line and its serif line: the site's channel strand (round-capped, * --ch-1, --line), so it reads as Walnut, not as a slide. In em of the serif line. */ --dm-rule-w: 2.5em; /* Space: a 4 px base. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Laptop (IA-PLAN §4; Ishaan 19 Oct, and again 21 Oct, RD-SPACING: "too much gap everywhere"): * the gap answers to the screen's height as well as its width. 56 px on a 1216 x 560 laptop, * 64 at 1440 x 900, 80 (the cap) at 1920 x 1080 (it was 83, 103 and 112). Tablets 72, phones 64 * (below). A heading's own rule and its 48 px to the content keep the parts reading apart. * base.css zeroes a section's trailing margin at every width, so the visible gap is this token. */ --section-gap: clamp(56px, 0.5rem + 2vw + 3vh, 80px); /* From an H1 to its lead, and above a page's first section (DEVICE-SPEC §3). The laptop keeps the * spacing it has today (24 px after an H1; a hero's own 64 px under its H1 and three quarters of * a section gap above it), so 1440 is unchanged; tablet and phone take the table's values. */ --h1-lead-gap: var(--space-5); /* Frozen at its value before IA-PLAN §4, so the heroes and the laptop first screens do not move. */ --hero-pad-top: calc(clamp(112px, 4.5rem + 4vw, 136px) * 0.75); /* * The channel line (SPEC §2.7). The site's connective line has the mark's character: fat, * round-capped, gently curved, never an arrowhead. Every stroke or line width in CSS comes from * these (G21): * --ch-1 3 px the spine, control tracks, strand underlines, heading branches * --ch-2 5 px connections inside specimens: synapses, routes, the path, the blind channel * --ch-bar 2 px the record bar on a row's left edge, the focus ring, a traced cell's outline, * the phone progress strand (SPEC §2.5, §2.8 name these widths; they are * neither channels nor separators, so they get their own name) * --ch-hair 1 px separators only (the colour of a separator is --hairline) * SPEC §2.7 calls the 1 px width "--hairline", which §2.5 also uses for the separator colour; * the colour keeps the name and the width is --ch-hair (docs/DESIGN-SYSTEM.md §7). */ --ch-1: 3px; --ch-2: 5px; --ch-bar: 2px; --ch-hair: 1px; --dash-array: 4 3; /* SVG stroke-dasharray for "waiting for a person" */ /* Nodes and glyphs. */ --node: 8px; /* section nodes, button and chip nodes, record nodes */ --node-lg: 10px; /* the plug switch's two nodes */ --thumb: 20px; /* range and ring thumbs */ --glyph: 6px; /* a source glyph beside a value (G21 (b)) */ --glyph-key: 12px; /* a source glyph in a legend or key (G21 (d)) */ --blind-w: 28px; /* the blind channel: a named gap (SPEC §2.3) */ --hit: 44px; /* primary targets */ --hit-min: 24px; /* every other target */ /* * The tether corner (SPEC §2.7): things a person holds or presses have three soft corners and * one tight corner, which faces what the thing is tied to. Machine things (record tables, * cells, source fragments, pipeline stations) are square. The `.tie-*` utilities in base.css * put the tight corner where it belongs. */ --r-btn: 12px; --r-btn-tie: 2px; --r-chip: 10px; --r-chip-tie: 2px; --r-field: 10px; --r-field-tie: 2px; --r-panel: 18px; --r-panel-tie: 3px; --r-plate: 22%; /* the mark's slate tile (the favicon's shape, SPEC §2.11) */ /* Focus ring (SPEC §2.5): 2 px, 2 px offset, following the element's corners. Colour per theme. */ --focus-w: var(--ch-bar); --focus-offset: 2px; /* Version 9 (P-UI; research/UIUX-GLASS.md R5): the ring is two-tone. A halo of the theme's ground * is drawn outside the ring (base.css §4), so the ring always has a neighbour it contrasts with: * on a glass surface, on the chalk fill of a primary button, on a white resolved value and on the * brain's nodes alike (WCAG 1.4.11). A ring drawn inside its control (an inset ring: the dock's * slots, the Menu's rows, the sheet's nodes) sets it to 0. */ --focus-halo: calc(var(--focus-offset) + var(--focus-w) + 2px); /* The dim used when the reader focuses one source or traces one value (SPEC §2.8, §3.1). */ --dim: 0.4; /* * Layout metrics (SPEC §2.8, §9.4; DEVICE-SPEC §1.3, §6). The grid itself is in layout.css. * Laptop values here; the device blocks below re-set them for tablets and phones. * --header-h the header bar's own height: 64 px laptop, 56 px phone and tablet * --chrome-top how much of the top of the screen sticky chrome covers: the header while it * is sticky (laptop), 0 on phones and tablets, where the header scrolls away. * Anything that sticks "under the header" uses this, never --header-h. * --strip-h the record strip while it is a sticky bar: 52 px in the record column * (laptop), 0 on phones and tablets, where it is a sheet (a 44 px bar again * there without script, which cannot make it a sheet) * --dock-h the phone dock's footprint, its floating bar and the gap under it: 62 px on * phones and tablets (measured by ui.js once it runs), 0 on the laptop * --safe-bottom the device's bottom safe area (needs viewport-fit=cover; 0 without it) * --scroll-pad, --scroll-pad-bottom scroll padding: what sticky chrome covers, plus a breath * --sticky-top where a specimen sticks: under the sticky chrome and the record strip, with a * breath of space on the laptop (layout.css [data-sticky], the compartment's * and View as's stacked views) */ --content-max: 1360px; --margin: clamp(40px, 20.31px + 1.923vw, 48px); --gap: 24px; --header-h: 64px; --chrome-top: var(--header-h); --strip-h: 52px; --dock-h: 0px; --safe-bottom: env(safe-area-inset-bottom, 0px); --scroll-pad: calc(var(--chrome-top) + var(--strip-h) + var(--space-4)); --scroll-pad-bottom: var(--space-4); --sticky-top: calc(var(--chrome-top) + var(--strip-h) + var(--space-4)); --specimen-max-phone: 36svh; /* the one held specimen of a phone Stage (DEVICE-SPEC §4.3) */ --sheet-max: 70svh; /* the spine and record sheets (DEVICE-SPEC §2.2, §2.3) */ --tap: 44px; /* a phone touch target, every control (DEVICE-SPEC §3) */ --crumb-row: 32px; /* the crumbs' bar on phones and tablets; each link's target is still --tap (chrome.css) */ --tap-gap: 8px; /* between adjacent phone targets */ --row-menu: 48px; /* a page-name row in the Menu (DEVICE-SPEC §2.4) */ --row-sheet: 56px; /* a row of the record sheet (DEVICE-SPEC §2.3) */ --glyph-dock: 20px; /* the two-clocks glyph in the dock (DEVICE-SPEC §2.1) */ --lockup-lap: 14px; /* how far the footer's spine runs into the lockup plate's top */ --rec-value-max: 14rem; /* the widest a record card's value gets beside its label (DEVICE-SPEC §4.2) */ --mark-plate: 36px; /* the header's mark: its slate plate (chrome.css .brandmark) */ --mark-glyph: 28px; /* the header's mark: the mark on it */ /* Instrument sizes on phones (DEVICE-SPEC §4.3; D5). */ --plate-phone: 120px; /* the small brain beside a button (Ask each), the folder and brain tiles (Folder), a picker's brain */ --ring-strip-phone: 160px; /* the clock rings in the record strip's sheet */ --atlas-key: 96px; /* the atlas mark as a key above its index */ /* Home on phones (DEVICE-SPEC §4.3; D4). */ --export-mini: 18rem; /* the Export drawing at its miniature's width (the mini form, and Export on a phone) */ --t-step-phone: clamp(0.75rem, 3.4vw, 0.8125rem); /* the brain act's step names: 13 px at 390, 12 px on the narrowest phones */ /* The brain act's pinned distance (home top, R12; DEVICE-SPEC §4.3): act.js and BrainAct read * the numbers from data-pinned / data-pinned-phone; these name them for CSS. */ --act-pin: 320svh; --act-pin-phone: 180svh; /* * Breakpoints (DEVICE-SPEC §1.3). CSS cannot read a custom property inside a media query, so * they are written as numbers, and only these may appear in a width media query (G21 * `breakpoints`; scripts/lib/devices.mjs is the list the lint reads): * phone below 768 (max-width: 767.98px) * tablet 768 to 1023 (min-width: 768px) and (max-width: 1023.98px) * laptop 1024 and up (min-width: 1024px); compact grid and header to 1279.98, full from 1280 * Container queries (inside a section, against the `reading` or `record` column or an * instrument's own root) use the named steps only: * narrow below 480 (max-width: 479.98px) * medium 480 to 719 * wide 720 and up (min-width: 720px) */ /* Stacking: one scale for the whole site. */ --z-base: 1; --z-ledger: 2; /* a Ledger on its ground, so the spine passes behind it */ --z-held: 2; /* a phone Stage's held specimen, over the cards that pass under it (D4) */ --z-sticky: 20; --z-strip: 40; --z-dock: 45; /* the phone dock, under the header's popovers */ --z-header: 50; --z-popover: 60; --z-sheet: 65; /* a sheet opened from the dock */ --z-dialog: 70; --z-skip: 100; /* * Glass (Version 9, package P-UI; plan/final/v9/PLAN-FIXES.md §12, research/UIUX-GLASS.md §1). * Glass is a property of the floating layer only: the header, the phone dock and the record * strip's bar (the bar level), and popovers, the Legend, the Menu, tooltips and sheets (the pop * level). It never goes on a reading surface, and never on glass. chrome.css draws it. * --glass-alpha-bar 97 %: a bar's tint, the theme's --ground (84 % until 19 Oct, 94 % until 20 Oct: page text * scrolling under the header read through it and competed with the nav, * Ishaan's review; with the 24 px blur what passes beneath is only a soft * shift of light; 20 Oct, REMAINING R1: still read faintly, so 97 %, which * halves what shows: the luminance range in an empty stretch of the bar with a * heading beneath, at 1216 x 560, went from 1.018 to 1.009 : 1 in Paper and * from 1.024 to 1.012 : 1 in Night). Only --chalk text sits on it * (at least 7:1 over pure black and pure white beneath); a control's edge * on a bar takes --glass-ink-2 (3:1). Every quieter tone on a bar is drawn * in --chalk (chrome.css remaps them on the surface), except the Legend's * words and glyph, in --chalk-2 through --glass-ink-2 (v9:fix2-legend, Ishaan, * 22 Oct 2026: "little more greyed out"; 4.5:1 or more, the contract rows). * --glass-alpha-pop 92 %: a popover's or a sheet's tint, the theme's --panel. --chalk and * --chalk-2 text (7:1) and --line strokes (3:1) may sit on it; --chalk-3 * is drawn as --chalk-2 there. * The contract rows at the end of this file ("AT --glass-alpha-…") are recomputed by gate G6 * over a pure black and a pure white backdrop, the darkest and lightest content there is, so a * token change cannot quietly break glass. The blur only softens what is beneath; the tint * carries the contrast, and the backdrop's brightness filter only adds margin. * Solid (the tint at 100 %, no blur): where backdrop-filter is unsupported, under * prefers-reduced-transparency, prefers-contrast: more and forced colours, and when the reader * chooses "Solid surfaces" in the Legend (html[data-surfaces='solid'], prefs.js block v9:surfaces). * Never animated: a glass surface fades and moves; its blur never changes. */ --glass-alpha-bar: 97%; --glass-alpha-pop: 92%; --glass-blur: 24px; /* bars: enough that no word beneath stays legible (was 14 px) */ --glass-blur-pop: 18px; /* popovers, sheets, tooltips */ --glass-saturate: 1.2; --glass-bar: color-mix(in srgb, var(--ground) var(--glass-alpha-bar), transparent); --glass-pop: color-mix(in srgb, var(--panel) var(--glass-alpha-pop), transparent); /* The hairline that defines a glass surface's edge (decorative: the surface's contents name it). */ --glass-edge: color-mix(in srgb, var(--chalk) 14%, transparent); /* The theme's --chalk-2 as the page resolves it: a control's edge on a bar, where --line is too * quiet over white (chrome.css sets --line to it on a bar). */ --glass-ink-2: var(--chalk-2); /* The theme's --line as the page resolves it, for a popover inside a bar to take back. */ --glass-line: var(--line); --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright)); --glass-filter-pop: blur(var(--glass-blur-pop)) saturate(var(--glass-saturate)) brightness(var(--glass-bright)); /* Depth comes from a shadow and a lit top edge, never from more blur. */ --glass-sheen: inset 0 1px 0 var(--glass-light); --glass-shadow-bar: 0 1px 0 color-mix(in srgb, var(--glass-shade) 10%, transparent); --glass-shadow-pop: 0 1px 3px color-mix(in srgb, var(--glass-shade) 14%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--glass-shade) 34%, transparent); --glass-shadow-sheet: 0 -12px 40px -16px color-mix(in srgb, var(--glass-shade) 36%, transparent); /* A modal sheet's scrim: flat, never blurred. */ --scrim: color-mix(in srgb, var(--glass-shade) var(--scrim-alpha), transparent); /* Concentric radii (inner = outer minus padding): the dock and the sheets. */ --r-dock: 18px; --r-sheet: 20px; --dock-gap: 8px; /* the floating dock's distance from the screen's edges */ --dock-max: 40rem; /* the widest the dock gets (tablets): centred, its sheets aligned to it */ /* What a floating surface is drawn with: glass by default, solid under the conditions at the end * of this file. Every surface reads these four, so one switch turns all of them solid. */ --float-bar: var(--glass-bar); --float-pop: var(--glass-pop); --float-bar-fx: var(--glass-filter); --float-pop-fx: var(--glass-filter-pop); --float-edge: var(--glass-edge); --float-sheen: var(--glass-sheen); /* * Motion (SPEC §2.10). Three easings and nothing else (G21): settle for arrivals, draw for * strokes, fill for lobes. Four durations, plus the named ones the spec times exactly. * Nothing translates more than 12 px outside the brain. Every animation or transition is * declared only under html[data-motion='on'] (§9.1); base.css makes everything instant otherwise. */ --ease-settle: cubic-bezier(0.16, 0.84, 0.24, 1); --ease-draw: cubic-bezier(0.33, 0, 0.2, 1); --ease-fill: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-1: 180ms; /* a press, a pulse, a state change */ --dur-2: 280ms; /* an underline strand, a hover */ --dur-3: 480ms; /* a lobe fill, a camera move */ --dur-4: 700ms; /* the header mark's short formation */ --dur-strand: 220ms; /* the primary button's strand (§2.8 controls) */ --dur-branch: 360ms; /* a heading's branch (§2.10 entry) */ --stagger-line: 60ms; /* heading lines settling one after another */ --settle-from: 4px; /* how far a heading line settles from */ --shift-max: 12px; /* the largest translate outside the brain */ } /* * The devices (DEVICE-SPEC §1.3, §3, §6; docs/DESIGN-SYSTEM.md "Devices"). Each block re-sets only * what differs from the laptop values above. */ /* Laptop, compact grid and header, 1024 to 1279 px. */ @media (max-width: 1279.98px) { :root { --gap: 20px; } } /* Tablet and phone, below 1024 px: one column, the phone's chrome (package D2; both layouts mark * ): the header scrolls away, the record strip is a sheet, and the dock lies at the * foot of the screen, so nothing sticks at the top and the scroll padding clears the dock below. */ @media (max-width: 1023.98px) { :root { --gap: 20px; --margin: 32px; --header-h: 56px; --chrome-top: 0px; --strip-h: 0px; /* The dock's whole footprint: its 54 px floating bar (44 px targets in a 4 px inset and a * hairline) and the 8 px it floats above the screen's edge. ui.js publishes the measured value, * so larger text that makes the bar taller moves everything that clears it (P-UI). */ --dock-h: 62px; --scroll-pad: var(--space-4); --scroll-pad-bottom: calc(var(--dock-h) + var(--safe-bottom) + var(--space-4)); --sticky-top: calc(var(--chrome-top) + var(--strip-h)); --section-gap: 72px; --h1-lead-gap: var(--space-5); /* Clear of the record strip's bar where it is one (no script, below). */ --hero-pad-top: calc(var(--strip-h) + var(--space-6)); --measure: 40em; --t-statement: 3.25rem; --t-h1: 2.75rem; --t-h2: 2rem; --t-h3: 1.3125rem; --t-lead: 1.25rem; --t-body: 1.125rem; } /* Without script the record strip cannot be a sheet (nothing wires it), so it stays the sticky * bar under no header at all: its room is reserved again, so it never lies over the page's * first heading. A page with no strip (data-strip="off") reserves none. */ :root:not(.js):not([data-strip='off']) { --strip-h: var(--tap); --scroll-pad: calc(var(--strip-h) + var(--space-4)); } } /* Phone, below 768 px: fixed sizes, so 320 to 767 reads the same; 16 px margins at 360 and below. */ @media (max-width: 767.98px) { :root { --gap: 16px; --margin: clamp(16px, 26.667vw - 80px, 20px); --section-gap: 64px; --h1-lead-gap: var(--space-4); --hero-pad-top: calc(var(--strip-h) + var(--space-5)); --measure: 27.5em; /* The two display sizes ease down toward 320 px (36 and 32 px there; the full 40 and 36 px from * 384 px), so a heading at 320 holds four lines at most instead of five. rem plus vw, so a * reader's own text size still scales both (WCAG 1.4.4; PUIb, folded in from phone.css). */ --t-statement: clamp(2.25rem, 1.25rem + 6.25vw, 2.5rem); --t-h1: clamp(2rem, 1rem + 5vw, 2.25rem); --t-h2: 1.75rem; --t-h3: 1.25rem; --t-lead: 1.1875rem; --t-body: 1.125rem; /* Version 9 (P-UI; research/UIUX-PHONE.md item 8): the small steps that carry meaning on a * phone (the dock's place line, field hints and errors, captions, locators) are a step larger: * interface text and sidenotes at 16 px, captions at 15 px, locators at 14 px (Apple's 17 pt * default and NN/g's 16 pt for bar text). The reading text stays at 18 px. The whole phone * scale, in px: locator 14, caption 15, interface 16, sidenote 16, value 17, body 18, lead 19, * H3 20, H2 28, H1 36 (32 at 320), statement 40 (36 at 320). */ --t-ui: 1rem; --t-sidenote: 1rem; --t-caption: 0.9375rem; --t-loc: 0.875rem; --mark-plate: 30px; --mark-glyph: 24px; --lh-statement: 1.06; --lh-h1: 1.06; --lh-h2: 1.12; --lh-body: 1.55; } } /* ------------------------------------------------------------------ 3. night (the default) */ /* * The mix variant (MIX-VARIANT.md): the Vault palette (wt-color, scripts/palettes/palettes.json * "vault", brushed steel and gunmetal) is the real palette, in Night, Paper and the plate on paper. * The six source colours are Vault's too (Night unchanged; Paper money and operations one step). * Contrast figures in the comments below are the earlier palette's; gate G6 recomputes every pair. */ /* * A blue slate at L* 12.5: a board you write on, not a void (SPEC §2.5). Contrast in the comments * is WCAG 2.x against ground / panel / cell. White is reserved for the mark and resolved values. */ :root, .theme-night, .plate { color-scheme: dark; --ground: #1d2124; /* L* 12.5 page ground */ --ground-deep: #171a1c; /* L* 9.0 footer, the pinned films */ --panel: #23282b; /* L* 15.4 specimen panels, popovers, the record strip */ --cell: #2c3235; /* L* 20.4 record cells, device surfaces */ --well: var(--cell); /* the paper theme's name for the recessed surface */ --plate: #1d2124; /* the slate plate behind the mark in the paper theme */ /* The section bands (section-tint.css; tint option 3): a tinted topic's ground, 2.9 L* under the page. * Its recessed cell is the cell itself, already 10.8 L* above the tint. G6 checks both as grounds. */ --ground-tint: #181b1d; --cell-tint: #2c3235; --mark: #ffffff; /* the logo only (16.2 / 15.0 / 13.0); white in both themes */ --resolved: #ffffff; /* resolved values and the record bar (white is the record) */ --chalk: #eef1f2; /* 14.3 / 13.3 / 11.5 headings, body, primary button fill */ --chalk-2: #caced2; /* 9.6 / 8.9 / 7.7 leads, secondary text */ --chalk-3: #a6acb0; /* 6.9 / 6.4 / 5.5 captions, quiet labels */ --line: #878e94; /* 5.1 / 4.8 / 4.1 meaningful strokes (non-text floor 3:1) */ /* The muted grey of a heavy display line (TYPE-PLAN §1.2). Display only: text of 24 px and more, * or 18.66 px and more at weight 700 or more (WCAG large text, 3:1); every use is 32 px or more. * 4.39 ground / 4.74 deep / 4.04 panel / 3.52 cell. */ --display-mute: #7f868c; --hairline: #363b3f; /* 1.4 decorative separators only */ --on-chalk: var(--ground); /* text on a chalk fill (the primary button, a selected chip) */ --chalk-hover: var(--resolved); /* a chalk fill under hover or focus: brightens to the record's white */ --surface: var(--ground); /* the surface a control sits on; .panel, .pop and cells re-set it */ --ink: var(--chalk); --ink-2: var(--chalk-2); --ink-3: var(--chalk-3); --focus-ring: var(--chalk); /* 11.5 on cell, 14.3 on ground */ /* Glass, the theme's part (section 2 has the rest): the backdrop is dimmed a little in Night, * the lit edge is faint, the shadow is black and the scrim strong (NN/g: shadows hardly read on * a dark ground, so the hairline and the lit edge carry the depth). */ --glass-bright: 0.86; --glass-light: color-mix(in srgb, #ffffff 7%, transparent); --glass-shade: #000000; --scrim-alpha: 48%; /* * The six source colours (SPEC §2.5): one per family of system and one per lobe of the mark, * taken from the materials facts arrive on. Muted and deliberately unequal; no pair under * ΔE00 7.6 under simulated deuteranopia or protanopia; every one at least ΔE00 25 from gold. * Contrast on ground / deep / panel / cell: */ --src-money: #93c7ac; /* ledger green, circle, lobe L3 8.5 / 9.2 / 7.9 / 6.8 */ --src-operations: #75c2ea; /* carbon-copy blue, square, L0 8.2 / 8.9 / 7.6 / 6.6 */ --src-customers: #d2898b; /* index-card red, diamond, L1 5.9 / 6.4 / 5.5 / 4.8 */ --src-rules: #a199c0; /* stamp violet, hexagon, L5 (curl) 6.0 / 6.5 / 5.6 / 4.8 */ --src-correspondence: #98d5da; /* fax teal, triangle, L2 9.9 / 10.7 / 9.2 / 8.0 */ --src-documents: #daa8be; /* blotter mauve, folded page, L4 8.0 / 8.6 / 7.4 / 6.4 */ } /* ------------------------------------------------------------------ 4. paper (the reader's choice) */ /* * Neutral paper: black, grey and white, with no blue (Ishaan, 26 Sep). The mark stays white on a * neutral black plate. The contrast figures in the comments were computed for the earlier cool paper * set; gate G6 recomputes every pair from the values below on every build. */ :root[data-theme='light'], .theme-paper { color-scheme: light; --ground: #f1f4f6; --ground-deep: #e9edf0; /* the footer's ground: the well, one step down from the page */ --panel: #fafbfc; --cell: #e9edf0; /* the well */ --well: var(--cell); --plate: #20262b; /* neutral black, 19.0 against the paper ground */ /* The section bands (site.config.ts switches.sectionBands, section-tint.css; tint option 3, Ishaan 22 Oct): * a tinted topic's ground, 3.1 L* under the page, and its recessed cell one step deeper again, the deepest * that keeps every source colour at 4.5:1 on it (#e3e7ea would not). G6 checks both as grounds. */ --ground-tint: #e8ebee; --cell-tint: #e4e8eb; --mark: #ffffff; /* on the plate only */ --resolved: #0c1014; /* 18.2 / 19.3 / 16.6 the deepest ink: resolved values, the bar */ --chalk: #191f23; /* --ink 17.0 / 18.0 / 15.5 */ --chalk-2: #40464b; /* --ink-2 9.2 / 9.8 / 8.4 */ --chalk-3: #5b6167; /* --ink-3 5.7 / 6.0 / 5.2 */ --line: #6f767c; /* 4.2 / 4.4 / 3.8 */ --display-mute: #767d84; /* 3.77 / 4.02 / 3.54 display only (large text, 3:1) */ --hairline: #d6dcdf; /* 1.3 decorative only */ --on-chalk: var(--ground); --chalk-hover: #30363b; /* an ink fill under hover or focus lifts a step (13.0 under paper text) */ --surface: var(--ground); --ink: var(--chalk); --ink-2: var(--chalk-2); --ink-3: var(--chalk-3); --focus-ring: var(--chalk); /* 2 px ink: 15.5 on the well */ /* Glass in Paper: the backdrop lifted a hair, a bright lit edge, a soft ink shadow, a light scrim. */ --glass-bright: 1.06; --glass-light: color-mix(in srgb, #ffffff 80%, transparent); --glass-shade: #10161a; --scrim-alpha: 30%; /* Paper source colours, on ground / panel / well. */ --src-money: #0f4c2a; /* 9.2 / 9.7 / 8.4 */ --src-operations: #1d6f97; /* 5.1 / 5.4 / 4.6 */ --src-customers: #9d5252; /* 5.1 / 5.4 / 4.6 */ --src-rules: #3d4372; /* 8.5 / 9.0 / 7.8 */ --src-correspondence: #156969; /* 5.9 / 6.2 / 5.4 */ --src-documents: #603547; /* 9.1 / 9.7 / 8.3 */ } /* Match my device: the paper set when the operating system is light. Keep this block identical to * the paper block above (the styleguide build compares them; docs/DESIGN-SYSTEM.md §3). */ @media (prefers-color-scheme: light) { :root[data-theme='system'] { color-scheme: light; --ground: #f1f4f6; --ground-deep: #e9edf0; --panel: #fafbfc; --cell: #e9edf0; --well: var(--cell); --plate: #20262b; --ground-tint: #e8ebee; --cell-tint: #e4e8eb; --mark: #ffffff; --resolved: #0c1014; --chalk: #191f23; --chalk-2: #40464b; --chalk-3: #5b6167; --line: #6f767c; --display-mute: #767d84; --hairline: #d6dcdf; --on-chalk: var(--ground); --chalk-hover: #30363b; --surface: var(--ground); --ink: var(--chalk); --ink-2: var(--chalk-2); --ink-3: var(--chalk-3); --focus-ring: var(--chalk); --glass-bright: 1.06; --glass-light: color-mix(in srgb, #ffffff 80%, transparent); --glass-shade: #10161a; --scrim-alpha: 30%; --src-money: #0f4c2a; --src-operations: #1d6f97; --src-customers: #9d5252; --src-rules: #3d4372; --src-correspondence: #156969; --src-documents: #603547; } } /* * The plate in the paper theme is neutral black, not slate (Ishaan, 26 Sep: black, grey and white on * paper). Inside it the night roles keep their meaning with neutral values; the six source colours * stay the night set (from the `.plate` rule above), because they say where a fact came from. * The selectors start with `html` so gate G6 reads them as the plate, not as the paper page; * inside the plate every text pair clears 4.5:1 (lowest: --chalk-3 #9e9e9e on --cell #1f1f1f, 6.4). */ html[data-theme='light'] .plate, .theme-paper .plate { --ground: #1c2126; --ground-deep: #14191d; --panel: #23282d; --cell: #2b3136; --well: var(--cell); --plate: #1c2126; --resolved: #ffffff; --chalk: #eef1f2; --chalk-2: #cdd2d5; --chalk-3: #acb2b6; --line: #8c9399; --display-mute: #868d93; /* 4.82 ground / 4.42 panel / 3.91 cell: display only */ --hairline: #383e43; --chalk-hover: #ffffff; } @media (prefers-color-scheme: light) { html[data-theme='system'] .plate { --ground: #1c2126; --ground-deep: #14191d; --panel: #23282d; --cell: #2b3136; --well: var(--cell); --plate: #1c2126; --resolved: #ffffff; --chalk: #eef1f2; --chalk-2: #cdd2d5; --chalk-3: #acb2b6; --line: #8c9399; --display-mute: #868d93; --hairline: #383e43; --chalk-hover: #ffffff; } } /* * More contrast asked for (SPEC §9.4): the meaningful line takes the secondary text colour and * the decorative hairline takes the meaningful line's weight of colour, in both themes. The * selectors avoid a bare `:root` so gate G6 keeps reading the default values. */ @media (prefers-contrast: more) { html:root, html:root[data-theme], .theme-night, .theme-paper, .plate { --line: var(--chalk-2); --hairline: var(--chalk-3); --display-mute: var(--chalk-2); } } /* * Solid surfaces (Version 9, P-UI; PLAN-FIXES §12 item 3). The glass tokens fall back to the theme's * own ground (bars) and panel (popovers and sheets), with no blur, where the browser cannot blur, * where the reader's system asks for less transparency, more contrast or forced colours, and where * the reader has chosen "Solid surfaces" in the Legend (Safari does not report Reduce Transparency, * so the switch is the only way there). The surfaces keep their hairline and shadow, so their * shape survives. `html:root` keeps gate G6 reading the default values. */ html[data-surfaces='solid'] { --float-bar: var(--ground); --float-pop: var(--panel); --float-bar-fx: none; --float-pop-fx: none; --float-edge: var(--hairline); --float-sheen: 0 0 #0000; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html:root { --float-bar: var(--ground); --float-pop: var(--panel); --float-bar-fx: none; --float-pop-fx: none; --float-edge: var(--hairline); --float-sheen: 0 0 #0000; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { html:root { --float-bar: var(--ground); --float-pop: var(--panel); --float-bar-fx: none; --float-pop-fx: none; --float-edge: var(--hairline); --float-sheen: 0 0 #0000; } } /* * The contrast contract (SPEC §2.5, §11 G6). Gate G6 reads the rows between the two markers * below, one pair per line (" ON "), and recomputes each ratio from * the values above; a line it cannot read fails the gate, so nothing else goes between the * markers. Rows, in order: night text on every ground (4.5:1), the meaningful line (3:1), the * mark and resolved values, the text on a chalk fill; the six source colours as text (a locator * at 13.5 px) on every night ground; the display mute at 3:1 (display-only large text, TYPE-PLAN * §1.2); then the same for paper, plus the mark on its slate plate * and the plate on the page. The focus ring is checked against every ground without a row. * Then glass (Version 9, P-UI): " ON AT " is the token on the * tint at that alpha, composited over pure black and over pure white beneath (both must pass): * --chalk at 7:1 and a control's edge at 3:1 on a bar; --chalk and --chalk-2 at 7:1, --line and * the source colours (the Legend's swatches) at 3:1 on a popover or sheet. * Not a row, because it is a rule about shape rather than colour: the white of a resolved value * and the chalk are only 5 L* apart, so no state is ever told from another by that difference * alone; every state changes a shape and carries a word (SPEC §2.5 states by form, base.css §6). * * contrast-contract-begin * dark 4.5 --chalk ON --ground * dark 4.5 --chalk ON --ground-deep * dark 4.5 --chalk ON --panel * dark 4.5 --chalk ON --cell * dark 4.5 --chalk-2 ON --ground * dark 4.5 --chalk-2 ON --ground-deep * dark 4.5 --chalk-2 ON --panel * dark 4.5 --chalk-2 ON --cell * dark 4.5 --chalk-3 ON --ground * dark 4.5 --chalk-3 ON --ground-deep * dark 4.5 --chalk-3 ON --panel * dark 4.5 --chalk-3 ON --cell * dark 3 --line ON --ground * dark 3 --line ON --ground-deep * dark 3 --line ON --panel * dark 3 --line ON --cell * dark 4.5 --mark ON --ground * dark 4.5 --mark ON --panel * dark 4.5 --mark ON --cell * dark 4.5 --resolved ON --cell * dark 4.5 --resolved ON --panel * dark 4.5 --on-chalk ON --chalk * dark 4.5 --on-chalk ON --resolved * dark 4.5 --on-chalk ON --chalk-hover * dark 4.5 --src-money ON --ground * dark 4.5 --src-money ON --ground-deep * dark 4.5 --src-money ON --panel * dark 4.5 --src-money ON --cell * dark 4.5 --src-operations ON --ground * dark 4.5 --src-operations ON --ground-deep * dark 4.5 --src-operations ON --panel * dark 4.5 --src-operations ON --cell * dark 4.5 --src-customers ON --ground * dark 4.5 --src-customers ON --ground-deep * dark 4.5 --src-customers ON --panel * dark 4.5 --src-customers ON --cell * dark 4.5 --src-rules ON --ground * dark 4.5 --src-rules ON --ground-deep * dark 4.5 --src-rules ON --panel * dark 4.5 --src-rules ON --cell * dark 4.5 --src-correspondence ON --ground * dark 4.5 --src-correspondence ON --ground-deep * dark 4.5 --src-correspondence ON --panel * dark 4.5 --src-correspondence ON --cell * dark 4.5 --src-documents ON --ground * dark 4.5 --src-documents ON --ground-deep * dark 4.5 --src-documents ON --panel * dark 4.5 --src-documents ON --cell * dark 3 --display-mute ON --ground * dark 3 --display-mute ON --ground-deep * dark 3 --display-mute ON --panel * dark 3 --display-mute ON --cell * dark 3 --display-mute ON --ground-tint * dark 3 --display-mute ON --cell-tint * dark 4.5 --mark ON --ground-tint * dark 4.5 --resolved ON --cell-tint * light 4.5 --chalk ON --ground * light 4.5 --chalk ON --panel * light 4.5 --chalk ON --well * light 4.5 --chalk-2 ON --ground * light 4.5 --chalk-2 ON --panel * light 4.5 --chalk-2 ON --well * light 4.5 --chalk-3 ON --ground * light 4.5 --chalk-3 ON --panel * light 4.5 --chalk-3 ON --well * light 3 --line ON --ground * light 3 --line ON --panel * light 3 --line ON --well * light 4.5 --resolved ON --ground * light 4.5 --resolved ON --well * light 4.5 --resolved ON --panel * light 4.5 --mark ON --plate * light 3 --plate ON --ground * light 4.5 --on-chalk ON --chalk * light 4.5 --on-chalk ON --resolved * light 4.5 --on-chalk ON --chalk-hover * light 4.5 --src-money ON --ground * light 4.5 --src-money ON --panel * light 4.5 --src-money ON --well * light 4.5 --src-operations ON --ground * light 4.5 --src-operations ON --panel * light 4.5 --src-operations ON --well * light 4.5 --src-customers ON --ground * light 4.5 --src-customers ON --panel * light 4.5 --src-customers ON --well * light 4.5 --src-rules ON --ground * light 4.5 --src-rules ON --panel * light 4.5 --src-rules ON --well * light 4.5 --src-correspondence ON --ground * light 4.5 --src-correspondence ON --panel * light 4.5 --src-correspondence ON --well * light 4.5 --src-documents ON --ground * light 4.5 --src-documents ON --panel * light 4.5 --src-documents ON --well * light 3 --display-mute ON --ground * light 3 --display-mute ON --panel * light 3 --display-mute ON --well * light 4.5 --resolved ON --ground-tint * light 4.5 --resolved ON --cell-tint * light 3 --display-mute ON --ground-tint * light 3 --display-mute ON --cell-tint * dark 7 --chalk ON --ground AT --glass-alpha-bar * dark 3 --glass-ink-2 ON --ground AT --glass-alpha-bar * dark 4.5 --chalk-2 ON --ground AT --glass-alpha-bar * dark 7 --chalk ON --panel AT --glass-alpha-pop * dark 7 --chalk-2 ON --panel AT --glass-alpha-pop * dark 3 --line ON --panel AT --glass-alpha-pop * dark 3 --src-money ON --panel AT --glass-alpha-pop * dark 3 --src-operations ON --panel AT --glass-alpha-pop * dark 3 --src-customers ON --panel AT --glass-alpha-pop * dark 3 --src-rules ON --panel AT --glass-alpha-pop * dark 3 --src-correspondence ON --panel AT --glass-alpha-pop * dark 3 --src-documents ON --panel AT --glass-alpha-pop * light 7 --chalk ON --ground AT --glass-alpha-bar * light 3 --glass-ink-2 ON --ground AT --glass-alpha-bar * light 4.5 --chalk-2 ON --ground AT --glass-alpha-bar * light 7 --chalk ON --panel AT --glass-alpha-pop * light 7 --chalk-2 ON --panel AT --glass-alpha-pop * light 3 --line ON --panel AT --glass-alpha-pop * light 3 --src-money ON --panel AT --glass-alpha-pop * light 3 --src-operations ON --panel AT --glass-alpha-pop * light 3 --src-customers ON --panel AT --glass-alpha-pop * light 3 --src-rules ON --panel AT --glass-alpha-pop * light 3 --src-correspondence ON --panel AT --glass-alpha-pop * light 3 --src-documents ON --panel AT --glass-alpha-pop * contrast-contract-end */ /* * agents.css · the agent edition's own rules (plan/design/agent/PLAN.md §2; AGENT-BRIEF 1). * scripts/agents-edition.mjs writes out/agents/agents.css as the site's tokens.css (imports * removed, so fonts and the paper theme apply) followed by this file. The pages are plain: no * script, no motion, no layout tricks; one reading column on the paper ground (the pages set * data-theme="light"), the quiet pages' type, the mark on its slate plate in the header, and * the "made up for this page" label of every sample kept visible beside the words it labels. * Accessibility: every control is a real link with a 44 px target; the skip link shows on focus; * the focus ring is the tokens' own; nothing moves. */ html { background: var(--ground); color: var(--chalk); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); color: var(--chalk); font-family: var(--font-reading); font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-reading); } a { color: var(--chalk); text-decoration-line: underline; text-decoration-thickness: var(--ch-hair); text-underline-offset: 0.2em; } a:hover { color: var(--resolved); } :focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); } .skip-link { position: absolute; left: var(--space-4); top: var(--space-4); z-index: var(--z-skip); padding: var(--space-3) var(--space-4); background: var(--chalk); color: var(--on-chalk); font-family: var(--font-ui); font-size: var(--t-ui); font-weight: var(--w-ui); transform: translateY(-300%); } .skip-link:focus { transform: none; } .agents-header, .agents-footer, main { width: 100%; max-width: calc(var(--measure) + var(--space-9)); margin-inline: auto; padding-inline: var(--space-4); box-sizing: border-box; } .agents-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); border-bottom: var(--ch-hair) solid var(--hairline); font-family: var(--font-ui); font-size: var(--t-ui); font-weight: var(--w-ui); } .agents-brand, .agents-home, .agents-footer a { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--hit); text-decoration: none; } .agents-brand { font-size: var(--t-value); } .agents-home, .agents-footer a { text-decoration-line: underline; } .agents-plate { display: inline-flex; align-items: center; justify-content: center; width: var(--hit); height: var(--hit); border-radius: var(--r-plate); background: var(--plate); } .agents-plate img { display: block; width: 28px; height: 28px; } main { flex: 1 0 auto; padding-block: var(--space-7) var(--space-8); overflow-wrap: anywhere; } main:focus { outline: none; } h1, h2, h3 { margin: 0; color: var(--chalk); font-family: var(--font-display); max-width: var(--measure); } h1 { font-size: var(--t-h2); line-height: var(--lh-h1); font-weight: var(--display-weight-h1); font-variation-settings: var(--display-fvs); letter-spacing: var(--display-track); } h2 { margin-top: var(--space-8); font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: var(--display-weight-h2); font-variation-settings: var(--display-fvs); } h3 { margin-top: var(--space-6); font-family: var(--font-ui); font-size: var(--t-value); line-height: var(--lh-ui); font-weight: var(--w-h3); } p, ul, dl { max-width: var(--measure); margin: var(--space-4) 0 0; } .lead { margin-top: var(--space-5); color: var(--chalk-2); font-size: var(--t-lead); line-height: var(--lh-lead); } ul { padding-left: var(--space-5); } li { margin-top: var(--space-2); } dt { margin-top: var(--space-5); font-weight: var(--w-reading-strong); } dd { margin: var(--space-1) 0 0; } /* "Sample: ..., made up for this page." stays beside the words it labels. */ .sample { padding-left: var(--space-4); border-left: var(--ch-1) solid var(--line); color: var(--chalk-3); font-family: var(--font-ui); font-size: var(--t-caption); line-height: var(--lh-caption); } /* The index lists each page with its own description under its name. */ .agents-index { list-style: none; padding-left: 0; } .agents-index li { margin-top: var(--space-4); } .agents-index a { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: var(--w-ui); } .agents-index span { display: block; color: var(--chalk-2); } .agents-footer { border-top: var(--ch-hair) solid var(--hairline); padding-block: var(--space-5); font-family: var(--font-ui); font-size: var(--t-ui); } .agents-footer ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); max-width: none; margin: 0; padding: 0; list-style: none; } .agents-footer li { margin: 0; } /* FIX-AGENT SG-11: the human footer's statement that the examples are invented and the results synthetic */ .agents-statement { margin: var(--space-3) 0 0; color: var(--chalk-2); } @media (min-width: 768px) { .agents-header, .agents-footer, main { padding-inline: var(--margin); } h1 { font-size: var(--t-h1); } }