@hanzo/design 0.5.0 → 0.5.2

package/tailwind.css

@@ -252,23 +252,23 @@
    silent (the border simply stops existing) and has shipped before. */
 .light{
   color-scheme:light;
-  --background:#ffffff;
+  --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:#fafafa;
+  --card:#f2f2f2;
   --card-foreground:#0a0a0a;
-  --popover:#ffffff;
+  --popover:#fbfbfb;
   --popover-foreground:#0a0a0a;
   --primary:#0a0a0a;
   --primary-hover:#262626;
   --primary-foreground:#fafafa;
-  --secondary:#ededed;
+  --secondary:#e4e4e4;
   --secondary-hover:#e0e0e0;
   --secondary-foreground:#0a0a0a;
-  --muted:#f5f5f5;
+  --muted:#ededed;
   --muted-foreground:#525252;
-  --accent:#ededed;
+  --accent:#e4e4e4;
   --accent-foreground:#0a0a0a;
   --destructive:var(--state-error);
   --destructive-hover:#dc2626;
@@ -293,9 +293,9 @@
   --selection:rgb(0 0 0 / .16);
   --glass:rgb(0 0 0 / .04);
   --glass-strong:rgb(0 0 0 / .07);
-  --surface-card:#fafafa;
-  --surface-card-emphasis:#ffffff;
-  --surface-card-quiet:#fcfcfc;
+  --surface-card:#f2f2f2;
+  --surface-card-emphasis:#fdfdfd;
+  --surface-card-quiet:#f5f5f5;
   --surface-overlay:rgb(255 255 255 / .95);
   --surface-header:rgb(255 255 255 / .8);
   --surface-scrim:rgb(0 0 0 / .5);
@@ -313,19 +313,25 @@
    — the two are the SAME scale, mirrored. A surface/tenant overrides any --text-*
    on :root to retune density on demand. */
 :root{
-  --text-xs:0.6875rem;  --leading-xs:1rem;      /* 11px — eyebrows / section labels */
-  --text-sm:0.8125rem;  --leading-sm:1.15rem;   /* 13px — nav labels, dense body */
-  --text-base:0.875rem; --leading-base:1.35rem; /* 14px — base app text (was 16px) */
-  --text-lg:0.9375rem;  --leading-lg:1.4rem;    /* 15px */
-  --text-xl:1.0625rem;  --leading-xl:1.55rem;   /* 17px */
-  --text-2xl:1.3125rem; --leading-2xl:1.7rem;   /* 21px */
-  --text-3xl:1.625rem;  --leading-3xl:1.95rem;  /* 26px */
-  --text-4xl:2rem;      --leading-4xl:2.25rem;  /* 32px */
-  --text-5xl:2.5rem;    --leading-5xl:1.05;     /* 40px */
-  --text-6xl:3.25rem;   --leading-6xl:1;        /* 52px */
-  --text-7xl:4rem;      --leading-7xl:1;        /* 64px */
-  --text-8xl:5.25rem;   --leading-8xl:1;        /* 84px */
-  --text-9xl:7rem;      --leading-9xl:1;        /* 112px */
+  /* The type knob. 1 is the published scale; every rung below multiplies by
+     it, so a surface or a person retunes the WHOLE ramp by setting one
+     number and no rung can drift out of relation with the others.
+     @hanzo/design's `vars({type})` emits exactly this name. */
+  --type-scale:1;
+
+  --text-xs:calc(0.6875rem * var(--type-scale, 1));  --leading-xs:calc(1rem * var(--type-scale, 1));      /* 11px — eyebrows / section labels */
+  --text-sm:calc(0.8125rem * var(--type-scale, 1));  --leading-sm:calc(1.15rem * var(--type-scale, 1));   /* 13px — nav labels, dense body */
+  --text-base:calc(0.875rem * var(--type-scale, 1)); --leading-base:calc(1.35rem * var(--type-scale, 1)); /* 14px — base app text (was 16px) */
+  --text-lg:calc(0.9375rem * var(--type-scale, 1));  --leading-lg:calc(1.4rem * var(--type-scale, 1));    /* 15px */
+  --text-xl:calc(1.0625rem * var(--type-scale, 1));  --leading-xl:calc(1.55rem * var(--type-scale, 1));   /* 17px */
+  --text-2xl:calc(1.3125rem * var(--type-scale, 1)); --leading-2xl:calc(1.7rem * var(--type-scale, 1));   /* 21px */
+  --text-3xl:calc(1.625rem * var(--type-scale, 1));  --leading-3xl:calc(1.95rem * var(--type-scale, 1));  /* 26px */
+  --text-4xl:calc(2rem * var(--type-scale, 1));      --leading-4xl:calc(2.25rem * var(--type-scale, 1));  /* 32px */
+  --text-5xl:calc(2.5rem * var(--type-scale, 1));    --leading-5xl:1.05;     /* 40px */
+  --text-6xl:calc(3.25rem * var(--type-scale, 1));   --leading-6xl:1;        /* 52px */
+  --text-7xl:calc(4rem * var(--type-scale, 1));      --leading-7xl:1;        /* 64px */
+  --text-8xl:calc(5.25rem * var(--type-scale, 1));   --leading-8xl:1;        /* 84px */
+  --text-9xl:calc(7rem * var(--type-scale, 1));      --leading-9xl:1;        /* 112px */
 
   /* The SAME scale under @hanzo/brand's spelling. @hanzo/gui's shell theme and
      Hanzo Studio address the ramp as --font-size-*; both names are one value, so
@@ -390,7 +396,7 @@
    form feels broken. pointer:coarse is the real signal — a desktop mouse keeps
    the compact 13px field. */
 @media (pointer:coarse){
-  :root{--text-control:1rem}
+  :root{--text-control:calc(1rem * var(--type-scale, 1))}
 }
 
 /* ── tokens/spacing.css ─────────────────────────────────────── */
@@ -398,21 +404,27 @@
    declared in hanzo.ai's tailwind.config.ts (legacy v3 config, kept for
    reference) — use it for editorial layouts, not for component padding. */
 :root{
+  /* The density knob. 1 is the published spacing; every --space-* rung below
+     multiplies by it, and --grid-gap-* reference those rungs rather than
+     restating them, so gaps, padding and section rhythm move together.
+     @hanzo/design's `vars({density})` emits exactly this name. */
+  --density:1;
+
   --space-0:0;
-  --space-1:0.25rem;
-  --space-2:0.5rem;
-  --space-3:0.75rem;
-  --space-4:1rem;
-  --space-5:1.25rem;
-  --space-6:1.5rem;
-  --space-8:2rem;
-  --space-10:2.5rem;
-  --space-12:3rem;
-  --space-14:3.5rem;
-  --space-16:4rem;
-  --space-20:5rem;
-  --space-24:6rem;
-  --space-32:8rem;
+  --space-1:calc(0.25rem * var(--density, 1));
+  --space-2:calc(0.5rem * var(--density, 1));
+  --space-3:calc(0.75rem * var(--density, 1));
+  --space-4:calc(1rem * var(--density, 1));
+  --space-5:calc(1.25rem * var(--density, 1));
+  --space-6:calc(1.5rem * var(--density, 1));
+  --space-8:calc(2rem * var(--density, 1));
+  --space-10:calc(2.5rem * var(--density, 1));
+  --space-12:calc(3rem * var(--density, 1));
+  --space-14:calc(3.5rem * var(--density, 1));
+  --space-16:calc(4rem * var(--density, 1));
+  --space-20:calc(5rem * var(--density, 1));
+  --space-24:calc(6rem * var(--density, 1));
+  --space-32:calc(8rem * var(--density, 1));
 
   /* golden ramp (φ) — hanzo.ai tailwind.config.ts */
   --golden-1:0.25rem;
@@ -599,6 +611,41 @@
   --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
   --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60);
   --shadow-2xl:var(--shadow-floating);
+
+  /* ——— the paper ——— */
+  /* Depth carries STATE, not decoration: which sheet is the workspace, which is
+     the tool in use, which one opened. Reach for a level before a border — if
+     two surfaces need separating, RAISE one rather than outline both, and a
+     surface that is already raised does not also need a box drawn round it.
+
+     A level is a tint AND the light on it, published as a pair, because the
+     alternative — every component composing its own `--edge-highlight,
+     --shadow-*` — is how two panels on one screen end up lit from two
+     directions. Every rung here is pure vertical: a 1px inset line along the
+     top edge, a drop straight down. One origin, above and slightly in front.
+
+     The tints are the surface recipes rather than new values, so sheets stack
+     the way paper does: each is an alpha-white wash, one laid on another lands
+     a step lighter, and the stack converges on #262626 instead of blowing out.
+
+     Nothing here is restated in `.light`, deliberately: every part defers to a
+     token that already flips, so the ramp inverts with the theme for free. */
+  --sheet-0:var(--surface-page);            /* the workspace ground             */
+  --sheet-1:var(--surface-card);            /* an active tool                   */
+  --sheet-2:var(--surface-card-emphasis);   /* what opened, or what is inside   */
+  --shadow-sheet-1:var(--edge-highlight),var(--shadow-md);
+  --shadow-sheet-2:var(--edge-highlight),var(--shadow-lg);
+
+  /* The fold — a corner turned back, and the one mark that means THIS OPENS.
+     Ornament nowhere: a sheet that does not expand does not wear one.
+     It is a background-image, so it costs no element and no pseudo-element —
+     paint it on the sheet itself and square that corner
+     (`border-bottom-right-radius:0`), because a folded corner is not round.
+     The flap catches the light like every other surface; the crease is the
+     hairline; both defer, so both invert. */
+  --fold:12px;
+  --fold-face:linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold)); /* @kind color */
+
   /* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
   --glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
   --glow-hero-blur:120px;
@@ -857,19 +904,26 @@
     padding:0 var(--space-3);
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
-  /* ——— focus, on a control ———
-     Not the generic ring. A field already HAS an edge, so focus brightens that
-     edge (.15 -> .22) and adds a soft halo just outside it — which is what the
-     reference does (.composer-box:focus-within) and what separates a focused
-     field from a browser default. The generic `outline` is suppressed here
-     precisely because it would draw a second, harder box around this one. */
-  :where(input,select,textarea):focus-visible{
-    outline:none;
-    border-color:var(--border-focus);
-    box-shadow:var(--ring-focus);
-  }
-  /* A hovered field lifts its surface a rung. Nudging its EDGE from .15 to .16
-     is a state nobody can see. */
+  /* A field has NO focus rule of its own — see the ring at the bottom of this
+     layer, which is the one focus indicator for everything.
+
+     There used to be one here: `outline:none` plus a brightened edge (.15 ->
+     .22) plus a soft halo, the composer look. It was removed because it could
+     not do the job in either of the two ways that matter.
+
+     It was never VISIBLE ENOUGH. Composited on --background the brightened edge
+     measures 1.91:1 and the halo 1.25:1, against the 3:1 that WCAG 1.4.11 asks
+     of a focus indicator and that this package already gates --ring on. The
+     budget was documented as being spent entirely on --ring "because that is
+     what a keyboard user navigates by" — true for a button, and false for a
+     field for exactly as long as this rule told fields not to use it.
+
+     And it was SUPPRESSIBLE. It carried the indicator on `border-color`, so any
+     app that states `border` on its own fields overrode it — @hanzo/id does,
+     unlayered, which beats this layer whatever its specificity, and its focused
+     fields sat at the resting .15 while both files read as correct. An outline
+     is not a border: nothing in an app's field styling reaches it, so the ring
+     paints whether or not the app has opinions about edges. */
   :where(input,select,textarea):hover:not(:focus-visible):not(:disabled){background:var(--surface-3)}
   :where(input,textarea)::placeholder{color:var(--text-disabled)}
   :where(input,select,textarea,button):disabled{opacity:.5;cursor:not-allowed}
@@ -909,6 +963,19 @@
     }
   }
 
+  /* THE focus indicator. One rule, every focusable thing, no exceptions — a
+     button, a link, a summary, a field. 2px at --ring is 3.77:1 on the darkest
+     canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
+     check-tokens holds --ring to that and nothing else here may weaken it.
+
+     There were two rules until 0.4.9, and they collided invisibly. Both computed
+     to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
+     each side — so the cascade fell through to SOURCE ORDER inside this layer,
+     this rule was written later, and it overrode the `outline:none` the field
+     rule stated expressly to prevent it. Every focused input on every consumer
+     drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
+     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:2px}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */

package/tokens/base.css

@@ -99,19 +99,26 @@
     padding:0 var(--space-3);
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
-  /* ——— focus, on a control ———
-     Not the generic ring. A field already HAS an edge, so focus brightens that
-     edge (.15 -> .22) and adds a soft halo just outside it — which is what the
-     reference does (.composer-box:focus-within) and what separates a focused
-     field from a browser default. The generic `outline` is suppressed here
-     precisely because it would draw a second, harder box around this one. */
-  :where(input,select,textarea):focus-visible{
-    outline:none;
-    border-color:var(--border-focus);
-    box-shadow:var(--ring-focus);
-  }
-  /* A hovered field lifts its surface a rung. Nudging its EDGE from .15 to .16
-     is a state nobody can see. */
+  /* A field has NO focus rule of its own — see the ring at the bottom of this
+     layer, which is the one focus indicator for everything.
+
+     There used to be one here: `outline:none` plus a brightened edge (.15 ->
+     .22) plus a soft halo, the composer look. It was removed because it could
+     not do the job in either of the two ways that matter.
+
+     It was never VISIBLE ENOUGH. Composited on --background the brightened edge
+     measures 1.91:1 and the halo 1.25:1, against the 3:1 that WCAG 1.4.11 asks
+     of a focus indicator and that this package already gates --ring on. The
+     budget was documented as being spent entirely on --ring "because that is
+     what a keyboard user navigates by" — true for a button, and false for a
+     field for exactly as long as this rule told fields not to use it.
+
+     And it was SUPPRESSIBLE. It carried the indicator on `border-color`, so any
+     app that states `border` on its own fields overrode it — @hanzo/id does,
+     unlayered, which beats this layer whatever its specificity, and its focused
+     fields sat at the resting .15 while both files read as correct. An outline
+     is not a border: nothing in an app's field styling reaches it, so the ring
+     paints whether or not the app has opinions about edges. */
   :where(input,select,textarea):hover:not(:focus-visible):not(:disabled){background:var(--surface-3)}
   :where(input,textarea)::placeholder{color:var(--text-disabled)}
   :where(input,select,textarea,button):disabled{opacity:.5;cursor:not-allowed}
@@ -151,6 +158,19 @@
     }
   }
 
+  /* THE focus indicator. One rule, every focusable thing, no exceptions — a
+     button, a link, a summary, a field. 2px at --ring is 3.77:1 on the darkest
+     canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
+     check-tokens holds --ring to that and nothing else here may weaken it.
+
+     There were two rules until 0.4.9, and they collided invisibly. Both computed
+     to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
+     each side — so the cascade fell through to SOURCE ORDER inside this layer,
+     this rule was written later, and it overrode the `outline:none` the field
+     rule stated expressly to prevent it. Every focused input on every consumer
+     drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
+     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:2px}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */

package/tokens/colors.css

@@ -214,23 +214,23 @@
    silent (the border simply stops existing) and has shipped before. */
 .light{
   color-scheme:light;
-  --background:#ffffff;
+  --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:#fafafa;
+  --card:#f2f2f2;
   --card-foreground:#0a0a0a;
-  --popover:#ffffff;
+  --popover:#fbfbfb;
   --popover-foreground:#0a0a0a;
   --primary:#0a0a0a;
   --primary-hover:#262626;
   --primary-foreground:#fafafa;
-  --secondary:#ededed;
+  --secondary:#e4e4e4;
   --secondary-hover:#e0e0e0;
   --secondary-foreground:#0a0a0a;
-  --muted:#f5f5f5;
+  --muted:#ededed;
   --muted-foreground:#525252;
-  --accent:#ededed;
+  --accent:#e4e4e4;
   --accent-foreground:#0a0a0a;
   --destructive:var(--state-error);
   --destructive-hover:#dc2626;
@@ -255,9 +255,9 @@
   --selection:rgb(0 0 0 / .16);
   --glass:rgb(0 0 0 / .04);
   --glass-strong:rgb(0 0 0 / .07);
-  --surface-card:#fafafa;
-  --surface-card-emphasis:#ffffff;
-  --surface-card-quiet:#fcfcfc;
+  --surface-card:#f2f2f2;
+  --surface-card-emphasis:#fdfdfd;
+  --surface-card-quiet:#f5f5f5;
   --surface-overlay:rgb(255 255 255 / .95);
   --surface-header:rgb(255 255 255 / .8);
   --surface-scrim:rgb(0 0 0 / .5);

package/tokens/elevation.css

@@ -53,6 +53,41 @@
   --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
   --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60);
   --shadow-2xl:var(--shadow-floating);
+
+  /* ——— the paper ——— */
+  /* Depth carries STATE, not decoration: which sheet is the workspace, which is
+     the tool in use, which one opened. Reach for a level before a border — if
+     two surfaces need separating, RAISE one rather than outline both, and a
+     surface that is already raised does not also need a box drawn round it.
+
+     A level is a tint AND the light on it, published as a pair, because the
+     alternative — every component composing its own `--edge-highlight,
+     --shadow-*` — is how two panels on one screen end up lit from two
+     directions. Every rung here is pure vertical: a 1px inset line along the
+     top edge, a drop straight down. One origin, above and slightly in front.
+
+     The tints are the surface recipes rather than new values, so sheets stack
+     the way paper does: each is an alpha-white wash, one laid on another lands
+     a step lighter, and the stack converges on #262626 instead of blowing out.
+
+     Nothing here is restated in `.light`, deliberately: every part defers to a
+     token that already flips, so the ramp inverts with the theme for free. */
+  --sheet-0:var(--surface-page);            /* the workspace ground             */
+  --sheet-1:var(--surface-card);            /* an active tool                   */
+  --sheet-2:var(--surface-card-emphasis);   /* what opened, or what is inside   */
+  --shadow-sheet-1:var(--edge-highlight),var(--shadow-md);
+  --shadow-sheet-2:var(--edge-highlight),var(--shadow-lg);
+
+  /* The fold — a corner turned back, and the one mark that means THIS OPENS.
+     Ornament nowhere: a sheet that does not expand does not wear one.
+     It is a background-image, so it costs no element and no pseudo-element —
+     paint it on the sheet itself and square that corner
+     (`border-bottom-right-radius:0`), because a folded corner is not round.
+     The flap catches the light like every other surface; the crease is the
+     hairline; both defer, so both invert. */
+  --fold:12px;
+  --fold-face:linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold)); /* @kind color */
+
   /* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
   --glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
   --glow-hero-blur:120px;

package/tokens/spacing.css

@@ -2,21 +2,27 @@
    declared in hanzo.ai's tailwind.config.ts (legacy v3 config, kept for
    reference) — use it for editorial layouts, not for component padding. */
 :root{
+  /* The density knob. 1 is the published spacing; every --space-* rung below
+     multiplies by it, and --grid-gap-* reference those rungs rather than
+     restating them, so gaps, padding and section rhythm move together.
+     @hanzo/design's `vars({density})` emits exactly this name. */
+  --density:1;
+
   --space-0:0;
-  --space-1:0.25rem;
-  --space-2:0.5rem;
-  --space-3:0.75rem;
-  --space-4:1rem;
-  --space-5:1.25rem;
-  --space-6:1.5rem;
-  --space-8:2rem;
-  --space-10:2.5rem;
-  --space-12:3rem;
-  --space-14:3.5rem;
-  --space-16:4rem;
-  --space-20:5rem;
-  --space-24:6rem;
-  --space-32:8rem;
+  --space-1:calc(0.25rem * var(--density, 1));
+  --space-2:calc(0.5rem * var(--density, 1));
+  --space-3:calc(0.75rem * var(--density, 1));
+  --space-4:calc(1rem * var(--density, 1));
+  --space-5:calc(1.25rem * var(--density, 1));
+  --space-6:calc(1.5rem * var(--density, 1));
+  --space-8:calc(2rem * var(--density, 1));
+  --space-10:calc(2.5rem * var(--density, 1));
+  --space-12:calc(3rem * var(--density, 1));
+  --space-14:calc(3.5rem * var(--density, 1));
+  --space-16:calc(4rem * var(--density, 1));
+  --space-20:calc(5rem * var(--density, 1));
+  --space-24:calc(6rem * var(--density, 1));
+  --space-32:calc(8rem * var(--density, 1));
 
   /* golden ramp (φ) — hanzo.ai tailwind.config.ts */
   --golden-1:0.25rem;

package/tokens/typography.css

@@ -5,19 +5,25 @@
    — the two are the SAME scale, mirrored. A surface/tenant overrides any --text-*
    on :root to retune density on demand. */
 :root{
-  --text-xs:0.6875rem;  --leading-xs:1rem;      /* 11px — eyebrows / section labels */
-  --text-sm:0.8125rem;  --leading-sm:1.15rem;   /* 13px — nav labels, dense body */
-  --text-base:0.875rem; --leading-base:1.35rem; /* 14px — base app text (was 16px) */
-  --text-lg:0.9375rem;  --leading-lg:1.4rem;    /* 15px */
-  --text-xl:1.0625rem;  --leading-xl:1.55rem;   /* 17px */
-  --text-2xl:1.3125rem; --leading-2xl:1.7rem;   /* 21px */
-  --text-3xl:1.625rem;  --leading-3xl:1.95rem;  /* 26px */
-  --text-4xl:2rem;      --leading-4xl:2.25rem;  /* 32px */
-  --text-5xl:2.5rem;    --leading-5xl:1.05;     /* 40px */
-  --text-6xl:3.25rem;   --leading-6xl:1;        /* 52px */
-  --text-7xl:4rem;      --leading-7xl:1;        /* 64px */
-  --text-8xl:5.25rem;   --leading-8xl:1;        /* 84px */
-  --text-9xl:7rem;      --leading-9xl:1;        /* 112px */
+  /* The type knob. 1 is the published scale; every rung below multiplies by
+     it, so a surface or a person retunes the WHOLE ramp by setting one
+     number and no rung can drift out of relation with the others.
+     @hanzo/design's `vars({type})` emits exactly this name. */
+  --type-scale:1;
+
+  --text-xs:calc(0.6875rem * var(--type-scale, 1));  --leading-xs:calc(1rem * var(--type-scale, 1));      /* 11px — eyebrows / section labels */
+  --text-sm:calc(0.8125rem * var(--type-scale, 1));  --leading-sm:calc(1.15rem * var(--type-scale, 1));   /* 13px — nav labels, dense body */
+  --text-base:calc(0.875rem * var(--type-scale, 1)); --leading-base:calc(1.35rem * var(--type-scale, 1)); /* 14px — base app text (was 16px) */
+  --text-lg:calc(0.9375rem * var(--type-scale, 1));  --leading-lg:calc(1.4rem * var(--type-scale, 1));    /* 15px */
+  --text-xl:calc(1.0625rem * var(--type-scale, 1));  --leading-xl:calc(1.55rem * var(--type-scale, 1));   /* 17px */
+  --text-2xl:calc(1.3125rem * var(--type-scale, 1)); --leading-2xl:calc(1.7rem * var(--type-scale, 1));   /* 21px */
+  --text-3xl:calc(1.625rem * var(--type-scale, 1));  --leading-3xl:calc(1.95rem * var(--type-scale, 1));  /* 26px */
+  --text-4xl:calc(2rem * var(--type-scale, 1));      --leading-4xl:calc(2.25rem * var(--type-scale, 1));  /* 32px */
+  --text-5xl:calc(2.5rem * var(--type-scale, 1));    --leading-5xl:1.05;     /* 40px */
+  --text-6xl:calc(3.25rem * var(--type-scale, 1));   --leading-6xl:1;        /* 52px */
+  --text-7xl:calc(4rem * var(--type-scale, 1));      --leading-7xl:1;        /* 64px */
+  --text-8xl:calc(5.25rem * var(--type-scale, 1));   --leading-8xl:1;        /* 84px */
+  --text-9xl:calc(7rem * var(--type-scale, 1));      --leading-9xl:1;        /* 112px */
 
   /* The SAME scale under @hanzo/brand's spelling. @hanzo/gui's shell theme and
      Hanzo Studio address the ramp as --font-size-*; both names are one value, so
@@ -82,5 +88,5 @@
    form feels broken. pointer:coarse is the real signal — a desktop mouse keeps
    the compact 13px field. */
 @media (pointer:coarse){
-  :root{--text-control:1rem}
+  :root{--text-control:calc(1rem * var(--type-scale, 1))}
 }