/* tokens.css — the ONLY file in the fleet where a colour literal may appear.
 *
 * `@contrast <fg> on <bg> <floor>` declarations below are a CONTRACT, verified by
 * `design_check.py --contrast`. The floor is the design decision, stated here, not a
 * number the linter invents. Floors are AA (4.5) for status/accent text and AAA (7)
 * for primary text. Borders are deliberately not declared: --line is 1.36, which is
 * correct for a 1px rule and meaningless for text.
 *
 * Values extracted from Paul's own projects (2026-09-25). Superseded values are
 * listed beside each token so future-me knows what is dead and why.
 * Rules and roles: DESIGN.md.  Linter: design_check.py.
 */

:root {
  /* Without this, native form controls (select, date picker, checkbox, scrollbar)
     render LIGHT on a dark page - the browser has no other way to know. */
  color-scheme: dark;

  /* ── Surfaces ────────────────────────────────────────────────
     superseded: scanner --bg #1a1a1a, --panel #0f0f0f
                 ampWe / Stitch   --bg #0a0a0f  */
  --bg:       #0e1116;
  --panel:    #161b22;
  --panel-2:  #1c232c;
  --canvas:   #0d0d0d;   /* plotting / drawing surfaces only */

  /* ── Text and lines ──────────────────────────────────────────
     superseded: scanner --ink #e6e6e6, greys #888 #999 #bbb
                 ampWe --ink #F0F0FF                          */
  --ink:      #e6edf3;
  /* @contrast --ink on --bg 7
     @contrast --ink on --panel 7
     @contrast --ink on --panel-2 7 */
  --muted:    #818c99;
  --line:     #262d38;   /* superseded: scanner #333 #444 #222 */
  /* --muted was #7d8794 until a pipeline review measured it against a surface nobody had declared:
     4.347:1 on --panel-2, under the 4.5 floor — so every fleet table with muted secondary text (the
     .path under a service name, a table header) failed AA the moment a row was hovered, and nothing
     verified it because no floor existed for that pair. One 4-unit lift fixes the family; the floor
     is now declared for all three surfaces. */
  /* @contrast --muted on --bg 4.5
     @contrast --muted on --panel 4.5
     @contrast --muted on --panel-2 4.5 */

  /* ── Status ──────────────────────────────────────────────────
     These mean state. Never decoration.
     superseded: scanner --ok #3ec97a, --alert #e15555           */
  --ok:       #3fb950;
  --warn:     #d29922;
  --alert:    #f85149;
  /* @contrast --ok on --bg 4.5
     @contrast --warn on --bg 4.5
     @contrast --alert on --bg 4.5 */

  /* Ink ON a solid fill. A filled chip is a different surface from a tinted one, so the --*-ink
     values (the colour on a TINT) do not apply. Measured across every fill this palette uses: dark ink
     wins each pair except the deep blue, where white is the only one that clears AA.
       dark   on --ok 7.44 · --warn 7.49 · --alert 5.64 · --accent 7.49 · --muted 5.53
       white  on --series-5 5.19      (white on --warn 2.52 and on --muted 3.42 — under the floor) */
  --fill-ink:       #0e1116;   /* on --ok, --warn, --alert, --accent, --muted fills */
  --fill-ink-light: #ffffff;   /* on a --series-5 fill; white is not a substitute elsewhere */
  /* @contrast --fill-ink on --ok 4.5
     @contrast --fill-ink on --warn 4.5
     @contrast --fill-ink on --alert 4.5
     @contrast --fill-ink on --accent 4.5
     @contrast --fill-ink on --muted 4.5
     @contrast --fill-ink-light on --series-5 4.5 */

  /* Alert surface + text, for banners and destructive controls.
     superseded: scanner danger button #5a2a2a / #7a3a3a        */
  --alert-bg:   #2a1416;
  --alert-ink:  #ffb4ae;
  --alert-line: #7a3a3a;
  /* @contrast --alert-ink on --alert-bg 7 */

  /* ── Accent ──────────────────────────────────────────────────
     superseded: scanner primary #c95f3a / hover #d96f4a
                 ampWe / Stitch  #6857ea                       */
  --accent:   #58a6ff;
  /* @contrast --accent on --bg 4.5 */

  /* ── Plot colours (candlestick / chart canvases ONLY) ─────────
     A deliberate SECOND role, not drift: a chart bar is not a status dot.
     Measured on the scanner's canvas (#0d0d0d), which is what these exist for:

                    contrast   up-vs-down separation
       #3fb950 / #f85149   7.65 / 5.80        1.32   <- --ok/--alert
       #3ec97a / #e15555   9.11 / 5.21        1.75   <- these, 33% better

     On a candle chart the number that matters is how easily a red bar is told
     from a green one, and the scanner's pair wins. UI status keeps the
     canonical --ok/--alert. Use these ONLY for plot surfaces. */
  --ok-plot:    #3ec97a;
  --alert-plot: #e15555;
  /* @contrast --ok-plot on --canvas 4.5
     @contrast --alert-plot on --canvas 4.5 */

  /* ── THE ONE VALUE THIS SYSTEM INVENTS ───────────────────────
     Hover surface for controls. Every existing hover in the fleet is an
     UNTINTED grey (scanner #3a3a3a, Nexus #2a2a2a-adjacent) which does not
     belong in a blue-tinted palette. Derived: one step lighter than
     --panel-2. Reported as new, not extracted. */
  --hover:    #232b36;

  /* ── Type ────────────────────────────────────────────────────
     Mono for anything numeric (prices, IDs, addresses, counts) so columns
     align and digits cannot be misread. Prose only in --font-prose.
     No webfont: no network fetch, works offline. */
  --font-data:  ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-prose: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-micro: 10px;   /* overline, chip-micro        */
  --fs-label: 11px;   /* labels, table headers       */
  --fs-meta:  12px;   /* metadata, secondary         */
  --fs-body:  13px;   /* body default                */
  --fs-h1:    18px;   /* page title                  */
  --fs-big:   26px;   /* the one big number per tile */

  /* ── The ramp above body: the difference between a system and a scale ──────────────
     The six steps above are all a DENSE data screen needs, and they are why every surface built
     from them looks like the same surface: 13px body with an 18px heading and 11px labels cannot
     express hierarchy, so nothing on the page leads. Benchmarked against a shipping commerce admin
     that non-technical owners use (Shopify Polaris v10 tokens: 12/13/14/15/16/17/20/21/24/26px with
     16/20/24/28/32/40/48 line-heights) and against the same lesson in Notion/Claude, where the
     display steps carry the page. ADD TO THIS BLOCK ONLY - a theme that adds a size silently widens
     the legal scale for all 16 repos and the off-scale check goes quiet (that trap is in the repo's
     own suite). Existing tokens keep their values; these fill the gaps and raise the ceiling. */
  --fs-ui:     14px;   /* control labels, form text — Polaris' base (font-size-100) */
  --fs-lead:   16px;   /* a lede under a page title (font-size-200) */
  --fs-title:  20px;   /* section head (font-size-300) */
  --fs-page:   24px;   /* the page's own title (font-size-400) */

  /* ── Controls: a real height scale, not padding guesswork ─────────────────────────
     32/40 are Polaris' two common sizes. Every control uses one of these; a phone raises the small
     one to 44 rather than defining a fourth size. */
  --h-control:    32px;
  --h-control-lg: 40px;

  /* ── Elevation: three steps, so a card can be flat and a menu can float ───────────
     Absent until now, which is why a layout needing a raised surface had to invent a colour and
     the linter (rightly) refused it. Dark surfaces read these as barely-there; --line does the
     containment work there. */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.05);
  --shadow-2: 0 3px 6px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-3: 0 8px 16px rgba(0,0,0,0.12);

  /* ── Spacing ─────────────────────────────────────────────────
     Derived from actual usage across nexus + scanner + lighter-core +
     agentJam. Every high-frequency value is preserved exactly (10, 12, 8,
     6, 4, 2, 1) so adopting this system is near-zero visual change.
     Outliers rounded: 7->6/8, 9->8/10, 14->12/16, 18->16/20, 22->20/24,
     26->24/32, 60->32. */
  --s0: 1px;
  --s1: 2px;
  --s2: 3px;
  --s3: 4px;
  --s4: 5px;
  --s5: 6px;
  --s6: 8px;
  --s7: 10px;
  --s8: 12px;
  --s9: 16px;
  --s10: 20px;
  --s11: 24px;
  --s12: 32px;

  /* ── Radii ───────────────────────────────────────────────────
     superseded: scanner #mode-badge 12px, nexus code 3px         */
  --r-hair:   2px;
  --r-inline: 4px;
  --r-card:   6px;
  --r-pill:   10px;

  /* ── Motion ──────────────────────────────────────────────────────────────
     Role-named durations with a 300ms ceiling for anything in a product UI, and the
     easing curves as tokens, so a timing literal outside tokens.css is drift the linter
     can NAME rather than argue about. Sources: Emil Kowalski's animate rules (duration
     windows by element role, no `ease-in` on UI, exit faster than enter), Material/Apple
     motion guidance, and ui-craft's duration scale. --motion-kill is 0.01ms and not 0:
     at 0 the transitionend/animationend events stop firing and JS awaiting them expires. */
  --dur-press:     120ms;   /* press, colour and opacity feedback (100-160) */
  --dur-tip:       150ms;   /* tooltip and hover reveal (125-200) */
  --dur-menu:      200ms;   /* dropdown, toggle, tab, select, chip (150-250) */
  --dur-overlay:   280ms;   /* modal, popover, drawer, toast */
  --dur-sheet:     400ms;   /* full-height drawer only — opt-in, the one exception */
  --dur-max:       300ms;   /* the ceiling for product UI; onboarding is the exception */
  --motion-kill:   0.01ms;  /* reduced motion neutralises to this, never to 0 */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);    /* default: enters and feedback */
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);   /* same-layer moves */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);        /* emphasized, once per view */
  --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);    /* sheets and drawers */

  /* ── Layers ──────────────────────────────────────────────────────────────
     An overlay that invents z-index: 9999 is a stacking bug waiting for the second
     overlay. Semantic steps only, and tooltip sits ABOVE toast because a tooltip must
     never be covered by one. `design_check.py` flags a raw z-index outside this ladder. */
  --z-base:    0;
  /* A marker that must paint above its own sibling content but below anything that sticks or
     floats: a section badge over its own outline, a count over a swatch. The linter already
     allowed `z-index: 1` while the ladder had no token for it — an incomplete ladder is how a
     literal gets justified. */
  --z-raised:  1;
  --z-sticky:  10;
  --z-dropdown: 20;
  --z-overlay: 30;
  --z-popover: 40;
  --z-toast:   50;
  --z-tooltip: 60;

  /* A popover's transform-origin, set per trigger by JS: a dropdown scales FROM its trigger
     while a modal stays centred. It has a default so no consumer needs a fallback — a fallback
     (`var(--menu-origin, top left)`) is a value outside tokens.css, which the linter flags. */
  --menu-origin: top left;

  /* ── Status surfaces ─────────────────────────────────────────────────────
     --alert-* had a fill, a text colour and a border. --ok and --warn had a text colour
     only, so an ok or a warn banner had to borrow the alert fill or invent one. All
     three carry the same triple now. Measured, not eyeballed: each ink is >=7:1 on its
     own fill. The `-line` values are rules, not text, and carry no floor — same reason
     --line has none (1.36:1 is correct for a 1px rule). */
  --ok-bg:   #0f2a17;
  --ok-ink:  #7ee787;
  --ok-line: #1f6f3a;
  /* @contrast --ok-ink on --ok-bg 7 */
  --warn-bg:   #2b2111;
  --warn-ink:  #e3b341;
  --warn-line: #8a6116;
  /* @contrast --warn-ink on --warn-bg 7 */
  /* @contrast --ok-ink on --bg 4.5
     @contrast --warn-ink on --bg 4.5 */

  /* ── Chart series ────────────────────────────────────────────────────────
     Two roles, deliberately. (1) A NOMINAL categorical set: Okabe-Ito, colour-vision
     safe, capped at seven — an eighth category folds into "other" rather than growing
     the rainbow. (2) The in-product default for a multi-series chart is --accent at
     three opacities, so a chart does not become a paint chart.
     Every series colour clears the 3:1 graphics floor on --canvas (closest is
     --series-5 at 3.75). --plot-fade is the one overlay fade for a plot: a literal
     here by design, because it is a token and this is the file for literals. */
  --series-1: #e69f00;
  --series-2: #56b4e9;
  --series-3: #009e73;
  --series-4: #f0e442;
  --series-5: #0072b2;
  --series-6: #d55e00;
  --series-7: #cc79a7;
  /* @contrast --series-1 on --canvas 3
     @contrast --series-2 on --canvas 3
     @contrast --series-3 on --canvas 3
     @contrast --series-4 on --canvas 3
     @contrast --series-5 on --canvas 3
     @contrast --series-6 on --canvas 3
     @contrast --series-7 on --canvas 3
     Those were the only floors declared, and they cover the case that is NOT the common one: a mark
     is usually drawn inside a panel, not on the bare canvas. A reverse-pipeline pass over a real
     page (pipeline/runs/cmp2-reverse-audit) found every mark sitting on --panel with no declared
     floor — nothing failed (the closest series clears 3.34 there) but a contract that misses the
     case that occurs is one palette away from being broken silently. */
  /* @contrast --series-1 on --panel 3
     @contrast --series-2 on --panel 3
     @contrast --series-3 on --panel 3
     @contrast --series-4 on --panel 3
     @contrast --series-5 on --panel 3
     @contrast --series-6 on --panel 3
     @contrast --series-7 on --panel 3 */
  --plot-fade: rgba(13, 13, 13, 0.6);
  /* The one backdrop for a modal/sheet/menu. A literal here by design — it is the file
     for literals — so no component invents its own rgba() dimmer. */
  --scrim: rgba(6, 8, 11, 0.72);

  /* ── Measure, leading, tracking ──────────────────────────────────────────
     A prose measure is a token because "it looked fine" produced 100+ character lines.
     66ch sits at the ideal of the 45-75ch band. Leading is per-role: never 1.5 on a
     32px display line, never 1.1 on 13px body. */
  --measure:       66ch;
  --measure-tight: 45ch;
  --lh-body:    1.5;
  --lh-ui:      1.35;
  --lh-display: 1.1;
  --tracking-tight: -0.02em;
  --tracking-caps:   0.08em;

  /* ── Interaction floors (WCAG 2.5.8 AA / 2.5.5 AAA) ─────────────────────
     24px is the AA minimum for a pointer target and the minimum space between two
     adjacent targets; 44px is the comfortable/touch size. --row-h is the table row
     floor, so density is a token rather than a per-project padding guess. */
  --tap-min:         24px;
  --tap-comfortable: 44px;
  --hit-gap:         24px;
  --row-h:           40px;
  --row-h-dense:     32px;

  /* ── The display step ────────────────────────────────────────────────────
     The ramp above stopped at 26px (--fs-big, a KPI number), so a page could not have a
     title that leads: 24px against a 13px body is a 1.85x ratio, and a display step
     needs 2.5x-4x above the step below it. 32px makes one exist (2.46x body, 1.6x
     --fs-page) without touching a single existing value. */
  --fs-display: 32px;
}

/* ── Theme: cockpit ─────────────────────────────────────────────
   Promoted from the Nexus redesign sketch (chosen from three variants — see
   ~/worktrees/nexus-ui on branch ui/redesign, sketches/README.md for the comparison). Dense,
   one-screen, everything monospace. It overrides tokens only, so base.css's var() references
   restyle the whole page with no component edits (DESIGN.md §12).

   Measured, not eyeballed: the floors below are declared here and verified by
   `design_check.py --contrast`. Lowest margin in this palette is --muted on --panel at 4.92. */

[data-theme="cockpit"] {
  color-scheme: dark;   /* not optional on a dark UI: native controls and scrollbars follow it */

  /* ── Surfaces: true black, so 12px mono holds up ───────────── */
  --bg:      #06070a;
  --panel:   #0b0e13;
  --panel-2: #12161d;
  --canvas:  #050608;

  /* ── Text and lines ───────────────────────────────────────── */
  --ink:   #d7dee8;
  --muted: #8593a1;
  --line:  #1c222b;
  /* @contrast --ink on --bg 7
     @contrast --ink on --panel 7
     @contrast --ink on --panel-2 7
     @contrast --muted on --bg 4.5
     @contrast --muted on --panel 4.5
     @contrast --muted on --panel-2 4.5 */

  /* Status: canonical fleet values, restated here only so this palette's floors are declared. */
  --ok:    #3fb950;
  --warn:  #d29922;
  --alert: #f85149;
  /* @contrast --ok on --bg 4.5
     @contrast --warn on --bg 4.5
     @contrast --alert on --bg 4.5 */

  /* The fills here are the fleet's light ones, so the solid-fill ink is the dark pair; the teal accent
     takes dark ink even more comfortably (10.33). */
  --fill-ink:       #0e1116;
  --fill-ink-light: #ffffff;
  /* @contrast --fill-ink on --ok 4.5
     @contrast --fill-ink on --warn 4.5
     @contrast --fill-ink on --alert 4.5
     @contrast --fill-ink on --accent 4.5
     @contrast --fill-ink on --muted 4.5
     @contrast --fill-ink-light on --series-5 4.5 */

  --alert-bg:   #2a1416;
  --alert-ink:  #ffb4ae;
  --alert-line: #7a3a3a;
  /* @contrast --alert-ink on --alert-bg 7 */

  /* Accent: teal, deliberately not one of the three state colours. */
  --accent: #46d4c4;
  /* @contrast --accent on --bg 4.5 */

  --hover: #1a212a;

  /* Density: one step down across the board, and prose becomes mono — at this size the page is
     scanned by shape and colour rather than read. --fs-micro RISES to 11px: 10px mono is the one
     thing this theme cannot afford. */
  --fs-micro: 11px;
  --fs-label: 11px;
  --fs-meta:  11px;
  --fs-body:  12px;
  --fs-h1:    15px;
  --fs-big:   22px;
  /* The display step is re-pointed, not added: this theme is one step denser everywhere, and a
     32px display in a cockpit breaks that. 26px is already a legal value (--fs-big). */
  --fs-display: 26px;
  --font-prose: var(--font-data);
}

[data-theme="bakery"] {
  color-scheme: light;   /* not optional on a light UI: native controls and scrollbars follow it */

  /* A warm light theme for a surface a NON-TECHNICAL owner runs from a phone — a bakery's backend.
     Values taken from the Claude/Anthropic reference in the popular-web-designs library (parchment,
     ivory, warm sand, terracotta accent), chosen deliberately over the dark cockpit: a bakery owner
     editing their own menu is not looking at a control room, and the site itself is warm paper
     colours. Read the WHY in the ui-variant-redesign skill before reaching for this. */

  /* ── Surfaces: paper, not glass ─────────────────────────────── */
  --bg:      #f5f4ed;   /* parchment — the page canvas */
  --panel:   #faf9f5;   /* ivory — cards and panels */
  --panel-2: #e8e6dc;   /* warm sand — a second surface */
  --canvas:  #f5f4ed;

  /* ── Text and lines: every grey keeps its yellow-brown undertone ── */
  --ink:   #141413;
  --muted: #5e5d59;
  --line:  #e8e6dc;
  /* @contrast --ink on --bg 7
     @contrast --ink on --panel 7
     @contrast --ink on --panel-2 7
     @contrast --muted on --bg 4.5
     @contrast --muted on --panel 4.5
     @contrast --muted on --panel-2 4.5 */

  /* Status: darkened for a light surface — the fleet's dark values do not pass here. */
  --ok:    #2f6f33;
  --warn:  #8a5300;
  --alert: #b53333;
  /* @contrast --ok on --bg 4.5
     @contrast --warn on --bg 4.5
     @contrast --alert on --bg 4.5 */

  /* …and the fills are dark, so the solid-fill ink flips: white on every one (6.0-6.6), where the
     dark pair that works on the other two palettes reads ~3.0 here. This is the whole reason the ink
     is a token and not a #fff written next to a chip. */
  --fill-ink:       #ffffff;
  --fill-ink-light: #ffffff;
  /* @contrast --fill-ink on --ok 4.5
     @contrast --fill-ink on --warn 4.5
     @contrast --fill-ink on --alert 4.5
     @contrast --fill-ink on --accent 4.5
     @contrast --fill-ink on --muted 4.5
     @contrast --fill-ink-light on --series-5 4.5 */

  --alert-bg:   #f7e9e6;
  --alert-ink:  #7a241e;
  --alert-line: #d9aa9f;
  /* @contrast --alert-ink on --alert-bg 7 */

  /* Accent: terracotta. Warm, and deliberately not one of the three state colours. */
  --accent: #a8412a;

  /* The reference's identity move: prose in a serif, so the owner is reading rather than looking at a
     console. Re-points an existing token - it adds no size, so the scale is not widened. Numbers stay
     mono (--font-data), which is the whole reason the split exists. */
  --font-prose: Georgia, "Iowan Old Style", "Times New Roman", serif;
  /* @contrast --accent on --bg 4.5
     @contrast --accent on --panel 4.5 */

  --hover: #edeae0;

  /* Status surfaces, light-surface values: the fleet's dark triples do not pass here
     (darkened until each ink clears 7:1 on its own fill, measured). */
  --ok-bg:   #e2efe4;
  --ok-ink:  #14591f;
  --ok-line: #9dc4a6;
  --warn-bg:   #f6ecd4;
  --warn-ink:  #6b3f00;
  --warn-line: #d8b878;
  /* @contrast --ok-ink on --ok-bg 7
     @contrast --warn-ink on --warn-bg 7 */

  /* Plot series on a LIGHT canvas: the dark Okabe-Ito set is unreadable here, so a theme
     that changes --canvas must re-declare the series. Darkened by luminance, hue kept. */
  --series-1: #8a5a00;
  --series-2: #1c6ea4;
  --series-3: #00694e;
  --series-4: #8a7400;
  --series-5: #00508a;
  --series-6: #a83c00;
  --series-7: #96336b;
  /* @contrast --series-1 on --canvas 3
     @contrast --series-2 on --canvas 3
     @contrast --series-3 on --canvas 3
     @contrast --series-4 on --canvas 3
     @contrast --series-5 on --canvas 3
     @contrast --series-6 on --canvas 3
     @contrast --series-7 on --canvas 3 */
  /* ...and on this theme's --panel, which is where a mark actually sits (see the note in :root). */
  /* @contrast --series-1 on --panel 3
     @contrast --series-2 on --panel 3
     @contrast --series-3 on --panel 3
     @contrast --series-4 on --panel 3
     @contrast --series-5 on --panel 3
     @contrast --series-6 on --panel 3
     @contrast --series-7 on --panel 3 */
  --plot-fade: rgba(245, 244, 237, 0.6);
  /* A light theme dims less: a 0.72 scrim on paper reads as a blackout. */
  --scrim: rgba(20, 20, 19, 0.45);

  /* The accents the owner picks between in the admin. A stored preference is one of these, so the
     picker and the saved value read the same names. */
  --accent-warm-brown: #AD7F58;   /* Warm brown */
  --accent-sourdough: #B4653A;   /* Sourdough */
  --accent-deep-rye: #6E4A2E;   /* Deep rye */
  --accent-wheat: #C39B5B;   /* Wheat */
  --accent-sage: #6E7A5E;   /* Sage */
}

/* ── Storefront: the bakery's public site ─────────────────────────
   Values are the SITE's own, taken verbatim from its Tailwind theme, so moving it onto tokens
   changes nothing on screen. A brand palette is not drift — the system's job is to give it a name,
   not to replace it. (Light surfaces need the darkened status trio, as the bakery theme does.)

   BELOW AA, RECORDED ON PURPOSE: --muted on --panel-2 is 3.19:1 and on --bg 4.25:1. The floors
   below state what this theme actually guarantees, so the gap is visible in the contract instead of
   hidden in a migration. Darkening that grey is the owner's call — the pale value is the brand. */
[data-theme="storefront"] {
  --fill-ink: #ffffff;   /* the ink ON the caption's ink-veil, and on a solid accent fill */
  color-scheme: light;
  --bg:      #fbf9f5;
  --panel:   #fbf9f5;
  --panel-2: #dbdad6;
  --canvas:  #fbf9f5;
  --ink:     #1b1c1a;
  --muted:   #7f766a;
  --line:    #d1c5b8;
  --accent:  #705a44;
  --ok:      #2f6f33;
  --warn:    #8a5300;
  --alert:   #b53333;
  /* @contrast --ink on --bg 7
     @contrast --accent on --bg 4.5
     @contrast --accent on --panel-2 4.5
     @contrast --muted on --bg 4
     @contrast --muted on --panel-2 3
     @contrast --ok on --bg 4.5
     @contrast --warn on --bg 4.5
     @contrast --alert on --bg 4.5 */
  /* The site's own Material names, kept here so the markup's utility classes read tokens like
     everything else. Same values, one home. */
  --tertiary-fixed: #e4e4cc;
  --surface-container-low: #f5f3ef;
  --inverse-primary: #dec1a6;
  --secondary-container: #e4e2e1;
  --on-error-container: #93000a;
  --on-tertiary-container: #494a38;
  --tertiary-container: #babaa3;
  --surface-container-high: #eae8e4;
  --on-primary-fixed-variant: #57432e;
  --on-secondary-fixed: #1b1c1c;
  --primary-fixed-dim: #dec1a6;
  --surface-variant: #e4e2de;
  --on-secondary-container: #656464;
  --surface-container: #efeeea;
  --tertiary: #5e604d;
  --inverse-on-surface: #f2f0ed;
  --primary-fixed: #fcddc0;
  --on-tertiary-fixed: #1b1d0e;
  --primary-container: #d0b499;
  --secondary-fixed: #e4e2e1;
  --inverse-surface: #30312e;
  --on-tertiary-fixed-variant: #474836;
  --surface-container-highest: #e4e2de;
  --on-surface-variant: #4d453c;
  --error-container: #ffdad6;
  --secondary: #5f5e5e;
  --on-primary-fixed: #281807;
  --on-primary-container: #5a4530;
  --on-secondary-fixed-variant: #474747;
  --tertiary-fixed-dim: #c8c8b0;
  --error: #ba1a1a;
  --secondary-fixed-dim: #c8c6c6;

/* The owner's own pages: the setup guide at /guide, the sign-in notice and the 404. Warm paper, a
   brown accent — the bakery's family, and its own values to the letter so nothing moves on screen. */
[data-theme="guide"] {
  color-scheme: light;
  --bg:      #fbf9f5;   /* --paper in the guide's own sheet */
  --panel:   #ffffff;   /* an input or a code block */
  --ink:     #2b2723;
  --muted:   #6f665d;
  --line:    #e6e0d8;
  --accent:  #ad7f58;
  --panel-2: #f3efe9;   /* a table head or a chip */
  --fill-ink: #ffffff;   /* the ink ON a solid accent fill — a number badge, a copy button */
  --fill-ink-light: #ffffff;
  /* @contrast --ink on --bg 7
  @contrast --muted on --bg 4.5
  @contrast --ink on --panel 7
  @contrast --muted on --panel 4.5
  @contrast --ink on --panel-2 7
  @contrast --muted on --panel-2 4.5
  @contrast --accent on --bg 3
  @contrast --accent on --panel-2 3 */
  /* Measured: --accent on --bg is 3.35. The guide's links are body-size, so that is under AA 4.5 —
     the owner's brown, kept as it is and flagged here rather than changed. The inverted fills
     (.num, the copy buttons) are 1.9rem+ bold, where AA-large's 3.0 clears at 3.53. */
}
}