/* Design tokens. Every color, space, size and face comes from here; a component never hard-codes
   one (docs/frontend/frontend-conventions.md). The values are the language of the designer's handoff of
   7 Oct 2026 (docs/decisions.md, 7 Oct 2026, "The look"; the handoff's section 3 and the Spec's
   sheet 1a), which amends the 30 Sep snapshot's: a ground under a white shell, one well per page cut
   through the shell to the ground with paper at its floor, chips in three forms, and no accent.
   Instrument Sans for anything read, JetBrains Mono for labels, chips, numbers and codes. The faces
   themselves are declared in fonts.css.

   **The corners rule.** Square is cut from the ground: the page's edge, a well's rim and its paper,
   a tab's dot, a chip. Round rests on it: the shell, a nav pill, a button, the meter. A radius below
   is one or the other, and a component that needs a third is asking for a token that is not in the
   language: the 7 Oct handoff's third, the well's chamfered corner, was retired on 12 Oct 2026
   (Reed: "no chamfered corners"; docs/decisions.md, 14 Oct 2026, "The browser crates", (6)). */
:root {
  /* ---- colour: the surfaces ---- */
  /* The ground: square, under everything, and showing wherever the page is cut: the top line, a
     well's rim, the tray. The one strong value; there is no accent. */
  --color-ground: #17181a;
  /* The shell: the page, resting on the ground, inset and rounded. */
  --color-shell: #ffffff;
  /* The two papers at a well's floor. The lattice for anything drawn (a design, a candidate, a 3D
     view), the ruled sheet for anything written (a list, the log, a roster); their grid and their
     rules in one hairline colour.

     **In light both papers are the shell's white** (Reed, 8 Oct 2026, after the second look at the
     preview: "the creamy beige paper colour, wherever used — the orders list, the order tabs'
     wells, the customer's well — should just be white"). The two were #f7f8f9 and #fbfbfc, 1.06
     and 1.03 against the shell, which is the tone he read as creamy. What makes a well a well is
     therefore its rim and the inset shadow, not a change of tone — which is
     already how the dark theme reads (the table below), so light and dark now say it the same way.
     The grid and the rules are drawn in `--color-rule` and are untouched: a lattice is still a
     lattice and a ruled sheet still has its rules. Dark keeps its two derived greys. */
  --color-paper-lattice: #ffffff;
  --color-paper-ruled: #ffffff;
  --color-rule: #e4e6e9;
  /* What is written on the ground: the mark, the person, a staged chip's words; quieter, the wings
     not chosen and the lip's counts; and the two greys a staged chip is made of in the tray. The
     ground is the same in both themes, so these are too. */
  --color-on-ground: #ffffff;
  --color-on-ground-muted: #9aa0a6;
  --color-on-ground-raised: #2a2c30;
  --color-on-ground-kind: #3a3d42;
  /* The filled pill (pill.css): the ground, with the ground's inks on it. In dark it takes the ink,
     with the shell's colour on it, as a filled chip does (the dark theme, below). */
  --color-pill: var(--color-ground);
  --color-pill-ink: var(--color-on-ground);
  --color-pill-muted: var(--color-on-ground-muted);
  /* A white control on the ground, under the pointer. */
  --color-on-ground-hover: #dcdde0;

  /* ---- colour: the inks, and the roles every component already reads ---- */
  /* Ink is #141414 only; metadata (who, when, a column's head) is #444 and nothing else is. */
  --color-ink: #141414;
  --color-meta: #444444;
  /* Muted: the shell's secondary words, a breadcrumb, a tab not chosen, a quiet line under a title
     (the Spec draws them #5c6066, 6.3:1 on the shell). */
  --color-muted: #5c6066;
  /* A hairline on the shell. */
  --color-line: #e1e3e6;
  /* **The edge of a control that takes something**: a text field, a select, the box a comment is
     written in. A hairline is enough to set a panel off from the shell behind it, but the boundary
     of a control has to be *seen* — WCAG 1.4.11 asks 3:1 against what is behind it, and
     `--color-line` is 1.29:1 on the white shell. This is 3.3:1 there and 3.5:1 on the dark shell,
     and it is the one boundary in the set drawn darker than the hairline. */
  --color-field-line: #8a8d91;
  /* The page's ink, kept under its own name, for what sits on the ground but is drawn in the
     shell's colours (the current wing's pill): inside `.on-ground` (base.css) `--color-ink` is the
     ground's white, and this, computed here on the root, is still the shell's. */
  --color-shell-ink: var(--color-ink);
  /* The old roles, mapped onto the new values so nothing breaks before it is restyled: the page's
     background was #f6f6f3 under white surfaces (30 Sep); now the page is the shell, and a field, a
     panel or a dialog is shell-coloured on a hairline. */
  --color-bg: var(--color-shell);
  --color-surface: var(--color-shell);

  /* There is no accent colour. The primary control is ink-filled and lettered in the shell's colour,
     the secondary an ink hairline, the tertiary underlined text; so the accent, its hover and the
     ink on top of it are the ink roles under the names every component already reads. The Spec
     fills a primary control with the ground (#17181a) where ours fills it with ink (#141414): the
     two are 1.1:1 apart in light, and in dark the ground on the dark shell would vanish, so the
     fill stays the ink and follows the theme. */
  --color-accent: var(--color-ink);
  --color-accent-hover: var(--color-on-ground-raised);
  --color-accent-ink: var(--color-bg);

  /* Danger is the one role with a colour of its own, because the handoff never shows one and a
     refusal that looks like any other sentence is missed. A brick red, 6.5:1 on the shell (AA for
     small text), deep enough to sit beside ink without shouting; hover a step darker. */
  /* **Staff's note** in the conversation: a tint only Ativv's words wear, so a note is never taken
     for a line the customer read. */
  --color-note-ground: #f6f0dc;
  --color-note-rule: #9a8a52;
  --color-note-ink: #6b5d2a;
  /* **A warning, soft yellow**: the one colour outside the greys (the roster's handoff, Reed, 13 Oct
     2026), for what would happen and should not: a change that would have emailed a customer who
     cannot see the order, a repeated value. A blocker stays a black chip. */
  --color-flag: #fff3c4;
  --color-flag-ink: #141414;
  /* The rim a small flag mark wears on the shell (the option check's **!**, the design's #c9a43a). */
  --color-flag-rule: #c9a43a;
  --color-danger: #a13d32;
  --color-danger-hover: #842f26;
  --color-danger-ink: var(--color-bg);

  /* What a chip or a toast can say besides danger. Monochrome like everything else: the word
     carries the meaning, and the chip's three forms (chip.css) carry the weight. */
  --color-info: var(--color-ink);
  --color-success: var(--color-ink);
  --color-warning: var(--color-ink);

  /* Behind a modal: dark enough that the page is plainly out of reach. */
  --color-overlay: rgb(20 20 20 / 0.45);

  /* A card lifted off the page, as the snapshot draws the customer's decision card and the composer:
     a hairline shadow and a long soft one under it. */
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.04), 0 16px 36px -22px rgb(0 0 0 / 0.28);
  /* A drawer over the right edge casts one long shadow back over the page. */
  --shadow-drawer: -30px 0 80px rgb(0 0 0 / 0.18);
  /* A well's depth: the shadow its rim casts on the paper (the Design pass's "an inset shadow from
     the rim says how deep"); the customer's well, which has no rim, a lighter one. */
  --shadow-well: inset 0 2px 6px rgb(0 0 0 / 0.25);
  --shadow-well-marks: inset 0 2px 6px rgb(0 0 0 / 0.14);

  color-scheme: light;

  /* ---- space ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;

  /* How wide a page may be. The customer's pages are one phone-width column, centred on anything
     wider; HQ's run full width up to about the snapshot's 1240 px. */
  --measure-column: 30rem;
  --measure-wide: 77.5rem;
  /* The left column of a wide page with two, as the snapshot's order page draws it. */
  --measure-side: 27.5rem;
  /* A line of running text. */
  --measure-text: 68ch;

  /* ---- type ---- */
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;

  --weight-strong: 600;

  /* Display: Instrument Sans, tracked in, tight leading. 1 is a wide page's title, 3 the sign-in
     page's, 4 a phone's page title, 5 a section's. The handoff sets a page's title at 600 on the
     shell (32 px on HQ, 24 on a phone, 22 on sign-in); a section's stays at 400. */
  --weight-display: var(--weight-strong);
  --text-display-1: 32px;
  --text-display-2: 32px;
  --text-display-3: 22px;
  --text-display-4: 24px;
  --text-display-5: 20px;
  --leading-display: 1.1;
  --leading-display-tight: 1.05;
  --leading-section: 1.2;
  --tracking-display-1: -0.03em;
  --tracking-display: -0.025em;
  --tracking-section: -0.02em;

  /* Interface: Instrument Sans, 500 on controls and 400 in running text. `--text-md` is what a
     field holds, 16 px so a phone does not zoom into it; `--text-sm` is running text. */
  --text-lead: 17px;
  --text-md: 16px;
  --text-control: 15px;
  --text-sm: 14px;
  --text-control-small: 13.5px;
  --text-quiet: 13px;
  --text-label: 12.5px;
  --text-meta: 12px;
  --leading-body: 1.5;
  --leading-lead: 1.35;
  --tracking-lead: -0.01em;

  /* Mono: JetBrains Mono at 400 for labels and dates, 500 for chips. The handoff: labels and chips
     9 to 10 px in capitals at .08em; numbers, codes and versions 11 to 12 px. A who-and-when line is
     spaced a little less (.06em), as the Spec writes "PRIYA · 6 OCT". */
  --text-mono-lg: 11px;
  --text-mono: 10.5px;
  --text-mono-chip: 9px;
  --text-mono-sm: 9.5px;
  --text-mono-label: 9.5px;
  --text-mono-number: 12px;
  --text-mono-number-sm: 11px;
  --tracking-mono: 0.06em;
  --tracking-chip: 0.08em;
  --tracking-label: 0.08em;
  /* The pill's words, and a nav pill's. */
  --text-pill: 13px;
  --text-nav: 13.5px;
  /* The six-digit code, a cell apart. */
  --tracking-code: 0.42em;

  /* The names the components read from before the scale above existed. Each is one of its steps. */
  --text-lg: var(--text-display-5);
  --text-xl: var(--text-display-4);

  /* ---- shape ---- */
  /* Fields at 6 px and panels at 10, as the 30 Sep snapshot drew them and until a page round
     recomposes them. A button rests on the shell, so it is round (the corners rule); a chip is cut,
     so it is square. `--radius` is the field's, the name every component already reads. */
  --radius: 6px;
  --radius-button: var(--radius-pill);
  --radius-chip: 0;
  --chip-padding: 4px 6px;
  --radius-card: 10px;
  --hairline: 1px;
  /* The thread's date column, and a small proof card's width and artwork height. */
  --thread-date-column: 60px;
  --proof-small-width: 120px;
  --proof-small-art: 64px;
  /* HQ's composer (hq-orders.css), as the snapshot draws it: its box at 8 px, the chips of what it
     is about to record as pills, and the line at rest a half step over the body size. */
  --radius-box: 8px;
  --radius-pill: 999px;
  --pill-padding: 5px 10px;
  --text-prompt: 14.5px;
  /* The drawer over a page's right edge (drawer.css): its width, and the column its rows name
     themselves in on HQ's fields drawer. */
  --drawer-width: 480px;
  --drawer-label-column: 100px;

  /* The ink rule over a section's title, and the one under a tab row. */
  --rule-strong: 1px;
  /* The rule under the tab that is showing, over the tab row's own. */
  --rule-tab: 2px;

  /* The stage bar (stage-bar.css), as the snapshot draws it. The full form: a 3 px rule per rung,
     6 px apart, and the release ring in a column of its own. The compact form in a list row:
     40 px segments 4 px high, 3 px apart, and a 7 px dot for release. */
  --stage-rule: 3px;
  --stage-gap: 6px;
  --stage-ring-column: 64px;
  --stage-ring: 11px;
  --stage-ring-border: 2px;
  --stage-compact-segment: 40px;
  --stage-compact-height: 4px;
  --stage-compact-gap: 3px;
  --stage-compact-dot: 7px;
  --stage-compact-dot-border: 1.5px;
  /* The customer's four rungs sit closer, 4 px apart, as the snapshot's phone draws them. */
  --stage-gap-four: 4px;

  /* The customer's order page (ativv-customer-orders): its title's leading, the artwork's height on
     the card that asks them to decide, and the same artwork in the confirm dialog. */
  --leading-order-title: 1.15;
  --decide-art-height: 230px;
  --decide-art-height-small: 140px;
  /* The conversation (conversation.css): how wide one side's turn runs, and a proof card's picture. */
  --chat-turn-width: min(36rem, 88%);
  --chat-card-picture: 7rem;
  --chat-picture-height: 12rem;
  /* A dot that says something waits to be read: a tab's, a list row's, the Messages button's. */
  --dot-size: 7px;
  --radius-bubble: 8px;

  /* The mark's height in the frame; its width is the file's own proportion. */
  --mark-height: 16px;

  /* ---- the frame: ground and shell ---- */
  /* The shell's inset from the ground and its corners: 10 px and 18 px; on a phone the Spec draws
     6 and 16. The top line's height on the ground, and a wing's pill in it. */
  --shell-inset: 10px;
  --shell-inset-narrow: 6px;
  --radius-shell: 18px;
  --radius-shell-narrow: 16px;
  --nav-height: 52px;
  --nav-pill-padding: 6px 12px;

  /* ---- the well ---- */
  /* A hole cut through the shell to the ground: the rim is the ground, 6 px of it around the paper,
     square-cornered (no chamfered corners anywhere: docs/decisions.md, 12 Oct 2026, "Where an order
     stands, built", (1)). The lattice's grid and
     the ruled sheet's rules are one hairline every pitch; text sits on a rule, so a line of writing
     on the sheet is one pitch tall. The customer's well has no rim: four registration marks, an
     arm and a weight each, set off the paper by a gap. */
  --well-rim: 6px;
  --lattice-pitch: 24px;
  --ruled-pitch: 40px;
  --marks-arm: 18px;
  --marks-weight: 4px;
  --marks-gap: 8px;

  /* ---- the card and its rail ---- */
  /* A card on the lattice is drawn, not lifted: an ink hairline at 2 px corners, and its picture a
     box of the garment viewer's own shape rather than a height in pixels. It was 140 px, which on a
     card wide enough to read cut 30 px off the top of every garment and printed the caption across
     what was left (Reed's first look, 8 Oct 2026); the garment is what the card is about, so the box
     is as tall as the garment needs and the caption moved under it. 4:3 is `GarmentView`'s ratio
     (garment-view.css), so a drawn garment fills the box exactly and a thumbnail is contained in it.
     The rail: a hairline with a square per proof and a dot per version between them, and a word
     under each in the smallest mono. */
  --radius-drawn: 2px;
  --card-picture-ratio: 4 / 3;
  --card-letter: 18px;
  /* **A card that opens in place** (the design's *Items, with fields*, 13 Oct 2026): closed, 200 px
     wide with a picture half as tall; open, up to 620 px with a 240 px picture beside what it holds
     and a 3 px rim, the design's own measures. */
  --card-closed-width: 200px;
  --card-closed-ratio: 2 / 1;
  --card-open-width: 620px;
  --card-open-picture: 240px;
  --card-open-picture-height: 250px;
  /* **The customer's card** (offer-card.css; the 15 Oct handoff's *Customer, the pack*): a picture
     strip 150 px tall on the lattice, a side-by-side tile 90 px wide within it, a folded card's
     square 48 px, and a count's field 44 px wide, a thumb's width on a phone. */
  --offer-picture-height: 150px;
  --offer-tile-width: 90px;
  --offer-thumb: 48px;
  --offer-count-width: 44px;
  --rule-heavy: 3px;
  --rail-square: 12px;
  --rail-dot: 5px;
  --rail-height: 34px;
  --rail-number: 8px;

  /* ---- the progress line ---- */
  /* The order's line (progress-line.css): a mark is 20 px, the current one 28 with a 5 px ring; a
     run's steps 16 and 22 with a 4 px ring; the line 4 px, a run's 3. The current column stands on
     a light grey panel, a run's card on a lighter one; a later mark is a pale hollow, and a hatch, a
     dash and a draining fill are the mid grey. */
  --line-node: 20px;
  --line-node-current: 28px;
  --line-node-step: 16px;
  --line-node-step-current: 22px;
  --line-ring: 5px;
  --line-ring-step: 4px;
  --line-weight: 4px;
  --line-weight-step: 3px;
  --color-line-panel: #f4f5f6;
  --color-line-panel-quiet: #fbfbfc;
  --color-line-later: #c9ccd1;
  --color-line-hatch: #9aa0a6;

  /* A dialog's measure, and a sheet's (the release and hold sheets), which sets a row of choices
     beside each label. */
  --dialog-width: 32rem;
  --dialog-width-wide: 48rem;
  /* The roster's sheet, a table of lines (the design's *Roster sheet*, 1100 px). */
  --dialog-width-broad: 68.75rem;

  /* The meter's squares, in its own mono size, two pixels apart. */
  --meter-square: 0.8em;
  --meter-gap: 2px;

  /* ---- the garment loader's sea ---- */
  /* **The loader's colours, declared** (docs/decisions.md, 9 Oct 2026, "The correction pass", (9)):
     the middle mark in the text's own ink, and the sea in the same ink, which the loader itself
     never lets past half the mark's strength over the ground (its CAP, Reed's pick of 7 Oct, P.3).
     So the sea reads as the mark's shadow in both themes, since the ink is the theme's. No ground of
     its own: the well's paper shows through. The loader reads the two from the element it fills
     (garment-spec's `docs/api/viewer.md`, "Colours"), and custom properties inherit, so one
     declaration here reaches every box that draws one: the first screen's frame and the customer's
     well. Until the designer looks at it on a preview, this is the working pick and not a final one. */
  --garment-loader-mark: var(--color-ink);
  --garment-loader-sea: var(--color-ink);

  /* The heights a control comes in: the default (HQ's "New order"), the small one (a control in a
     row or a drawer), and the large one a phone's form uses. */
  --control-height: 42px;
  --control-height-small: 34px;
  --control-height-large: 48px;

  /* The focus ring, one shape everywhere so keyboard travel looks like one thing. */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* How long a toast stays. The toast provider reads this value at run time, so
     this is the only place the answer lives. */
  --duration-toast: 6s;
  /* How long the tray's button is emphasised when what it would send changes (tray-bar.css): long
     enough to be caught at the foot of the page, short enough not to be a thing that blinks. */
  --duration-tray-cue: 0.6s;
  /* Toasts sit above the page. A modal <dialog> is in the browser's top layer
     and above them both, which is what we want. */
  --layer-toast: 100;
}

/* ---- the dark theme ----

   The designer's one line (the Design pass, "THE GROUND"): "the same page with the white turned to
   #202225 and the ground kept". So the ground and everything written on it (the top line, the
   lip, the tray) are the same in both themes, the shell is #202225, and the papers and inks are
   derived from it as the 30 Sep theme was derived (docs/decisions.md, 30 Sep 2026): each pairing a
   person reads keeps the contrast ratio it has in light, with the direction turned over, so what is
   a little darker than its ground in light is a little lighter in dark. Each value is the shell
   mixed toward white (or, for danger, the light red toward white) until the ratio holds, which
   keeps the shell's slight cool cast in every grey:

     role             light     dark      the pairing it is solved on, ratio (light → dark)
     shell            #ffffff   #202225   the designer's
     paper, lattice   #ffffff   #252629   the shell itself in light (Reed, 8 Oct); 1.05 in dark
     paper, ruled     #ffffff   #232427   the shell itself in light (Reed, 8 Oct); 1.03 in dark
     rule and grid    #e4e6e9   #313234   against the ruled paper, 1.21 → 1.21
     line             #e1e3e6   #333437   against the shell, 1.29 → 1.28
     metadata ink     #444444   #c9caca   against the ruled paper, 9.4 → 9.4
     muted            #5c6066   #a3a3a5   against the shell, 6.3 → 6.3
     danger           #a13d32   #db938c   against the shell, 6.5 → 6.5
     ink              #141414   #f4f5f7   against the shell, 18.4 → 14.6: the one that cannot hold,
                                          since white on #202225 is 15.9; a near-white, cool
                                          like the shell, as far as the palette allows

   What the turn costs, said plainly: in light the rim is the strong value (the ground against the
   paper is 16.7:1), and in dark the ground beside a #202225 shell and a #252629 paper is 1.1 and
   1.2:1, so a well reads by its rim's shape and a deepened inset shadow
   rather than by its tone. That is what keeping the ground means; Reed judges it on /styleguide.

   **One rule beyond the swap: a filled surface on the dark shell takes the ink, not the ground.** A
   filled chip always did (it is ink-filled in both themes). The filled pill is ground-coloured in
   light, and on the dark shell that fill (1.1:1) read quieter than the outlined pill's light
   hairline, so the customer's "your move" looked less urgent than "Ativv's move". In dark the
   filled pill is the ink with the shell's colour on it, and its separators the light theme's muted
   grey (#5c6066, 5.9:1 on that ink); the well's rim and the registration marks keep the ground.
   Ink-filled controls become light-filled lettered in the shell's colour, hairlines stay hairlines,
   and the shadows are deepened because a soft grey shadow on near-black is invisible.

   Two blocks with the same values, because plain CSS cannot say "the attribute, or the OS when
   there is no attribute" in one selector: the first applies when the operating system prefers dark
   and nobody has chosen light here; the second when somebody has chosen dark. The toggle in each
   shell's frame (ativv-ui's `ThemeToggle`) sets `data-theme` on <html> and remembers it; with
   nothing remembered there is no attribute and the OS decides. Change one block, change both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-shell: #202225;
    --color-paper-lattice: #252629;
    --color-paper-ruled: #232427;
    --color-rule: #313234;
    --color-ink: #f4f5f7;
    --color-meta: #c9caca;
    --color-muted: #a3a3a5;
    --color-line: #333437;
    --color-field-line: #73767a;
    --color-line-panel: #2a2c30;
    --color-line-panel-quiet: #25272a;
    --color-line-later: #4a4d52;
    --color-line-hatch: #73767a;
    --color-accent-hover: #dcdde0;
    --color-danger: #db938c;
    --color-note-ground: #2c2818;
    --color-note-rule: #8f8250;
    --color-note-ink: #cdbf87;
    --color-flag: #4a3f12;
    --color-flag-ink: #f4e7b0;
    --color-flag-rule: #8a7430;
    --color-danger-hover: #e6aba5;
    --color-overlay: rgb(0 0 0 / 0.6);
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 36px -22px rgb(0 0 0 / 0.9);
    --shadow-drawer: -30px 0 80px rgb(0 0 0 / 0.7);
    --shadow-well: inset 0 2px 6px rgb(0 0 0 / 0.55);
    --shadow-well-marks: inset 0 2px 6px rgb(0 0 0 / 0.4);
    --color-pill: var(--color-ink);
    --color-pill-ink: var(--color-shell);
    --color-pill-muted: #5c6066;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-shell: #202225;
  --color-paper-lattice: #252629;
  --color-paper-ruled: #232427;
  --color-rule: #313234;
  --color-ink: #f4f5f7;
  --color-meta: #c9caca;
  --color-muted: #a3a3a5;
  --color-line: #333437;
  --color-field-line: #73767a;
  --color-line-panel: #2a2c30;
  --color-line-panel-quiet: #25272a;
  --color-line-later: #4a4d52;
  --color-line-hatch: #73767a;
  --color-accent-hover: #dcdde0;
  --color-danger: #db938c;
  --color-note-ground: #2c2818;
  --color-note-rule: #8f8250;
  --color-note-ink: #cdbf87;
  --color-flag: #4a3f12;
  --color-flag-ink: #f4e7b0;
  --color-flag-rule: #8a7430;
  --color-danger-hover: #e6aba5;
  --color-overlay: rgb(0 0 0 / 0.6);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 36px -22px rgb(0 0 0 / 0.9);
  --shadow-drawer: -30px 0 80px rgb(0 0 0 / 0.7);
  --shadow-well: inset 0 2px 6px rgb(0 0 0 / 0.55);
  --shadow-well-marks: inset 0 2px 6px rgb(0 0 0 / 0.4);
  --color-pill: var(--color-ink);
  --color-pill-ink: var(--color-shell);
  --color-pill-muted: #5c6066;
  color-scheme: dark;
}