@misoto22/folio 0.0.0 → 0.17.0

package/dist/tokens/brand.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokens/brand.ts"],"sourcesContent":["/**\n * Brand colour mirrors for surfaces that cannot read CSS custom properties —\n * OpenGraph/Satori cards, build-time scripts, `theme-color` in a web manifest,\n * a canvas.\n *\n * The RUNTIME theme lives in `styles/tokens.css` (`:root` + `[data-mode=\"dark\"]`)\n * and that is the single place to recolour the system. These literals mirror\n * specific tokens; `brand.test.ts` parses the CSS and fails if the two drift,\n * so this file cannot quietly fall behind the thing it mirrors.\n */\nexport const BRAND = {\n  /** = light --paper. The page ground. */\n  paper: '#ffffff',\n  /** = dark --paper. The dark viewport's `theme-color`. */\n  paperDark: '#0d0d0d',\n  /** = light --paper-2. One step off the ground. */\n  paperElevated: '#f7f7f5',\n  /** = light --ink. The mark. */\n  ink: '#101010',\n  /** = dark --ink. */\n  inkDark: '#f4f4f2',\n  /** = light --ink-2. Body copy that is not the mark. */\n  body: '#4a4a4a',\n  /** = light --ink-3-aa. The lightest text step that still clears AA on paper. */\n  muted: '#5c5c5c',\n  /** = light --stone. The fill under a skeleton, a bar, a quiet plate. */\n  stone: '#f2f1ee',\n  /** = light --rule. Hairline. */\n  rule: '#edebe6',\n  /** = light --rule-2. Edge. */\n  ruleStrong: '#dbdbd6',\n  /** = --feature-surface. The one reversed plate. */\n  feature: '#262626',\n  /** = --on-dark. Type over a photograph — a dark ground in BOTH themes. */\n  onDark: '#fbfbfa',\n  /** Byline weight over a photograph. */\n  onDarkMuted: 'rgba(251,251,250,0.82)',\n  /** = --photo-scrim, as an \"r, g, b\" tuple for a gradient. */\n  scrimRgb: '16, 16, 16',\n  /** = light --ok / --warn / --danger. The only chroma in the system. */\n  success: '#3d6b34',\n  warning: '#8a5a00',\n  danger: '#a83214',\n} as const\n\nexport type BrandColor = keyof typeof BRAND\n"],"mappings":"AAUO,MAAM,QAAQ;AAAA;AAAA,EAEnB,OAAO;AAAA;AAAA,EAEP,WAAW;AAAA;AAAA,EAEX,eAAe;AAAA;AAAA,EAEf,KAAK;AAAA;AAAA,EAEL,SAAS;AAAA;AAAA,EAET,MAAM;AAAA;AAAA,EAEN,OAAO;AAAA;AAAA,EAEP,OAAO;AAAA;AAAA,EAEP,MAAM;AAAA;AAAA,EAEN,YAAY;AAAA;AAAA,EAEZ,SAAS;AAAA;AAAA,EAET,QAAQ;AAAA;AAAA,EAER,aAAa;AAAA;AAAA,EAEb,UAAU;AAAA;AAAA,EAEV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;","names":[]}

package/dist/tokens.css

@@ -0,0 +1,666 @@
+/* ==========================================================================
+   WHITE RESET — design tokens
+   --------------------------------------------------------------------------
+   The portable layer of @misoto22/folio: plain CSS custom properties, no
+   Tailwind dependency. Import this alone and any consumer — a Tailwind app, a
+   plain-CSS app, a preview sandbox — gets the same look.
+
+   A pure-white monochrome system for software, writing, and photography. The
+   ground is paper-white, the mark is near-black, and the only chroma left in
+   the file is status, which is bound to state and never to brand.
+
+   Two blocks, and only two: the primitives below, and the semantic aliases in
+   `semantic.css` that name what a primitive is FOR. A component never reads a
+   primitive directly — it reads the alias — so recolouring the system is one
+   edit here rather than a sweep through every component.
+
+   Hex mirrors for surfaces that cannot read CSS custom properties (OpenGraph
+   cards, build scripts, `theme-color`) live in `tokens/brand.ts`, and a test
+   holds the two in sync.
+   ========================================================================== */
+
+/* `[data-surface='paper']` is the surface axis's own default, WRITTEN. Every
+   other axis value has a name; this one was "leave the attribute off", which
+   works exactly once — at the root. A subtree cannot say "the White Reset"
+   inside a page whose root is warm, so five theme specimens on one page each
+   inherited whichever surface the reader had applied to the site and every one
+   of them showed the same colours. Naming the default is what lets a subtree
+   opt out of an ancestor's theme rather than only into a different one.
+
+   It sits on the ROOT's own rule rather than restating the values, so there is
+   nothing here to drift. Specificity ties with `[data-surface='warm']` in
+   themes.css and loses on source order, which is correct: a wrapper that says
+   `warm` does not match this selector at all. */
+:root,
+[data-mode='light'],
+[data-surface='paper'],
+[data-rules='hairline'] {
+  --paper: #ffffff;
+  --paper-2: #f7f7f5;
+  --bar: var(--stone);
+  --bar-2: var(--stone);
+
+  /* Two text steps and nothing lighter. --ink-3-aa is the floor — it clears
+     AA on white at 6.7:1, and every step above it is darker. --ink-3 is the
+     same weight expressed as alpha, for rules and washes that must sit over a
+     photograph as well as over paper. */
+  --ink: #101010;
+  --ink-2: #4a4a4a;
+  --ink-3: rgba(16, 16, 16, 0.55);
+  --ink-3-aa: #5c5c5c;
+
+  /* The second editorial voice is not a hue — it is one more neutral step,
+     sitting between --ink and --ink-2, so a byline separates from body copy
+     without introducing colour. */
+  --forest: #3a3a3a;
+  --mist: var(--stone);
+  --stone: #f2f1ee;
+
+  /* Monochrome collapses the pointer onto the mark: the accent IS ink. What
+     used to be carried by hue is now carried by weight, rule and reversal —
+     an ink pill, an ink underline, an ink-filled plate. */
+  --clay: var(--ink);
+  --clay-ink: var(--clay);
+
+  /* The one reversed plate, and the one place the ramp needs a tenth step.
+     Set to var(--ink) it was the page's darkest possible mark used as a field,
+     which on a white page reads as a hole punched through it rather than as a
+     panel. Two steps lighter keeps the reversal — 15.1:1 for paper-white type
+     on it — and matches the dark side. */
+  --feature-surface: #262626;
+  --on-feature: var(--paper);
+  --focus-on-feature: var(--on-feature);
+  --on-photo: var(--paper);
+  --photo-caption-surface: var(--ink);
+  --photo-shadow: 0 1px 6px rgb(0 0 0 / 0.72);
+
+  /* Three rule weights, because a monochrome page has no colour left to
+     separate one band from the next: hairline, edge, and hard. */
+  --rule: #edebe6;
+  --rule-2: #dbdbd6;
+  --rule-hard: var(--ink);
+
+  /* Historic role names, kept so a consumer written against the previous
+     palette keeps resolving. Their hue is now ink; the role remains "the
+     single editorial pointer". */
+  --red: var(--clay);
+  --red-ink: var(--clay);
+  --red-soft: rgba(16, 16, 16, 0.07);
+  --on-red: var(--paper);
+
+  --shadow-offset: var(--clay);
+
+  /* ─── Data ───────────────────────────────────────────────────────────────
+     The series ramp a chart paints with, and the one place the White Reset
+     has to answer a question a monochrome system would rather not be asked:
+     how do you tell six lines apart with no hue left to spend?
+
+     The answer is that hue was never the primary carrier here — TEXTURE is.
+     Every chart primitive ships a fill variant (hatched, dotted, lines,
+     stripped, duotone) and the series ramp below is the SECOND encoding, not
+     the first. That ordering is what makes the set legible to a colour-blind
+     reader, in greyscale print, and under forced-colours, none of which a
+     hue-first categorical palette survives.
+
+     The eight steps are interleaved rather than sequential — light, dark,
+     light, dark — so neighbouring series sit as far apart on the lightness
+     ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100)
+     against a 15 floor, and every step clears 3:1 on its own ground.
+
+     Two checks a chromatic palette would pass fail here BY DESIGN, and are
+     stated rather than hidden: the chroma floor (these are greys) and the
+     lightness band (--series-1 is ink, and ink is the darkest mark the system
+     has). Texture plus a legend is the relief, and both are mandatory —
+     `Chart.Legend` is not optional above one series.
+
+     A consumer who genuinely needs hue does not hand-pick hexes: it sets
+     `data-chart-palette="chroma"` (see themes.css), which re-points these
+     eight names onto a categorical palette validated against both grounds —
+     or `"accent"`, which ladders the same eight names out of `--clay` when
+     what the charts have to carry is a brand rather than eight categories. */
+  --series-1: #101010;
+  --series-2: #565656;
+  --series-3: #202020;
+  --series-4: #6a6a6a;
+  --series-5: #313131;
+  --series-6: #7e7e7e;
+  --series-7: #434343;
+  --series-8: #939393;
+  /* The empty ground a part-of-whole mark is drawn against — the unfilled
+     remainder of a radial bar, the track behind a gauge. Not --rule: a track
+     is a field, and a field that reads as a hairline disappears at radius. */
+  --series-track: #eeece7;
+
+  /* How solid a translucent mark is, and the one pair of tokens in the file
+     that is NOT the same number on both grounds.
+
+     A wash is `ink at N% over the page`. On paper, ink at 14% lands around
+     #e3e3e3 — a legible, recessive band. Run the same 14% the other way and
+     paper-white over near-black lands around #2c2c2c, which on a #0d0d0d
+     ground is not a band, it is nothing. Perceived lightness is not linear and
+     the two directions do not meet in the middle, so a single number cannot
+     serve both: the dark side needs roughly twice the alpha to read as the
+     same weight of mark. Every area fill, texture and flow band in the chart
+     package reads these rather than carrying its own literal. */
+  --chart-fill: 0.14;
+  --chart-texture: 0.42;
+
+  color-scheme: light;
+}
+
+/* The dark half of the same reset. Without it, `paper` inside a dark page
+   would match the light rule above and light up one specimen in the middle of
+   a dark gallery. */
+[data-mode='dark'],
+/* BOTH forms, the way every dark rule in `themes.css` is written. The compound
+   is not the same selector as the descendant, and the compound is the one that
+   matters most: an app puts `data-mode` and its theme axes on the SAME element
+   — `<html data-mode="dark" data-surface="paper">` — where a descendant
+   selector matches nothing. Written descendant-only, every dark page took the
+   light rule above and painted light ink on a dark ground. */
+[data-mode='dark'][data-surface='paper'],
+[data-mode='dark'] [data-surface='paper'],
+[data-mode='dark'][data-rules='hairline'],
+[data-mode='dark'] [data-rules='hairline'] {
+  --paper: #0d0d0d;
+  --paper-2: #161616;
+  --bar: var(--stone);
+  --bar-2: var(--stone);
+
+  --ink: #f4f4f2;
+  --ink-2: #b4b4b0;
+  --ink-3: rgba(244, 244, 242, 0.55);
+  --ink-3-aa: #9a9a96;
+
+  --forest: #c9c9c5;
+  --mist: var(--stone);
+  --stone: #1f1f1f;
+  --clay: var(--ink);
+  --clay-ink: var(--clay);
+  --feature-surface: #1a1a1a;
+  --on-feature: var(--ink);
+  --focus-on-feature: var(--on-feature);
+
+  /* A photograph is a dark ground in both themes, so this one does not swap
+     with --paper. It sits a shade off pure white because the light side has
+     already spent pure white on the page ground, and one hex serves one role. */
+  --on-photo: #fbfbfa;
+  --photo-caption-surface: var(--paper);
+  --photo-shadow: 0 1px 6px rgb(0 0 0 / 0.72);
+
+  --rule: rgba(244, 244, 242, 0.14);
+  --rule-2: rgba(244, 244, 242, 0.26);
+  --rule-hard: var(--ink);
+
+  --red: var(--clay);
+  --red-ink: var(--clay);
+  --red-soft: rgba(244, 244, 242, 0.12);
+  --on-red: var(--paper);
+
+  --shadow-offset: var(--clay);
+
+  --series-1: #f4f4f2;
+  --series-2: #9b9b9b;
+  --series-3: #dddddd;
+  --series-4: #868686;
+  --series-5: #c7c7c7;
+  --series-6: #727272;
+  --series-7: #b0b0b0;
+  --series-8: #636363;
+  --series-track: #232323;
+
+  --chart-fill: 0.3;
+  --chart-texture: 0.72;
+
+  color-scheme: dark;
+}
+
+:root {
+  /* ─── Type ───────────────────────────────────────────────────────────────
+     Three faces and their CJK companions.
+
+     EVERY `var()` here carries a fallback, and that is load-bearing rather than
+     tidy. A `var(--font-hanken)` with no fallback, in a host that does not
+     define `--font-hanken`, is invalid at computed-value time — and IACVT does
+     not skip the one term, it discards the WHOLE declaration. So the entire
+     stack collapsed to nothing and every surface rendered in the platform's
+     system font. It worked inside the site, where next/font defines those
+     names, and failed everywhere else: for a package whose whole purpose is to
+     render the same on both sides, that is the worst possible bug.
+
+     With the fallback, a host that loads the faces itself (next/font, a CDN)
+     sets `--font-*` and wins; a host that does not falls through to the literal
+     family name, which is exactly the name `fonts.css` declares its vendored
+     @font-face rules under.
+
+     The CJK stacks deliberately end WITHOUT a generic family. They are spliced
+     into the middle of the three stacks above, and a generic in the middle
+     terminates a font stack — everything listed after it is unreachable. */
+  --sans: var(--font-hanken, 'Hanken Grotesk'), var(--cjk-sans), 'Helvetica Neue', Arial, sans-serif;
+  --serif: var(--font-newsreader, 'Newsreader'), var(--cjk-serif), Georgia, serif;
+  --mono: var(--font-plex-mono, 'IBM Plex Mono'), var(--cjk-sans), ui-monospace, SFMono-Regular, Menlo,
+    monospace;
+
+  --cjk-serif: var(--font-noto-serif-sc, 'Noto Serif SC'), 'Source Han Serif SC', 'Songti SC', STSong,
+    SimSun;
+  --cjk-sans: var(--font-noto-sans-sc, 'Noto Sans SC'), 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei';
+
+  --lh-cjk: 1.8;
+  --ls-cjk: 0;
+
+  /* Heading scale — the single ladder every surface climbs. Five steps, each
+     fluid between a phone and the 1288px page, and nothing sits above
+     --fs-title: a page has exactly one thing larger than its own records.
+
+     Steps sit close together by design — the ladder separates records of the
+     same kind, not a heading from its own sub-heading. Two headings that nest
+     must skip a step: --fs-lead over --fs-sub reads as a hierarchy (1.33),
+     --fs-lead over --fs-heading does not (1.14). */
+  /* ─── The fluid base ──────────────────────────────────────────────────────
+     Every fluid step below is one percent of THIS, not of the viewport.
+
+     The default is `1vw`, which is what a page wants. A bounded frame — a
+     device preview, a documentation canvas, an embedded console — overrides it
+     to `1cqi` and declares itself a `container`, and the whole ramp re-bases
+     onto the frame's width. Without the seam a 390px preview inside a 1440px
+     window renders 54px headings and 64px gutters, which is not what a 390px
+     screen looks like and is exactly the bug this replaces.
+
+     The ramp itself is declared once, below, for BOTH `:root` and a frame —
+     rather than composed here and inherited. A custom property substitutes
+     `var()` where it is DECLARED, so a ramp written only on `:root` bakes in
+     `1vw` and a deeper `--fluid` never reaches it. */
+  --fluid: 1vw;
+
+  --maxw: 1288px;
+  --col: 8.3333%;
+  --row: 52px;
+
+}
+
+/* Display voice. How loud a page's display type and labels are, read by the
+   website compositions instead of literal values so the voice axis in
+   `themes.css` can quiet them. Declared on the root only — never on a fluid
+   frame — so an axis set on an ancestor is not reset inside one. */
+:root {
+  --display-scale: 1;
+  --display-weight: 300;
+  --label-font: var(--font-mono);
+  --label-case: uppercase;
+  --label-tracking-scale: 1;
+}
+
+/* The fluid ramp, computed wherever `--fluid` is set.
+   `[data-fluid-frame]` must sit INSIDE the element carrying `container-type`:
+   a container query unit resolves against an ANCESTOR container, never against
+   the element that declares the container itself. */
+:root,
+[data-fluid-frame] {
+  /* `--display-scale` is the voice axis's lever on the two display steps; at
+     1 they are the ramp as drawn. */
+  --fs-title: calc(clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem) * var(--display-scale, 1)); /* page h1        40 → 54px */
+  --fs-lead: calc(clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem) * var(--display-scale, 1)); /* band heading   30 → 42px */
+  --fs-heading: clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem); /* record title   24 → 29px */
+  --fs-sub: clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem); /* card sub-head  21 → 25px */
+  --fs-item: clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem); /* in-card title  18 → 20px */
+
+  --pad: clamp(18px, calc(4.4 * var(--fluid)), 64px);
+  --sec: clamp(54px, calc(7 * var(--fluid)), 96px);
+  --sec-tight: clamp(40px, calc(5 * var(--fluid)), 68px);
+}
+
+/* ─── Radius ───────────────────────────────────────────────────────────────
+   One ladder, and a single factor that moves the whole of it.
+
+   The four steps used to be four independent numbers, and a radius theme
+   re-typed all four. That is how the ladder went out of proportion with
+   itself: nothing held the steps in a fixed ratio, so a corner nested inside
+   another corner matched it at the one setting somebody checked and at no
+   other. Here the steps are derived, the factor is the only thing a theme
+   sets, and the proportions are the same at every setting by construction.
+
+   THE NESTING LAW. Two rounded edges separated by a gap of `p` are concentric
+   only when the inner radius is the outer minus `p`. Anything else pinches at
+   the corner — the gap narrows as it turns, which is the mismatch you see
+   before you can name it. Both directions are named below (`--radius-row`
+   subtracts, `--radius-frame` adds) so a surface never has to guess.
+
+   THE PILL IS ON THE LADDER, which is a change. It used to be exempt, on the
+   grounds that a pill is a shape rather than a corner. It is — but a square
+   theme that left every button a capsule was not a square theme, and that
+   exemption is what bought it. A true CIRCLE is still geometry and still
+   `rounded-full`: an avatar, a status dot, a spinner, a radio (which is round
+   so it cannot be mistaken for a checkbox).
+
+   Declared for `:root` AND for `[data-radius]`, rather than composed once and
+   inherited. A custom property substitutes `var()` where it is DECLARED, so a
+   ladder written only on `:root` bakes in the root's factor and a themed
+   subtree deeper in the page never reaches it — the same trap `--fluid` above
+   documents, and the reason five themes can share the themes page at all. */
+:root,
+[data-radius] {
+  --radius-factor: 1;
+  /* Clamps the factor at 1 for the ADDING direction only. A frame's air is a
+     fixed number of pixels, so `--radius-lg + 16px` would leave a rounded
+     frame around a square panel the moment the theme went square; gated, it
+     collapses to nothing along with everything else. */
+  --radius-gate: min(1, var(--radius-factor));
+
+  /* The numbers are the ones the rest of the industry settled on, and that is
+     the argument for them: 8px for a control, 12px for a panel, and 4/6 for the
+     small marks inside one. Tailwind's own scale, shadcn's `--radius` ± 2 and
+     ± 4, Radix Themes' steps 3 and 4, and Material's `xs`/`sm`/`md` all agree
+     within a pixel of this. The previous 2/4/6/10 was a step tighter than any
+     of them, which is what made a card read as a rectangle with the corners
+     shaved rather than as a rounded panel. */
+  --radius-xs: calc(4px * var(--radius-factor)); /* a mark inside a tight box */
+  --radius-sm: calc(6px * var(--radius-factor)); /* chips, keys, list rows */
+  --radius: calc(8px * var(--radius-factor)); /* inputs, code, small plates */
+  --radius-lg: calc(12px * var(--radius-factor)); /* cards, dialogs, menu panels */
+  --radius-pill: calc(999px * var(--radius-factor)); /* capsules and counters */
+
+  /* The nesting law, applied to the two insets this system actually uses. */
+  --radius-row: max(0px, calc(var(--radius-lg) - 0.375rem)); /* a row in a 6px-padded panel */
+  --radius-frame: calc(var(--radius-lg) + 1rem * var(--radius-gate)); /* a frame 16px outside a panel */
+}
+
+/* The density axis's own default, named — and on a rule that holds NOTHING
+   but density. It was on the block above, which also carries the status
+   colours, the floating surfaces and the motion steps: every element that
+   said `data-density="comfortable"` therefore re-declared the whole LIGHT
+   palette on itself, and in dark mode every example canvas on the site
+   painted a light --danger on a dark ground. A neutral value may only
+   restate the axis it belongs to. */
+:root,
+[data-density='comfortable'] {
+  /* ─── Density ────────────────────────────────────────────────────────────
+     The second theming axis, and the only other one. Light/dark swaps colour;
+     density swaps the size of anything a finger or a pointer has to hit.
+
+     `comfortable` is the default, and 44px is not an arbitrary number: it is
+     the pointer-target size WCAG 2.5.5 (AAA) asks for.
+
+     `compact` is for a dense desktop tool driven by a mouse — a data grid, an
+     admin console — and it is a real trade, stated rather than hidden. At 36px
+     it still clears WCAG 2.5.8 (AA, 24px) with room to spare, and no longer
+     meets 2.5.5. Do not put it on a page a phone will open.
+
+     Set it on any container: `<div data-density="compact">`. Controls read
+     these tokens, so the whole subtree changes together and nothing has to be
+     told twice. */
+  --control-h-sm: 2.25rem; /* 36px */
+  --control-h-md: 2.75rem; /* 44px — WCAG 2.5.5 */
+  --control-h-lg: 3rem; /* 48px */
+  --control-px-sm: 1rem;
+  --control-px-md: 1.5rem;
+  --control-px-lg: 1.75rem;
+  /* The vertical padding is part of the axis too, and has to be: a control
+     whose padding alone exceeds the compact height never shrinks, because
+     `min-height` is a floor and not a ceiling. */
+  --control-py-sm: 0.5rem;
+  --control-py-md: 0.75rem;
+  --control-py-lg: 0.75rem;
+  /* And so is the LEADING, which is the term that guard was missing.
+     `min-height` is a floor, and what has to stay under it is the whole box:
+     the line, the padding and the border. The padding was scaled and the line
+     was left inheriting the body's 1.6 — so `sm` measured 20.8 + 16 + 2 = 38.8
+     against a 36px token, `md` 46 against 44 and `lg` 50 against 48. Every
+     text button in the system was two to three pixels taller than the number
+     documenting it, and the floor never bound because the box had already
+     cleared it.
+
+     One value on both densities: the font sizes do not move with density, only
+     the padding and the heights do, so this does not have to. It is not a
+     reading leading — a control's label is one line, and 1.2 leaves every size
+     at every density inside its own height with room to spare. The test in
+     `tokens.test.ts` is what keeps that true. */
+  --control-lh: 1.2;
+  --control-gap: 0.625rem;
+  /* Text inputs are measured separately: they are read as much as they are
+     hit, so their padding tracks the type rather than the target. */
+  --field-px: 0.875rem;
+  --field-py: 0.625rem;
+
+  /* A table's own row padding. Separate from the control scale because a table
+     row is neither a control nor a field — it is a line of text with a rule
+     under it, and it tightens on its own axis. */
+  --table-pad-y: 0.875rem;
+  /* `0px`, not `0`. The cell rule adds to this inside a calc, and a unitless
+     zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole
+     declaration is dropped and every column loses its gutter in silence. */
+  --table-pad-x: 0px;
+}
+
+:root {
+
+  /* ─── Sidebar ────────────────────────────────────────────────────────────
+     The two widths a navigation rail has, and the reason they are tokens
+     rather than numbers inside the component: an application shell has to
+     reserve exactly this much beside its content, and a shell that hard-codes
+     17rem while the rail believes something else is a gap or an overlap that
+     appears only at one window size. Both sides read the same name.
+
+     `--sidebar-w-icon` is what is left when the rail collapses to icons. It is
+     `--control-h-md` plus the rail's own padding, so a 44px pointer target
+     still fits inside it at comfortable density — a collapsed rail whose rows
+     are too small to hit is a rail nobody can use in the state it spends most
+     of its life in. */
+  --sidebar-w: 16rem;
+  --sidebar-w-icon: 3.5rem;
+
+  /* ─── Bar ────────────────────────────────────────────────────────────────
+     How tall the band across the top of an application is — the masthead, and
+     the head of the rail beside it, which has to line up with it or the two
+     rules meeting at the corner are two different rules.
+
+     Derived, not typed. A bar is a row of controls and the air around them, so
+     it is the control it seats plus six pixels above and below — the same
+     twelve `--sidebar-w-icon` adds to a rail's collapsed width, for the same
+     reason.
+
+     WHICH control depends on the pointer, and that is the whole of the second
+     block. A bar is chrome: its controls are `sm`, the density this system
+     documents as a deliberate below-the-floor size for a mouse. A finger is
+     not a mouse, so on a coarse pointer they grow to the 44px target WCAG
+     2.5.5 asks for, and the bar has to grow with them or it clips what it
+     seats. Sizing it from `--control-h-md` on both is what made it too tall:
+     56px of bar around 39px of search field, holding room for a target that is
+     not on screen when a mouse is.
+
+     48px comfortable / 42px compact with a pointer, 56px / 48px with a finger.
+     A bar cannot be set to a height its own controls do not fit in.
+
+     It was five literals before, in two packages, and they did not agree:
+     `AppShell` said `h-14` and the documentation site said `h-16`, so the same
+     role was 56px in the component this system ships and 64px on the site
+     documenting it. `--scroll-offset` in `semantic.css` is a sixth, and the
+     one that shows why this matters — it is "a masthead plus a line of air"
+     and was written as `88px`, a number derived by hand from whichever of the
+     two answers its author had on screen. It now derives from this. */
+  --bar-h: calc(var(--control-h-sm) + 0.75rem);
+
+  /* ─── Floating surfaces ──────────────────────────────────────────────────
+     What a panel that FLOATS fills with, and what it does to whatever is
+     behind it. A dialog, a menu, a popover, a palette — the surfaces that sit
+     OVER the page rather than in it, and therefore the only ones with anything
+     behind them to treat.
+
+     Both default to the plain surface and cost nothing. `--panel-filter: none`
+     matters more than it looks: a `backdrop-filter` of any value, `blur(0px)`
+     included, promotes its element to its own compositing layer and makes it a
+     containing block for fixed descendants. Paid on every menu in the system,
+     for a theme most readers will never turn on. `none` is not a blur of zero;
+     it is no filter at all.
+
+     A card is deliberately NOT on this list. It sits on the page ground, so
+     there is nothing behind it to see through, and a card that blurs its own
+     background is drawing an effect rather than an object. */
+  --panel-bg: var(--paper);
+  --panel-border: var(--rule-2);
+  --panel-filter: none;
+
+  /* The offset under a floating panel, and it does not break Law 2: the law
+     says a box-shadow is never BLURRED, not that there is never one. This is
+     the same hard-offset idiom as `--lift`, in the rule colour rather than the
+     accent — every menu in the system wearing a clay drop shadow would be a
+     louder claim than "this sits above the page".
+     Two steps, because one reads as a second border: a firm edge just below the
+     panel and a softer one below that is a stack seen from the front, which is
+     the flattest way to say depth without drawing light. */
+  --panel-lift: 0 2px 0 0 var(--rule-2), 0 5px 0 -1px var(--rule);
+
+  /* ─── Motion ─── */
+  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
+  --fast: 0.13s;
+  --mid: 0.22s;
+  --slow: 0.34s;
+
+  /* ─── Stacking ─── seven ranks, named for what sits at each.
+     Every overlay in the package portals to document.body, so all of them are
+     siblings in the ROOT stacking context and the rank is the whole of the
+     decision — there is no ancestor left to nest one inside another.
+
+     Read it as a sentence: a sticky header clears the page, a drawer clears the
+     header, a scrim covers both, a modal sits on its scrim, an ANCHORED panel
+     clears the modal it was opened from, and a toast clears everything because
+     it is the only rank that has to survive a modal asking a question.
+
+     --z-anchored is the one that is not obvious, and it is the one that was
+     wrong. A popover, a menu or a select listbox is opened FROM something, and
+     the surface it is most often opened from is a modal — a select inside a
+     modal form is one of the most ordinary shapes in an application. Ranked
+     below the modal, as it was, the panel is painted behind the very dialog
+     that summoned it. The rank it replaced, --z-palette, was read by nothing:
+     a command palette is a Dialog, so it lands at --z-modal, and its order
+     against a second modal is settled by document order — which is the right
+     answer, because it moves a scrim and its panel together. */
+  --z-rule: 1;
+  --z-sticky: 10;
+  --z-drawer: 100;
+  --z-scrim: 200;
+  --z-modal: 210;
+  --z-anchored: 220;
+  --z-toast: 300;
+
+  /* ─── Focus ─── */
+  --focus: var(--red);
+  --focus-w: 2px;
+  --focus-off: 3px;
+
+  /* ─── Icons ─── three sizes, and no weight: a Remix Icon glyph is a filled path. */
+  --ico-s: 14px;
+  --ico-m: 16px;
+  --ico-l: 20px;
+
+  /* ─── Status ─── the only chroma in the system, and it is bound to state. */
+  --ok: #3d6b34;
+  --ok-soft: rgba(61, 107, 52, 0.13);
+  --warn: #8a5a00;
+  --warn-soft: rgba(138, 90, 0, 0.13);
+  --danger: #a83214;
+  --danger-soft: rgba(168, 50, 20, 0.14);
+  --scrim: color-mix(in srgb, var(--ink) 62%, transparent);
+}
+
+[data-mode='dark'] {
+  --ok: #84b47b;
+  --ok-soft: rgba(132, 180, 123, 0.16);
+  --warn: #d9a55d;
+  --warn-soft: rgba(217, 165, 93, 0.16);
+  --danger: #ee8b68;
+  --danger-soft: rgba(238, 139, 104, 0.16);
+  --scrim: color-mix(in srgb, #000 72%, transparent);
+}
+
+/* The bar, on a finger.
+ *
+ * A bar's controls are `sm` — the size this system documents as a deliberate
+ * below-the-floor density for a mouse — and a coarse pointer grows them to the
+ * 44px target WCAG 2.5.5 asks for. The bar grows with them, or it clips what it
+ * seats. Declared on the ROOT like the base value, so the substitution argument
+ * above still holds: one answer, resolved once, inherited by a rail that pins
+ * its own density.
+ */
+@media (pointer: coarse) {
+  :root,
+  [data-mode='light'],
+  [data-surface='paper'],
+  [data-rules='hairline'] {
+    --bar-h: calc(var(--control-h-md) + 0.75rem);
+  }
+}
+
+[data-density='compact'] {
+  --control-h-sm: 1.875rem; /* 30px */
+  --control-h-md: 2.25rem; /* 36px — clears WCAG 2.5.8, not 2.5.5 */
+  --control-h-lg: 2.5rem; /* 40px */
+  --control-px-sm: 0.75rem;
+  --control-px-md: 1rem;
+  --control-px-lg: 1.25rem;
+  --control-py-sm: 0.25rem;
+  --control-py-md: 0.375rem;
+  --control-py-lg: 0.5rem;
+  --control-gap: 0.5rem;
+  --field-px: 0.625rem;
+  --field-py: 0.375rem;
+  --table-pad-y: 0.5rem;
+}
+
+/* A table can be tightened on its own, without the whole subtree going
+   compact — a dashboard often wants a dense grid inside comfortable chrome. */
+[data-table-density='compact'] {
+  --table-pad-y: 0.5rem;
+}
+
+/* ==========================================================================
+   FORCED COLOURS
+   --------------------------------------------------------------------------
+   What a chart does when the reader has taken the palette away.
+
+   Windows High Contrast (and any forced-colours mode) remaps CSS colours to a
+   small set of system keywords. It does that for HTML automatically — a
+   tooltip's border and ground are handled without us — but it does NOT reach
+   inside SVG: Chrome and Edge ship `forced-color-adjust: none` on SVG by
+   default, and a gradient paint server is not something a browser can remap
+   even where it tries. So a chart that says nothing here keeps painting its
+   greys onto a black ground, and the reader's setting is quietly ignored.
+
+   The eight-step ramp collapses to one colour, because forced-colours has one
+   colour to give. That would be fatal to a system where hue carried identity,
+   and is survivable here for the reason the ramp is second in the first place:
+   TEXTURE is the primary encoding, and a hatch is still a hatch when every
+   series is CanvasText. This block is where that design decision gets cashed.
+
+   Scoped to the chart tokens on purpose. Restyling every component's rules and
+   surfaces from here would be a system-wide change wearing a chart fix.
+   ========================================================================== */
+
+@media (forced-colors: active) {
+  :root,
+  [data-mode='light'],
+  [data-mode='dark'] {
+    --series-1: CanvasText;
+    --series-2: CanvasText;
+    --series-3: CanvasText;
+    --series-4: CanvasText;
+    --series-5: CanvasText;
+    --series-6: CanvasText;
+    --series-7: CanvasText;
+    --series-8: CanvasText;
+    --series-track: Canvas;
+
+    --chart-surface: Canvas;
+    --chart-grid: GrayText;
+    --chart-cursor: CanvasText;
+    --chart-axis: CanvasText;
+    --chart-track: Canvas;
+    --chart-pattern: GrayText;
+
+    /* Textures go to full strength — they are now the only thing separating
+       one series from another. The wash stays under half so two overlapping
+       areas still read as two. */
+    --chart-fill: 0.45;
+    --chart-texture: 1;
+  }
+}