@hanzo/ui 8.27.49 → 8.27.51

package/dist/theme.css

@@ -13,24 +13,9 @@
  */
 
 /* ── tokens/colors.css ─────────────────────────────────────── */
-/* Hanzo is monochrome. One hue rendered through an opacity ladder.
-   Base ladder = Tailwind neutral (tailwind.config.ts). Semantic names match
-   hanzo.ai's CSS variables exactly, so code copies over 1:1.
-   DARK IS THE DEFAULT THEME (hanzo.ai mounts ThemeProvider defaultTheme="dark").
-
-   The dark palette is derived from the chat surface in hanzoai/extension
-   (packages/browser/src/sidebar.css), which is the reference aesthetic: a
-   #0a0a0a ground, #fafafa ink, and boundaries drawn as LOW-ALPHA HAIRLINES.
-   Two properties of that reference are load-bearing and easy to lose:
-
-   1. Borders are alpha, not hex. rgb(255 255 255 / .10) composites correctly on
-      #0a0a0a AND on #262626; a solid #1f1f1f reads on the page and vanishes the
-      moment it lands on a lifted surface — which is why anyone who needed a
-      visible edge reached past it for the CONTROL rung and got a wireframe.
-   2. Surfaces lift by tiny steps (0a -> 0f -> 17 -> 26), and ink is a graded
-      ramp (#fafafa -> .78 -> .55 -> #a3a3a3), not one flat white. Pure #ffffff
-      on pure #000000 is 21:1 — the maximum-contrast pair that exists, and it
-      halates. #fafafa on #0a0a0a is 18.1:1: still far past AAA, visibly softer. */
+/* AUTO-GENERATED by @hanzo/tokens scripts/gen-css.mjs from src/theme.ts — DO NOT EDIT.
+ * Edit the token in @hanzo/tokens src/theme.ts and re-run `pnpm --filter @hanzo/tokens gen-css`. */
+/* Hanzo colour tokens — monochrome, dark-default. One hue, an opacity ladder. */
 
 :root{
   color-scheme:dark;
@@ -49,140 +34,71 @@
   --neutral-950:#0A0A0A;
   --pure-black:#000000;
   --pure-white:#FFFFFF;
-  /* Press-kit brand constants (public/press/hanzo/README.md). */
   --hanzo-black:#0A0A0B;
   --hanzo-white:#FFFFFF;
 
+  /* ——— art: four hues, for artwork only ———
+     Light, never paint. They colour hero art and the few soft glows that give a
+     section form; chrome, type and every control stay on the monochrome ladder
+     below. The same in both themes, because art is not themed. */
+  --art-tide:#2F6BFF;
+  --art-iris:#8B5CF6;
+  --art-ember:#FF7A3D;
+  --art-glow:#F4F1FF;
+
   /* ——— the opacity ladder: the real palette ——— */
-  /* Every rung below .30 is a HAIRLINE or a LIFT — the two things this system
-     draws with. The rungs are the reference's own values, not a rounded ramp. */
-  /* The five rungs marked (chrome) below were being retyped as raw rgba in
-     @hanzogui/shell's theme.ts, which is the shared bar every Hanzo property
-     mounts. That is the same defect this ladder exists to end — a value in two
-     places drifts, and this pair already had: the shell's resting hairline sat
-     at .06 against this file's .10 for long enough that the bar and the page
-     under it drew different hairlines. They are rungs here now, and the shell
-     references them, so the chrome has no colour of its own left to drift.
-
-     They are the shell's OWN measured values, added at the alpha it already
-     ships. Snapping them to neighbouring rungs instead would have been a
-     silent redesign of the estate's chrome, and two of them carry decisions
-     that a round number would have destroyed: .92 is ink deliberately short of
-     the .98 hover so a hover still reads as a response, and .03 is the one
-     lift that must stay below the .05 hairline it sits inside. */
-  --white-03:rgb(255 255 255 / .03);   /* (chrome) the raised fill  */
+  --white-03:rgb(255 255 255 / .03); /* the raised fill */
   --white-05:rgb(255 255 255 / .05);
   --white-06:rgb(255 255 255 / .06);
   --white-08:rgb(255 255 255 / .08);
   --white-10:rgb(255 255 255 / .10);
-  --white-14:rgb(255 255 255 / .14);   /* (chrome) selection wash   */
+  --white-14:rgb(255 255 255 / .14); /* selection wash */
   --white-15:rgb(255 255 255 / .15);
   --white-16:rgb(255 255 255 / .16);
-  --white-18:rgb(255 255 255 / .18);   /* (chrome) selection tint   */
+  --white-18:rgb(255 255 255 / .18); /* selection tint */
   --white-20:rgb(255 255 255 / .20);
   --white-22:rgb(255 255 255 / .22);
   --white-30:rgb(255 255 255 / .30);
   --white-40:rgb(255 255 255 / .40);
-  --white-45:rgb(255 255 255 / .45);   /* (chrome) the dimmest ink  */
+  --white-45:rgb(255 255 255 / .45); /* the dimmest ink */
   --white-55:rgb(255 255 255 / .55);
   --white-60:rgb(255 255 255 / .60);
   --white-78:rgb(255 255 255 / .78);
   --white-80:rgb(255 255 255 / .80);
-  --white-92:rgb(255 255 255 / .92);   /* (chrome) body ink         */
+  --white-92:rgb(255 255 255 / .92); /* body ink */
 
   /* ——— semantic aliases (dark, the default) ——— */
   --background:#0a0a0a;
-  /* READING ink, one rung below the top of the ramp. The note at the head of this
-     file already made this argument once — #ffffff on #000000 halates, so #fafafa
-     — and the argument does not stop being true at 19.0:1. Every heading and
-     paragraph on every surface was set in the brightest ink the system has, while
-     the CHROME beside them draws body text at --white-92; a page read as glare
-     against its own header. #e5e5e5 is the neutral-200 rung this file already
-     spends on --primary-hover, so the ramp gains no new value: 15.7:1 on the page,
-     15.2:1 on a card, both more than twice the 7:1 AAA asks of body text.
-     Something that genuinely needs the brightest ink names --primary. */
-  --foreground:#e5e5e5;
+  --foreground:#e5e5e5; /* the graded ink, one rung short of #fafafa */
   --card:#0f0f0f;
   --card-foreground:#e5e5e5;
   --popover:#0f0f0f;
   --popover-foreground:#e5e5e5;
   --primary:#fafafa;
-  /* A 5% step, not the 16% this used to be. A filled button's fill is already
-     the top of the ink ramp, so the only directions available on hover are
-     "dimmer" and "brighter-around-the-edges" — and a 16% drop reads as the
-     button going DISABLED under the cursor, which is the one thing a hover must
-     never look like. The step is now small enough to register as pressure while
-     --bloom does the actual work of lighting it up. */
   --primary-hover:#e5e5e5;
   --primary-foreground:#0a0a0a;
   --secondary:#262626;
-  /* One rung up, so a secondary button HAS a hover. It previously resolved to
-     --surface-3, which is --secondary — the same value it starts at. */
   --secondary-hover:#333333;
   --secondary-foreground:#fafafa;
   --muted:#171717;
   --muted-foreground:#a3a3a3;
   --accent:#262626;
+  --accent-hover:var(--secondary-hover); /* the accent under the cursor; a chosen accent restates it */
   --accent-foreground:#fafafa;
-  /* Destructive is the ONE place the monochrome rule already yields, and it was
-     yielding in only half the system: a field that fails validation draws
-     --state-error (#ef4444, which DESIGN.md §2.4 lists as permitted precisely
-     for "destructive / blocking error"), while the button that performs the
-     destruction drew #666666 — a mid-grey that is indistinguishable from a
-     disabled control. "Delete everything" and "you cannot click this" must not
-     be the same colour. So the two converge on the one token that already
-     names this meaning, and the ramp stays monochrome everywhere else. */
-  --destructive:var(--state-error);
-  --destructive-hover:#dc2626;   /* red-600 — deepens under the cursor */
+  --destructive:#dc2626; /* red-600 — a FILL under its foreground, 4.6:1; the error hue is --state-error */
+  --destructive-hover:#b91c1c; /* red-700 — deepens under the cursor, 6.2:1 */
   --destructive-foreground:#fafafa;
 
-  /* ——— boundaries ———
-     ONE ladder, cut from alpha, graded by duty. Every rung is a rung of the
-     opacity ladder above, so every boundary composites correctly on the page,
-     on a card, and inside a popover — and every rung is the reference's own
-     measured value, not a rounded ramp:
-
-       --border          .10  the hairline. Cards, panels, dividers, list rows.
-       --border-strong   .16  the same hairline, one step up. Hover, emphasis.
-       --border-control  .15  a control's resting edge — input, select, textarea.
-       --border-focus    .22  that control, focused.
-       --border-selected .30  the thing that is currently CHOSEN — the active
-                              tab, the current tile, the featured plan.
-
-     The previous release cut the last three from the NEUTRAL ladder instead,
-     because a boundary that clears WCAG 1.4.11's 3:1 on a near-black ground IS
-     a mid-grey and no amount of tuning changes that. It is true, and it is also
-     what a wireframe looks like: a 1px #737373 box around every field, four
-     times heavier than the hairline beside it, so a form read as a debug
-     overlay rather than a surface. Aesthetics decided it — the reference draws
-     an input at rgb(255 255 255 / .15) and a focused one at .22 (sidebar.css
-     --input-border / .composer-box:focus-within), and that is what ships here.
-
-     What replaces the ratio is the FOCUS INDICATOR, which is the thing a
-     keyboard user actually navigates by and the one boundary still pinned at
-     3:1 (--ring, below). A resting edge is an affordance; a focus ring is a
-     position. Only the second one is load-bearing when you cannot see well, and
-     spending the contrast budget there rather than on all four edges of every
-     idle field is what lets the system be quiet AND findable at once. */
-  --border:var(--white-10);
-  --border-strong:var(--white-16);
-  --border-control:var(--white-15);      /* sidebar.css --input-border           */
-  --border-focus:var(--white-22);        /* .composer-box:focus-within           */
-  --border-selected:var(--white-30);     /* the current tab / tile / plan        */
-  --input:var(--border-control);         /* shadcn `border-input` — a control    */
-  /* A focus indicator is a NON-TEXT CONTRAST target: WCAG 2.4.11/1.4.11 require
-     3:1 against every surface it can land on, and unlike a resting edge it is
-     worth the loudness — it is transient, it only appears on keyboard focus,
-     and it is the whole of how a keyboard user knows where they are.
-     --white-40 clears it on every canvas in both themes precisely BECAUSE it is
-     alpha: on a lifted surface the ring lifts with it (3.77:1 on #0a0a0a,
-     3.66:1 on #262626), which a fixed grey cannot do. */
-  --ring:var(--white-40);
-  /* The soft halo that sits outside the ring — the reference's
-     `box-shadow: 0 0 0 2px rgb(255 255 255 / .06)` on a focused composer. It
-     carries no ratio; it is what makes focus read as designed rather than as a
-     browser default. Spent through --ring-focus (tokens/elevation.css). */
-  --ring-halo:var(--white-10);
+  /* ——— boundaries — ONE ladder, cut from alpha, graded by duty ——— */
+  --border:var(--white-10); /* the hairline */
+  --border-strong:var(--white-16); /* hover, emphasis */
+  --border-control:var(--white-15); /* a control's resting edge */
+  --border-focus:var(--white-22); /* that control, focused */
+  --border-selected:var(--white-30); /* the thing currently CHOSEN */
+  --edge:var(--white-06); /* fainter than the hairline: an edge between chrome and page */
+  --input:var(--border-control); /* shadcn `border-input` — a control */
+  --ring:var(--white-40); /* the focus indicator — 3:1 non-text contrast */
+  --ring-halo:var(--white-10); /* the soft halo outside the ring */
   --brand:#e4e4e7;
   --brand-foreground:#09090b;
   --brand-muted:#a3a3a3;
@@ -190,49 +106,26 @@
   --white:#fafafa;
   --selection:var(--white-20);
 
-  /* ——— glass: the lift ———
-     How a surface rises WITHOUT a block fill. An alpha-white wash composites
-     over whatever it lands on, so one value works on the page, on a card and
-     inside a popover. This is the mechanism behind the reference's depth. */
+  /* ——— glass: the lift ——— */
   --glass:var(--white-05);
   --glass-strong:var(--white-08);
 
-  /* ——— surface recipes ———
-     A card has to be a SURFACE, which means you have to be able to see that it
-     is not the page. These were cut from neutral-900 (#171717) at .4/.5/.8, and
-     at .5 that composites to #101010 on a #0a0a0a ground — six levels above the
-     page, which is not a surface, it is a very slightly different black. Three
-     cards side by side then read as one flat field with hairlines ruled across
-     it, and no amount of shadow fixes it, because you cannot cast a shadow onto
-     black.
-
-     Cut from neutral-800 (#262626) instead, they land on 14 / 18 / 1f — the
-     reference's own panel (#171717 on a #0f0f0f container) with room either
-     side of it. They stay ALPHA so a card nested in a popover still lifts off
-     its parent rather than punching a hole in it; that is the whole reason
-     these are recipes and not just --surface-* rungs. */
+  /* ——— surface recipes ——— */
   --surface-page:var(--background);
-  --surface-card:rgb(38 38 38 / .5);         /* -> #181818 on the page          */
-  --surface-card-emphasis:rgb(38 38 38 / .75);/* -> #1f1f1f — featured          */
-  --surface-card-quiet:rgb(38 38 38 / .35);  /* -> #141414 — story cards        */
-  /* A floating panel that is the SAME colour as the page is not floating. This
-     was rgb(10 10 10 / .95) — the page, at 95% of the page. */
-  --surface-overlay:rgb(23 23 23 / .92);     /* dropdown / popover panels       */
-  --surface-header:rgb(0 0 0 / .7);          /* fixed nav, with backdrop blur   */
-  --surface-scrim:rgb(0 0 0 / .8);           /* the dialog / sheet backdrop     */
+  --surface-card:rgb(38 38 38 / .5); /* -> #181818 on the page */
+  --surface-card-emphasis:rgb(38 38 38 / .75); /* -> #1f1f1f — featured */
+  --surface-card-quiet:rgb(38 38 38 / .35); /* -> #141414 — story cards */
+  --surface-overlay:rgb(23 23 23 / .92); /* dropdown / popover panels */
+  --surface-header:rgb(0 0 0 / .7); /* fixed nav, with backdrop blur */
+  --surface-scrim:rgb(0 0 0 / .8); /* the dialog / sheet backdrop */
 
   /* ——— the numeric surface ladder ——— */
-  /* Aliases onto the semantic canvases above, so a brand fork that retunes
-     --card/--muted/--secondary retunes the ladder with it and the light theme
-     inverts for free. Ascending lift: 0 is the page, 3 is a hovered control.
-     Dark resolves to the reference's own ladder — 0a / 0f / 17 / 26. */
   --surface-0:var(--background);
   --surface-1:var(--card);
   --surface-2:var(--muted);
   --surface-3:var(--secondary);
 
-  /* ——— text ranks ———
-     A graded ramp, not one flat white. The steps are the reference's. */
+  /* ——— text ranks — a graded ramp, not one flat white ——— */
   --text-primary:#fafafa;
   --text-secondary:var(--white-78);
   --text-tertiary:var(--white-55);
@@ -240,27 +133,22 @@
   --text-disabled:var(--white-30);
 
   /* ——— the ONLY permitted hues (DESIGN.md §2.4) ——— */
-  --state-error:#ef4444;        /* red-500  — destructive / blocking error   */
-  --state-error-text:#fca5a5;   /* red-300                                    */
+  --state-error:#ef4444; /* red-500 — destructive / blocking error */
+  --state-error-text:#fca5a5; /* red-300 */
   --state-error-bg:rgb(239 68 68 / .1);
-  --state-online:#4ade80;       /* green-400 — live status dot                */
-  --state-success:#22c55e;      /* green-500 — "Free" / "Save N%" callouts    */
+  --state-online:#4ade80; /* green-400 — live status dot */
+  --state-success:#22c55e; /* green-500 — "Free" / "Save N%" callouts */
   --chrome-dot-red:rgb(239 68 68 / .6);
   --chrome-dot-yellow:rgb(234 179 8 / .6);
   --chrome-dot-green:rgb(34 197 94 / .6);
 }
 
-/* Light theme — the same tokens, inverted.
-   The white-opacity ladder does NOT invert: --white-16 is white-on-white here.
-   So EVERY token whose dark value is a --white-* rung must be restated below,
-   and check-tokens.mjs fails the build if one is missed — that class of bug is
-   silent (the border simply stops existing) and has shipped before. */
 .light, :root.t_light, .t_light{
   color-scheme:light;
+
+  /* ——— semantic aliases (light) ——— */
   --background:#f7f7f7;
   --foreground:#0a0a0a;
-  /* A ladder, not four names for #f5f5f5. Light lifts by the same tiny steps
-     dark does — ~2% per rung — so --surface-0..3 mean something in both themes. */
   --card:#f2f2f2;
   --card-foreground:#0a0a0a;
   --popover:#fbfbfb;
@@ -274,28 +162,27 @@
   --muted:#ededed;
   --muted-foreground:#525252;
   --accent:#e4e4e4;
+  --accent-hover:var(--secondary-hover);
   --accent-foreground:#0a0a0a;
-  --destructive:var(--state-error);
-  --destructive-hover:#dc2626;
+  --destructive:#dc2626;
+  --destructive-hover:#b91c1c;
   --destructive-foreground:#ffffff;
+
+  /* ——— boundaries — restated as black-alpha ——— */
   --border:rgb(0 0 0 / .10);
   --border-strong:rgb(0 0 0 / .16);
   --border-control:rgb(0 0 0 / .15);
-  /* Focus and selection are pushed further here than the .22/.30 they sit at in
-     dark. Black-on-white at a given alpha reads FAINTER than white-on-black at
-     the same alpha — .22 black on #ffffff measures 1.69:1 where .22 white on
-     #0a0a0a measures 1.97:1 — so mirroring the number would quietly make the
-     light theme's focus state the weakest state in the system. */
-  --border-focus:rgb(0 0 0 / .32);
+  --border-focus:rgb(0 0 0 / .32); /* pushed past .22: black-on-white reads fainter */
   --border-selected:rgb(0 0 0 / .42);
+  --edge:rgb(0 0 0 / .06);
   --input:var(--border-control);
-  /* Same duty, same 3:1 floor, opposite direction: .50 black is 3.98:1 on
-     #ffffff and 3.67:1 on #f5f5f5. */
-  --ring:rgb(0 0 0 / .5);
+  --ring:rgb(0 0 0 / .5); /* 3.98:1 on #ffffff, 3.67:1 on #f5f5f5 */
   --ring-halo:rgb(0 0 0 / .07);
   --black:#0a0a0a;
   --white:#ffffff;
   --selection:rgb(0 0 0 / .16);
+
+  /* ——— glass + surfaces (light) ——— */
   --glass:rgb(0 0 0 / .04);
   --glass-strong:rgb(0 0 0 / .07);
   --surface-card:#f2f2f2;
@@ -304,6 +191,8 @@
   --surface-overlay:rgb(255 255 255 / .95);
   --surface-header:rgb(255 255 255 / .8);
   --surface-scrim:rgb(0 0 0 / .5);
+
+  /* ——— text ranks (light) ——— */
   --text-primary:var(--neutral-950);
   --text-secondary:rgb(10 10 10 / .78);
   --text-tertiary:rgb(10 10 10 / .55);
@@ -496,6 +385,10 @@
      Requires `<meta name="viewport" content="…,viewport-fit=cover">` on the
      host page; without it the UA reports 0 and the max() is inert, not wrong. */
   --gutter:max(1rem,var(--safe-left),var(--safe-right));
+  /* The chrome's inset: @hanzogui/shell lays its header and menus on this
+     value, so a page that reads it starts in the column the brand mark does.
+     20px at 390, 41 at 1024, 58 at 1440. */
+  --page-gutter:clamp(20px,4vw,72px);
   --gutter-sm:1.5rem;         /* sm:px-6                       */
   --gutter-lg:2rem;           /* lg:px-8                       */
   --section-y:2.5rem;         /* py-10 on a phone → py-16 at md */
@@ -503,6 +396,11 @@
   --hero-y:3rem;              /* py-12 on a phone → py-20 at md */
   --hero-y-lg:4.5rem;         /* py-18 on a phone → py-32 at md */
   --header-height:3.5rem;     /* 56px is the phone bar; 64px from md */
+  /* The fixed bars a surface actually DRAWS, which base.css's scroll padding
+     clears. 0 until a surface with a fixed header or dock sets them, usually
+     from a measurement; --header-height is the bar's designed size. */
+  --header:0px;
+  --dock:0px;
 
   /* ——— touch ——— */
   /* 44px is the floor a pointer-coarse target may render at (Apple HIG 44pt /
@@ -607,14 +505,20 @@
 
 /* ── tokens/radius.css ─────────────────────────────────────── */
 :root{
-  --radius:0.5rem;            /* the base token (globals.css)      */
-  --radius-sm:0.375rem;       /* rounded-md — buttons, inputs      */
-  --radius-md:0.5rem;
-  --radius-lg:0.75rem;        /* rounded-xl — cards                */
-  --radius-xl:1rem;           /* rounded-2xl — dropdown panels     */
-  --radius-2xl:1.5rem;        /* rounded-3xl — story / hero cards  */
-  --radius-composer:28px;     /* the chat composer, exactly 28px   */
-  --radius-full:9999px;       /* pills, CTAs, avatars, badges      */
+  /* The CORNER knob — one multiplier on every rung below but the pill, the way
+     --type-scale is on type and --density on spacing. @hanzo/ui's gui radii
+     multiply by the same name, so a component and a stylesheet stay round
+     together. 1 is the published set. */
+  --radius-scale:1;
+
+  --radius:calc(0.5rem * var(--radius-scale, 1));            /* the base token (globals.css)      */
+  --radius-sm:calc(0.375rem * var(--radius-scale, 1));       /* rounded-md — buttons, inputs      */
+  --radius-md:calc(0.5rem * var(--radius-scale, 1));
+  --radius-lg:calc(0.75rem * var(--radius-scale, 1));        /* rounded-xl — cards                */
+  --radius-xl:calc(1rem * var(--radius-scale, 1));           /* rounded-2xl — dropdown panels     */
+  --radius-2xl:calc(1.5rem * var(--radius-scale, 1));        /* rounded-3xl — story / hero cards  */
+  --radius-composer:calc(28px * var(--radius-scale, 1));     /* the chat composer, 28px at scale 1 */
+  --radius-full:9999px;       /* pills, CTAs, avatars, badges — a shape, so never scaled */
 }
 
 /* ── tokens/elevation.css ─────────────────────────────────────── */
@@ -733,6 +637,37 @@
   --gradient-chrome-2:linear-gradient(to right,#ffffff,var(--neutral-500));
   /* Section-top protection gradient (hero overlays). */
   --gradient-protect:linear-gradient(to bottom,var(--white-10),transparent);
+
+  /* ——— chrome: the bars the page passes behind ———
+     The header and the dock are one material: a translucent fill over a blur.
+     Raise the alpha and it stops being glass and becomes a shelf. A menu that
+     hangs from the chrome stands on --chrome-panel, which is opaque, because
+     running text read through a menu's words is unreadable. @hanzogui/shell
+     paints its panels with it. */
+  --chrome:rgb(9 9 11 / .72);
+  --chrome-blur:blur(20px) saturate(1.8);
+  --chrome-panel:var(--popover);
+
+  /* ——— the pane: a card on the workspace ground ———
+     The fill is the paper ladder's; the pane adds what the ladder leaves to the
+     call site — a corner, an edge, the lens, and the gutter between panes.
+     --pane-solid is the fill composited once, for a reader who asked for no
+     transparency or a browser that cannot blur. --pane-ground is two lamps
+     under the threshold of reading as a gradient: a blur over a flat colour
+     does nothing a plain alpha would not. */
+  --pane-blur:var(--chrome-blur);
+  --pane-edge:var(--white-08);
+  --pane-round:var(--radius-xl);
+  --pane-fill:var(--sheet-1);
+  --pane-solid:color-mix(in srgb,var(--neutral-800) 50%,var(--background));
+  --pane-floor:var(--background);
+  --pane-gap:var(--space-2);
+  --pane-ground:radial-gradient(80rem 40rem at 12% -10%,rgb(255 255 255 / .035),transparent 60%),radial-gradient(60rem 34rem at 92% 108%,var(--white-03),transparent 60%); /* @kind color */
+}
+
+/* A desk gets room to see the ground between panes. */
+@media (min-width:1024px){
+  :root{--pane-gap:var(--space-3)}
 }
 
 /* Light theme — the same three parts, redistributed.
@@ -769,6 +704,23 @@
   --gradient-chrome:linear-gradient(to right,#0a0a0a,rgb(10 10 10 / .8),rgb(10 10 10 / .6));
   --gradient-chrome-2:linear-gradient(to right,#0a0a0a,var(--neutral-500));
   --gradient-protect:linear-gradient(to bottom,rgb(0 0 0 / .10),transparent);
+  /* Light glass is the same idea from the other side: the fill goes white, the
+     edge and the lamps go dark. */
+  --chrome:rgb(255 255 255 / .72);
+  --pane-edge:rgb(0 0 0 / .08);
+  --pane-fill:var(--chrome);
+  --pane-solid:var(--background);
+  --pane-floor:var(--surface-card);
+  --pane-ground:radial-gradient(80rem 40rem at 12% -10%,rgb(0 0 0 / .03),transparent 60%),radial-gradient(60rem 34rem at 92% 108%,rgb(0 0 0 / .022),transparent 60%);
+}
+
+/* No transparency when asked for none, or where nothing can blur behind it:
+   a translucent fill with no blur is the page read through the words. */
+@media (prefers-reduced-transparency:reduce){
+  :root,:root.light{--pane-fill:var(--pane-solid);--pane-blur:none}
+}
+@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
+  :root,:root.light{--pane-fill:var(--pane-solid)}
 }
 
 /* ── tokens/motion.css ─────────────────────────────────────── */
@@ -830,6 +782,18 @@
   --z-popover:700;     /* popovers, tooltips (also when anchored in modals) */
   --z-toast:800;       /* toasts / notifications — always on top            */
 
+  /* What a PAGE draws over itself, between --z-raised and --z-sticky: a panel
+     under its scrim under a drawer, then a sheet, the dock and a banner. All of
+     it stays under the header and every overlay above. --z-under sits behind
+     the flow, for a backdrop. */
+  --z-under:-10;
+  --z-panel:18;
+  --z-scrim:19;
+  --z-drawer:20;
+  --z-sheet:30;
+  --z-dock:40;
+  --z-banner:50;
+
   /* @hanzo/brand spells the top two rungs --z-tooltip and --z-notification.
      Same rungs, so a component written against either vocabulary stacks
      identically. --z-popover / --z-toast are canonical. */
@@ -855,6 +819,15 @@
    remains the one place the faces are AUTHORED; this is a copy of its output,
    the same way the colour tokens are copied rather than fetched.
 
+   A copy is only as good as what it copied from, and this one went stale: the
+   floor sat at @hanzo/font ^1.8.8, whose faces carry Vercel's vendor tag under
+   our filenames, so every `npm run gen` overwrote the good committed Zen with
+   Geist and 0.5.23 and 0.5.24 both went out that way — the release commits hold
+   the right bytes, the tarballs did not. Two things stop it recurring, each in
+   its own place: from 1.9.2 the font package's build refuses to publish a face
+   that is not its own, and gen-tokens.mjs refuses to copy from anything below
+   that floor.
+
    Why self-hosted rather than a third-party CDN:
    - A sign-in page must not make a third-party request. hanzoai/id refused to
      import this file for exactly that reason, which split the token layer: id
@@ -881,9 +854,9 @@
 
 
 :root{
-  --font-sans:"Zen",ui-sans-serif,system-ui,sans-serif;
+  --font-sans:Zen, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-display:var(--font-sans);
-  --font-mono:"Zen Mono",ui-monospace,SFMono-Regular,monospace;
+  --font-mono:Zen Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   --font-serif:Georgia,serif;
   /* The default is Zen as drawn, and that is a decision rather than an omission.
      `base.css` puts this on <body>, so whatever is here is the voice of every
@@ -905,6 +878,9 @@
      in this list. */
   --font-feature-settings:normal;
 }
+/* The three voices above, set by the host's `data-brand` on <html>. */
+[data-brand=hanzo]{--font-feature-settings:"ss01"}
+[data-brand=lux]{--font-feature-settings:"ss04"}
 
 /* ── tokens/base.css ─────────────────────────────────────── */
 /* Minimal element defaults so specimen cards and kits inherit the brand without
@@ -932,21 +908,41 @@
   *{box-sizing:border-box;border-color:var(--border)}
   html{
     -webkit-font-smoothing:antialiased;
+    -moz-osx-font-smoothing:grayscale;
     text-rendering:optimizeLegibility;
+    /* The page never scrolls sideways. On the root box as well as <body>,
+       because the scrollport is the documentElement; `clip` rather than
+       `hidden`, so neither becomes a scroll container and `sticky` still
+       holds. */
+    overflow-x:clip;
     scroll-behavior:smooth;
     /* iOS inflates text when a phone is rotated to landscape unless this is
        pinned. It is the single most common reason a mobile layout that was
        verified in portrait comes apart on its side. */
     -webkit-text-size-adjust:100%;
+    /* A scroll the browser makes for the page — an anchor jump, focus moving,
+       scrollIntoView — lands clear of a fixed header or dock. A surface that
+       has one sets --header / --dock; one that has none scrolls to the edge. */
+    scroll-padding-block:var(--header,0px) var(--dock,0px);
+  }
+  /* A slide settles where it begins: a page whose sections state
+     `scroll-snap-align` is the scroller's half here. `proximity`, never
+     `mandatory`, so a long section never holds a reader; a page with no snap
+     points is untouched. */
+  @media (min-width:1024px) and (prefers-reduced-motion:no-preference){
+    :where(html){scroll-snap-type:y proximity}
   }
   /* Each font-family carries the stack as a literal fallback. --font-sans lives in
      tokens/fonts.css, which a surface may legitimately import separately; without
      the fallback an unresolved var() makes font-family invalid and the UA drops to
      its SERIF default — the whole console silently rendered in Times. */
-  body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);font-size:var(--text-base);line-height:var(--leading-base);font-feature-settings:var(--font-feature-settings);overflow-wrap:break-word}
+  /* The insets keep content out of the notch and the home indicator on a page
+     drawn under them (viewport-fit=cover); env() is 0 on a flat screen. The
+     top one is the header's to pay. */
+  body{margin:0;padding:0 var(--safe-right,0px) var(--safe-bottom,0px) var(--safe-left,0px);overflow-x:clip;background:var(--background);color:var(--foreground);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);font-size:var(--text-base);line-height:var(--leading-base);font-feature-settings:var(--font-feature-settings);overflow-wrap:break-word}
   h1,h2,h3,h4{margin:0;font-family:var(--font-display,var(--font-sans,ui-sans-serif,system-ui,sans-serif));letter-spacing:var(--tracking-tight);color:var(--text-primary)}
   p{margin:0;text-wrap:pretty}
-  code,pre,kbd{font-family:var(--font-mono,ui-monospace,SFMono-Regular,monospace)}
+  code,pre,kbd,samp{font-family:var(--font-mono,ui-monospace,SFMono-Regular,monospace)}
   /* No `transition` here: the shared interactive rule below states one, and an
      `a` selector (0,0,1) would outrank that :where() (0,0,0) and replace the
      whole shorthand — anchors would transition colour and nothing else. */
@@ -958,7 +954,9 @@
      is a component states its own hover. The old rule also re-set `color` to the
      value `a` already has — a no-op that only served to outrank a component's own
      hover colour. */
-  :is(p,li,blockquote,dd,dt,td,th,figcaption) a:hover{text-decoration:underline}
+  /* A list or a cell inside chrome is not running text: nav, aside, header and
+     the shell's slots carry links that never underline. */
+  :is(p,li,blockquote,dd,dt,td,th,figcaption) a:hover:not(:is(nav,aside,header,[role=navigation],[data-hanzo-shell],[data-slot=rail],[data-slot=bar]) a){text-decoration:underline}
 
   /* ——— the smooth ———
      Every interactive element in the reference transitions its colour, its fill
@@ -987,6 +985,16 @@
     transform:scale(.98);
   }
 
+  /* ——— the tap ———
+     No grey flash where a finger lands, and no wait for a double-tap zoom on
+     a control. A dialog or drawer scrolls itself and stops at its end rather
+     than carrying the page behind it along. */
+  :where(a,button,[role=button],input,select,textarea,summary,label){
+    -webkit-tap-highlight-color:transparent;
+    touch-action:manipulation;
+  }
+  :where(dialog,[role=dialog],[data-drawer]){overscroll-behavior:contain}
+
   /* ——— controls ———
      A bare <input> renders in the UA's face (Arial) at the UA's size with the
      UA's border, which puts two typefaces and a foreign blue focus ring inside
@@ -1048,12 +1056,39 @@
   :where(input,textarea)::placeholder{color:var(--text-disabled)}
   :where(input,select,textarea,button):disabled{opacity:.5;cursor:not-allowed}
   :where(button,[role=button],summary,label,select){cursor:pointer}
+  /* A bare <button> loses the UA's outset bevel and grey fill. A button that
+     wants an edge or a ground states one, and any rule at all outranks this. */
+  :where(button){border:0;background:none}
+
+  /* ——— the pointer floor ———
+     WCAG 2.5.8 AA's 24px, for every pointer; the thumb's 44px is below, under
+     pointer:coarse. A min-height cannot size an inline box, so a header or
+     footer link is drawn as a box first. An icon-only control has no text to
+     widen it, so it is a centred box too.
+
+     `:only-child` counts ELEMENTS: `<a>Docs <svg/></a>` matches as well, and a
+     label+icon control states its own `justify-content`. */
+  :where(button,[role=button],header a[href],footer a[href]){min-height:24px}
+  :where(header a[href],footer a[href]){display:inline-flex;align-items:center}
+  :where(:is(a[href],button,[role=button]):has(> svg:only-child)){display:inline-flex;align-items:center;justify-content:center}
+
+  /* MONO KEEPS ITS CELLS. Zen Mono fuses `--` into one glyph, and a brand's
+     --font-feature-settings rides down into it from <body>, so a command meant
+     to be retyped draws one column short. Wherever the mono face is asked for —
+     these elements, a gui Text on the `$mono` face (gui names that face's scope
+     `font_mono`), or a style naming the token — every character keeps its cell.
+     After the controls' `font:inherit`, which would otherwise hand a mono
+     button its parent's ligatures back. */
+  :where(code,pre,kbd,samp,.font_mono,[style*='--font-mono']){font-variant-ligatures:none;font-feature-settings:normal}
 
   /* ——— media ———
      An image, a video or an embed at its intrinsic width is the usual cause of a
      390px page that scrolls sideways. */
   :where(img,svg,video,canvas,iframe,picture,object){max-width:100%}
-  :where(img,video){height:auto}
+  /* `auto` keeps the aspect when max-width narrows the box. An element given a
+     height and no width keeps the height it was given: an SVG mark has no
+     intrinsic size, and `auto` collapses it to 0x0. */
+  :where(:is(img,video):is(:not([height]),[width])){height:auto}
   /* A code block scrolls ITSELF rather than widening the document. */
   :where(pre){overflow-x:auto}
 
@@ -1068,6 +1103,13 @@
            input:not([type=checkbox]):not([type=radio]):not([type=hidden])){
       min-height:var(--tap-target);
     }
+    /* @hanzo/gui writes a control's size INLINE, and only an important
+       declaration outranks an inline one, so these are the floor that holds
+       on a gui control. A switch or checkbox keeps its own box: the button IS
+       the track, and the pseudo-element below widens its target. A radio drawn
+       as a button — a segment of a toggle group — is a control like any other. */
+    :where(button:not([role=switch],[role=checkbox]),[role=button],select,header a[href],footer a[href]){min-height:var(--tap-target) !important}
+    :where(:is(a[href],button,[role=button]):has(> svg:only-child)){min-width:var(--tap-target) !important}
     :where(input,select,textarea){font-size:var(--text-control)}
     /* A checkbox, radio or switch must NOT grow to 44px — the box is 16px
        because that is what a checkbox looks like. What has to reach 44px is the
@@ -1102,6 +1144,9 @@
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
   :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset,2px)}
+  /* The ring's colour at REST too, so a control that transitions colours has
+     no currentColor -> ring interpolation to flash when focus lands. */
+  :where(*){outline-color:var(--ring)}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}