@godxjp/ui 19.1.0 → 19.2.0

package/dist/tokens/foundation.css

@@ -1,101 +1,51 @@
-/* Foundation tokens: color, typography, raw spacing, ratio, radius, shadow. */
+
 
 :root {
-  /* Color system (HSL components) — the reference design: warm hue-60 neutral spine,
-   * SmartHR blue primary, 和色/wa-iro semantics. */
-  --background: 60 33% 99%; /* #fdfdfb warm off-white */
-  --foreground: 48 8% 13%; /* #23221e SmartHR TEXT_BLACK */
+
+  --background: 60 33% 99%;
+  --foreground: 48 8% 13%;
   --card: 60 33% 99%;
   --card-foreground: 48 8% 13%;
   --popover: 60 33% 99%;
   --popover-foreground: 48 8% 13%;
-  /* SmartHR MAIN, two lightness steps down from #0077c7 (gh#299).
-   *
-   * The published blue measures 4.62:1 as TEXT on --background — compliant,
-   * but with 0.12 of headroom, which every tint this system applies to a row
-   * then spends: the zebra stripe (muted/0.4) takes it to 4.46 and hover
-   * (muted/0.5) to 4.43. A link inside a striped table therefore failed AA
-   * while the same link on a card passed, which is not a defensible place to
-   * draw that line. 37% clears every one of those states with margin and is
-   * indistinguishable from the original side by side. */
-  --primary: 204 100% 37%; /* SmartHR MAIN #0071bd */
+
+  --primary: 204 100% 37%;
   --primary-foreground: 60 33% 99%;
-  --secondary: 45 15% 95%; /* #f4f3f0 */
+  --secondary: 45 15% 95%;
   --secondary-foreground: 48 8% 13%;
   --muted: 45 15% 95%;
-  --muted-foreground: 44 5% 42%; /* #706d65 SmartHR TEXT_GREY */
-  --accent: 40 13% 91%; /* #ebe9e5 */
+  --muted-foreground: 44 5% 42%;
+  --accent: 40 13% 91%;
   --accent-foreground: 48 8% 13%;
-  --destructive: 357 64% 44%; /* 茜 #b7282e */
+  --destructive: 357 64% 44%;
   --destructive-foreground: 60 33% 99%;
-  --border: 30 7% 83%; /* #d6d3d0 SmartHR BORDER */
-  /* CONTROL BOUNDARY role — deliberately NOT the same value as --border (gh#315).
-   *
-   * The two roles answer different questions and are held to different bars:
-   *   · --border is DECORATIVE chrome — table rules, card edges, section dividers. WCAG 2.2
-   *     SC 1.4.11 does not reach it (nothing about a divider is "required to identify a
-   *     component or its state"), and darkening it would make the JP-dense table grid roar.
-   *     It stays exactly where it is.
-   *   · --input is the boundary that IS the control — the 1px edge of Input, Textarea, Select,
-   *     the outline Button, TagInput, the composite date field, the topbar search. `--input`
-   *     also fills the Switch's unchecked track. A text field here has NO fill of its own
-   *     (`background: hsl(var(--background))`) and NO shadow to speak of, so that edge is the
-   *     only thing that says "you may type here". That is squarely SC 1.4.11's 3:1 minimum.
-   *
-   * They shipped sharing `30 7% 83%`, which measured 1.46:1 on --background/--card — the one
-   * live WCAG failure a full DXS Platform sweep turned up. 53% clears 3:1 with margin on every
-   * surface a control actually sits on, not just the plain page (the gh#299 lesson: a value that
-   * passes on a card and fails inside a filter bar is not a line anyone can defend):
-   * --background/--card/--popover 3.47:1 · --muted/--secondary 3.18:1 · zebra stripe 3.35:1 ·
-   * row hover 3.32:1. It also lifts the Switch's unchecked track from 1.46:1 to 3.47:1 against
-   * both the page and its own white thumb, so "off" is finally a visible state.
-   * Guarded by src/tokens/__tests__/input-boundary-contrast.test.ts. */
-  --input: 30 7% 53%; /* #90877f — control boundary, ≥3:1 (WCAG 2.2 SC 1.4.11) */
+  --border: 30 7% 83%;
+
+  --input: 30 7% 53%;
   --ring: 204 100% 39%;
-  --success: 146 40% 58%; /* 若竹 #68be8d */
+  --success: 146 40% 58%;
   --success-foreground: 60 33% 99%;
-  --warning: 44 100% 49%; /* 山吹 #f8b500 */
+  --warning: 44 100% 49%;
   --warning-foreground: 48 8% 13%;
-  --info: 221 40% 50%; /* 群青 #4c6cb3 */
+  --info: 221 40% 50%;
   --info-foreground: 60 33% 99%;
-  --attention: 25 99% 46%; /* 朱 #eb6101 */
+  --attention: 25 99% 46%;
   --attention-foreground: 60 33% 99%;
 
-  /* IDENTITY role — the canonical GoDX emerald. This is the PRODUCT MARK colour (Logo `mark="godx"`
-   * / `tone="success"`, its wordmark, the email brand capsule), and it is deliberately THREE-WAY
-   * distinct:
-   *   · from --primary   — a service re-theming its action colour must never recolour the mark;
-   *   · from --success   — 若竹 #68be8d is the STATUS green (badges, progress, "saved" text) and
-   *                        stays exactly as it is. The mark previously borrowed it, which rendered
-   *                        the identity at #69bf8e instead of the canonical emerald — ΔE76 ≈ 17.5,
-   *                        a plainly wrong brand colour (gh#250/#214);
-   *   · from --text-brand / --color-brand — those are the BLUE brand-numeral TEXT slot and the
-   *                        Tailwind `text-brand` utility it feeds; unrelated, and not renamed here.
-   * Canonical value: oklch(0.595 0.137 162.94) = #009766, "kept distinct from SmartHR primary".
-   * The triplet is carried at one decimal so hsl() lands on that exact hex (an integer 160 100% 30%
-   * would drift to #009966). Dark lifts lightness only — same hue, same full chroma — so the mark
-   * stays the same emerald while clearing AA against the dark spine.
-   * There is no Tailwind `bg-brand` utility on purpose: `--color-brand` is already taken by
-   * --text-brand, so identity surfaces read `hsl(var(--brand))` directly in component CSS. */
-  --brand: 160.5 100% 29.6%; /* 翠 GoDX emerald #009766 */
+  --brand: 160.5 100% 29.6%;
   --brand-foreground: 60 33% 99%;
 
-  /* Extended text hierarchy (beyond --foreground / --muted-foreground) — themeable per service.
-   * Roles primitives bake in today: caption/meta, disabled, inline link, brand numerals. */
-  --text-tertiary: 44 5% 55%; /* lighter than muted-foreground — captions / meta */
-  --text-disabled: 40 6% 68%; /* disabled control text */
-  --text-link: 204 100% 39%; /* inline link — defaults to brand blue */
-  --text-brand: 204 100% 39%; /* brand-colored text / numerals */
-  /* Status TEXT colours — darker than the fill roles so small coloured text (a StatCard delta, an
-   * outline status badge label) clears WCAG AA 4.5:1 on white. The fill roles (--success/--warning/
-   * --info) stay the brighter wa-iro for badges/bars; only TEXT reads these via text-*-strong. */
-  --text-primary: 204 100% 30%; /* deep brand blue — AA brand text on the soft primary tint */
-  --text-success: 152 84% 22%; /* deep 若竹 — AA green text on white */
-  --text-warning: 36 100% 28%; /* dark 山吹 amber — yellow can never pass as text */
-  --text-info: 221 70% 38%; /* deep 群青 — AA blue text on white */
-  --text-error: 357 75% 38%; /* deep 茜 — AA red text on white */
-
-  /* Interaction ramp — hover / active steps (services override to their own brand ramp). */
+  --text-tertiary: 44 5% 55%;
+  --text-disabled: 40 6% 68%;
+  --text-link: 204 100% 39%;
+  --text-brand: 204 100% 39%;
+
+  --text-primary: 204 100% 30%;
+  --text-success: 152 84% 22%;
+  --text-warning: 36 100% 28%;
+  --text-info: 221 70% 38%;
+  --text-error: 357 75% 38%;
+
   --primary-hover: 204 100% 33%;
   --primary-active: 204 100% 28%;
   --secondary-hover: 45 15% 91%;
@@ -103,24 +53,20 @@
   --destructive-hover: 357 64% 38%;
   --destructive-active: 357 64% 32%;
 
-  /* 和色 (wa-iro) — traditional Japanese accent palette for charts, tags,
-   * decoration. Decorative hex (NOT semantic): never remap a wa-iro to a
-   * semantic role beyond the five canonical mappings used above. */
-  --wa-ai: #165e83; /* 藍   indigo */
-  --wa-gunjo: #4c6cb3; /* 群青 ultramarine */
-  --wa-ruri: #1e50a2; /* 瑠璃 lapis */
-  --wa-kon: #223a70; /* 紺   navy */
-  --wa-wakatake: #68be8d; /* 若竹 young bamboo */
-  --wa-moegi: #006e54; /* 萌葱 spring green */
-  --wa-yamabuki: #f8b500; /* 山吹 mountain yellow */
-  --wa-shu: #eb6101; /* 朱   vermilion */
-  --wa-akane: #b7282e; /* 茜   madder */
-  --wa-enji: #b94047; /* 臙脂 cochineal */
-  --wa-sakura: #fef4f4; /* 桜   cherry (soft bg) */
-  --wa-sumi: #595857; /* 墨   warm ink */
-  --wa-nezu: #949495; /* 鼠   mouse-grey */
-
-  /* Chart accents are neutral decorative primitives, not business semantics. */
+  --wa-ai: #165e83;
+  --wa-gunjo: #4c6cb3;
+  --wa-ruri: #1e50a2;
+  --wa-kon: #223a70;
+  --wa-wakatake: #68be8d;
+  --wa-moegi: #006e54;
+  --wa-yamabuki: #f8b500;
+  --wa-shu: #eb6101;
+  --wa-akane: #b7282e;
+  --wa-enji: #b94047;
+  --wa-sakura: #fef4f4;
+  --wa-sumi: #595857;
+  --wa-nezu: #949495;
+
   --chart-1: #0077c7;
   --chart-2: #006e54;
   --chart-3: #f8b500;
@@ -128,18 +74,13 @@
   --chart-5: #4c6cb3;
   --chart-6: #eb6101;
 
-  /* Disabled affordance opacity — single knob (was referenced but undefined → silent failure). */
   --disabled-opacity: 0.5;
 
-  /* Shape and elevation */
-  /* 6px base × scaling; override to retheme every radius step */
   --radius: calc(0.375rem * var(--scaling));
-  --radius-ratio: 1.618; /* φ — radii scale by the golden ratio (steps derive in @theme) */
-  --radius-pill: 9999px; /* fully-round: switch / radio / slider / pill badges (NOT --radius-derived) */
-  --radius-sharp: 0; /* squared corners: table cells, flush inputs */
-  /* Elevation ramp. `--shadow-color` is the single brand-tint hook (space-separated RGB channels):
-   * a service can set e.g. `--shadow-color: 12 26 49` (navy) to tint the WHOLE ramp at once. These
-   * own `--shadow-md` too, so dropdown/popover/nav no longer borrow Tailwind's foreign gray-black. */
+  --radius-ratio: 1.618;
+  --radius-pill: 9999px;
+  --radius-sharp: 0;
+
   --shadow-color: 0 0 0;
   --shadow-xs: 0 1px 1px 0 rgb(var(--shadow-color) / 0.04);
   --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
@@ -151,18 +92,8 @@
     0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 8px 10px -6px rgb(var(--shadow-color) / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
 
-  /* Brand GLOW — an opt-in coloured halo for the primary CTA (and any surface that opts in).
-   * Quiet by default (cardinal rule #44): a zero-size transparent shadow, which is invalid as a
-   * bare `none` inside a comma shadow list but valid as `0 0 0 0 transparent`. A service turns it
-   * on by overriding the whole value once, e.g. `--shadow-glow: 0 8px 20px hsl(var(--primary) / .32)`
-   * — the CTA then carries a brand glow with no component change. */
   --shadow-glow: 0 0 0 0 transparent;
 
-  /* Brand SPOTLIGHT — a decorative radial brand halo for hero / auth backdrops (the `.ui-brand-glow`
-   * utility paints this as a background-image on an aria-hidden layer). Every knob is a token, so a
-   * service retints (`--brand-glow-color`), softens (`--brand-glow-alpha`), resizes
-   * (`--brand-glow-size`) or repositions (`--brand-glow-position`) the halo with no markup change;
-   * override the whole `--brand-glow` for a bespoke gradient. Default: a soft primary glow up top. */
   --brand-glow-color: var(--primary);
   --brand-glow-alpha: 0.18;
   --brand-glow-size: 60% 50%;
@@ -173,160 +104,77 @@
     transparent 70%
   );
 
-  /* FOCUS RING — the two global knobs for the keyboard-focus affordance (WCAG 2.4.7 / 2.4.11).
-   * `--focus-ring-color` is the themeable hue (HSL components, defaults to --ring) and
-   * `--focus-ring-width` the standard thickness; override either ONCE — even scoped under a
-   * `[data-tenant]` — to retint or resize EVERY focus ring. `--focus-ring-color` is declared
-   * `initial` (NOT `var(--ring)`): a :root binding to a role var would freeze at the :root --ring
-   * and a scoped [data-tenant] override of --ring alone would never reach it. Every :focus-visible
-   * rule reads it with the live-role fallback `hsl(var(--focus-ring-color, var(--ring)))`, so the
-   * default re-resolves at the element that paints the ring while an explicit override still wins. */
-  --focus-ring-color: initial; /* default = the live --ring role */
+  --focus-ring-color: initial;
   --focus-ring-width: var(--stroke-md);
-  /* Alpha of the ring fill. Exists so a component that needs a SOFTER ring
-   * (a filled toggle, tinted shell chrome) tunes one knob instead of writing
-   * its own `hsl(... / 0.35)` — which is how four incompatible ring shapes
-   * appeared before the single-source rule in styles/focus-ring.css. */
+
   --focus-ring-opacity: 1;
-  /* Gap between element and ring, for the OUTLINE form only (a star, a dot, a
-   * heading anchor — marks where a radius-hugging shadow would touch the
-   * glyph). The shadow form ignores it by construction. */
+
   --focus-ring-offset: 0px;
-  /* Ring headroom for clipped chrome (`overflow-clip-margin` on the topbar family, gh#291).
-   * MUST stay a plain length consumed via a bare var(): Chromium rejects any calc() in
-   * overflow-clip-margin at parse time (even calc(2 * 2px)), silently dropping the
-   * declaration to 0. Value = max ring paint (3px open/focus) + rounding immunity:
-   * at 4px a flush-edge ring had only 1px of slack, which device-pixel rounding on
-   * non-retina (dpr 1) displays or fractional browser zoom could consume, shaving the
-   * ring's outer edge. 8px keeps ≥5px of slack under any rounding regime. */
+
   --focus-ring-clip-margin: 8px;
-  /* REGION focus ring — the keyboard-scroll affordance on large scroll REGIONS (`.app-main`,
-   * gh#271/gh#276), separate from the control ring above. A control-strength 2px brand frame
-   * around the entire content area reads as a glitch to mouse-first users (`:focus-visible`
-   * promotes on any keypress after a click-focus), so the DEFAULT IS OFF — a deliberate,
-   * product-owner tradeoff against WCAG 2.4.7 for keyboard-scroll visibility. A service that
-   * needs the visible affordance opts in with ONE token:
-   *   --region-focus-ring-width: var(--focus-ring-width);
-   * `--region-focus-ring-color` is declared `initial` (NOT a :root var binding — the freeze
-   * rule) and resolves to the live focus-ring hue at the element that paints it. */
+
   --region-focus-ring-width: 0;
-  --region-focus-ring-color: initial; /* default = hsl(var(--focus-ring-color, var(--ring))) */
-
-  /* GRADIENTS — opt-in decorative fills exposed at the token layer so a service can paint a hero
-   * banner, a brand wash, or a radial brand glow purely by configuring tokens (cardinal rule #45).
-   * All default to a transparent no-op so nothing renders until a theme opts in; a surface that
-   * supports a gradient reads one of these as its background-image. Examples a service might set:
-   *   --gradient-brand: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
-   *   --gradient-hero:  linear-gradient(180deg, hsl(var(--secondary)), hsl(var(--background)));
-   *   --gradient-glow:  radial-gradient(60% 80% at 50% 0%, hsl(var(--primary) / .25), transparent); */
+  --region-focus-ring-color: initial;
+
   --gradient-brand: none;
   --gradient-hero: none;
   --gradient-glow: none;
 
-  /* Sans stack — FONT-AGNOSTIC by default. The library ships NO hardcoded brand
-   * face here: `--font-sans-base` is a pure system stack so godx renders cleanly
-   * with zero font setup. Consumers supply their own faces (next/font, @fontsource,
-   * self-host) and set the tokens — never edit the library.
-   *
-   * Two ways to theme fonts, both token-only (no [lang] selectors to write):
-   *   1. One face everywhere → override `--font-sans-base`.
-   *   2. Per-language faces → set the per-lang SLOT tokens; styles/base.css wires
-   *      each `[lang]` to read its slot with `--font-sans-base` as the fallback:
-   *        --font-sans-ja       (lang="ja")
-   *        --font-sans-ko       (lang="ko")
-   *        --font-sans-vi       (lang="vi")
-   *        --font-sans-zh-hans  (lang="zh" | "zh-Hans" | "zh-CN")
-   *        --font-sans-zh-hant  (lang="zh-Hant" | "zh-TW")
-   *      e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base);`
-   * The opt-in bundle `@godxjp/ui/styles/fonts` overwrites `--font-sans-base`
-   * (and `--font-sans-vi`) with the DXS bundle — "Noto Sans JP" primary, "M PLUS 2"
-   * as its fallback — so the all-in-one entry is zero-config. That fill also
-   * lands on `:root` at THIS specificity, so `styles/fonts` MUST be imported AFTER
-   * `styles/base`, or the system stack below silently wins (issue #210). */
   --font-sans-base:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
     sans-serif;
   --font-family-sans: var(--font-sans-base);
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  /* Dual-font split (opt-in) — many brand designs pair a DISPLAY face for headings with a separate
-   * BODY face (e.g. Source Sans 3 display + Inter body). Both default to --font-family-sans, so a
-   * single-font system is unchanged; a service overrides one or both. Headings read
-   * --font-family-display, body reads --font-family-body (wired in styles/index.css @layer base). */
+
   --font-family-display: var(--font-family-sans);
   --font-family-body: var(--font-family-sans);
-  /* ── Type scale — GOLDEN-RATIO modular scale (Ant/Tailwind model). ONE base + ONE ratio; every
-   * step is base × ratioⁿ, so the whole scale stays in golden proportion. `--font-size-ratio` is
-   * φ^¼ (the golden ratio's quarter-step ≈ 1.1227) — a TRUE golden ratio yet dense enough that
-   * headings stay small (h1≈20, h2≈18; pure φ=1.618 would be marketing-size). Internal apps get the
-   * 14px DEFAULT with ZERO config; a customer overrides `--font-size-base` (and optionally
-   * `--font-size-ratio`) and the entire scale rescales in golden proportion. */
-  --font-size-base: 0.875rem; /* 14px — THE base (= <body>). The single knob; override to retheme. */
-  --font-size-ratio: 1.1227; /* φ^¼ — golden-ratio step (φ=1.618, φ^¼ keeps the dense scale small) */
+
+  --font-size-base: 0.875rem;
+  --font-size-ratio: 1.1227;
   --font-size-2xs: calc(
     var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)
-  ); /* ratio⁻² ≈ 11px */
-  --font-size-xs: calc(var(--font-size-base) / var(--font-size-ratio)); /* ratio⁻¹ ≈ 12.5px */
-  --font-size-sm: var(--font-size-base); /* 14px — body (alias of base) */
+  );
+  --font-size-xs: calc(var(--font-size-base) / var(--font-size-ratio));
+  --font-size-sm: var(--font-size-base);
   --font-size-lg: calc(
     var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)
-  ); /* ratio² ≈ 17.6px */
-  --font-size-xl: calc(var(--font-size-lg) * var(--font-size-ratio)); /* ratio³ ≈ 19.8px */
-  --font-size-2xl: calc(var(--font-size-xl) * var(--font-size-ratio)); /* ratio⁴ ≈ 22.3px */
-
-  /* DISPLAY type — OPT-IN large sizes for MARKETING / hero surfaces (landing pages, CTA banners).
-   * The enterprise heading scale stays small by design (h1 = 20px, 渋み restraint); these are a
-   * SEPARATE bolder ramp a marketing surface opts into via the text-3xl/-4xl/-5xl utilities (wired
-   * in styles/index.css @theme). A service rescales the whole display ramp from --font-size-display
-   * (its own base). Nothing in the admin system uses them, so defaults are unchanged. */
-  --font-size-display: 3.375rem; /* 54px — hero display (the single display knob) */
-  --font-size-display-ratio: 1.28; /* bolder step than the body φ^¼ — marketing wants more contrast */
+  );
+  --font-size-xl: calc(var(--font-size-lg) * var(--font-size-ratio));
+  --font-size-2xl: calc(var(--font-size-xl) * var(--font-size-ratio));
+
+  --font-size-display: 3.375rem;
+  --font-size-display-ratio: 1.28;
   --font-size-3xl: calc(
     var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)
-  ); /* ≈ 33 → 28px feature heading */
+  );
   --font-size-4xl: calc(
     var(--font-size-display) / var(--font-size-display-ratio)
-  ); /* ≈ 36px section */
-  --font-size-5xl: var(--font-size-display); /* 54px hero */
+  );
+  --font-size-5xl: var(--font-size-display);
 
-  /* Headings — also golden-derived. h1=ratio³, h2=ratio²; h3/h4 reuse body sizes (single source). */
   --heading-h1: calc(
     var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio)
-  ); /* ≈ 20px */
+  );
   --heading-h2: calc(
     var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)
-  ); /* ≈ 18px */
-  --heading-h3: var(--font-size-base); /* 14px — h3 */
-  --heading-h4: var(--font-size-xs); /* ≈ 12.5px — h4 */
+  );
+  --heading-h3: var(--font-size-base);
+  --heading-h4: var(--font-size-xs);
 
   --font-weight-normal: 400;
   --font-weight-medium: 500;
-  /* the reference design uses three weights only: 400 body · 500 heading/label · 700 emphasis. 600 is
-   * forbidden (ambiguous between 500 and 700) — the legacy "semibold" token collapses to medium
-   * so any remaining reference renders at 500. `bold` is the 700 emphasis weight. */
+
   --font-weight-semibold: 500;
   --font-weight-bold: 700;
-  /* Display/black weight — OPT-IN for marketing display type (hero/CTA). The enterprise system caps
-   * at 700 (簡素 restraint); this is only reached via the .font-display-weight utility / a service
-   * setting it on a display surface, so admin text is unchanged. */
+
   --font-weight-black: 800;
   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-body: 1.7;
   --letter-spacing-tight: 0;
 
-  /* ── SCALING — the one global density knob (Radix Themes model). A single
-   * dimensionless multiplier on every SIZE token (spacing grid, control / table /
-   * checkbox / switch heights, radius), so the whole UI rescales in proportion
-   * from one place. `1` = the design baseline. The `density` axis sets named
-   * presets (compact .92 · default 1 · comfortable 1.08); AppProvider's `scaling`
-   * prop sets any value continuously. Type has its OWN base+ratio (--font-size-base)
-   * and is NOT scaled here — fontSize stays an orthogonal axis. Touch targets
-   * (--touch-target-min) are also exempt (a11y minimum). */
   --scaling: 1;
 
-  /* Raw spacing scale — the 4px grid, scaled. Everything that derives from
-   * --space-* (padding, gaps, --phi-unit, semantic spacing, chrome) inherits the
-   * scaling automatically; this is the single highest-leverage scaling point. */
   --space-0: 0;
   --space-1: calc(0.25rem * var(--scaling));
   --space-2: calc(0.5rem * var(--scaling));
@@ -338,115 +186,31 @@
   --space-10: calc(2.5rem * var(--scaling));
   --space-12: calc(3rem * var(--scaling));
 
-  /* ── ICON SIZE — the geometric axis that had a vocabulary but no name (gh#326).
-   *
-   * 28 component tokens were declaring raw numbers, and between them they only ever used NINE
-   * values. The scale was already there; nobody had written it down. These nine names ARE that
-   * list — naming an existing vocabulary, not inventing a new one.
-   *
-   * A FIXED LIST, NOT A RATIO. Unlike --font-size-* there is no `base * ratio^n` here, and that
-   * is deliberate: 14/16 = 0.875 but 20/16 = 1.25, so no single ratio generates these steps.
-   * Type can sit between pixels because hinting and antialiasing carry it; a 1px-stroke glyph
-   * cannot — half a pixel of icon is a blurred icon. So every step is a whole pixel at the 16px
-   * root, and a service retunes a STEP rather than a ratio.
-   *
-   * NOT SCALED HERE. --scaling is applied by the tokens that opt IN
-   * (`calc(var(--icon-size-md) * var(--scaling))`, as --control-icon-size does), so the scale
-   * itself stays the crisp whole-pixel list. Density is a per-token decision, not a property of
-   * the vocabulary.
-   *
-   * TIER 1 / TIER 2 — where the boundary sits. These nine steps are tier 1: the value appears in
-   * more than one place, so it earns a name and a service retunes it once. A value that appears
-   * in exactly ONE place (the 6px status dot) is tier 2 and does NOT belong on the scale — set
-   * that component's own `--*-icon-size` / `--*-glyph-size` token at the call site instead
-   * (`style={{ "--menu-icon-size": "6px" }}` or a `[data-…]`-scoped rule in the app theme). An
-   * inline custom property wins by inheritance proximity, so tier 2 needs no `!important`, no
-   * `:root` override and no fork. Every icon rule in src/styles reads its token through `var()`
-   * with no literal fallback, which is what keeps that route open — see docs/TOKENS.md. */
-  --icon-size-2xs: 0.625rem; /* 10px */
-  --icon-size-xs: 0.75rem; /* 12px */
-  --icon-size-sm: 0.875rem; /* 14px */
-  --icon-size-md: 1rem; /* 16px — the default icon step */
-  --icon-size-lg: 1.25rem; /* 20px */
-  --icon-size-xl: 1.5rem; /* 24px */
-  --icon-size-2xl: 2.25rem; /* 36px */
-  --icon-size-3xl: 2.5rem; /* 40px */
-  --icon-size-4xl: 3rem; /* 48px */
-
-  /* ── STROKE — the thickness of a painted LINE (gh#324, the second axis to be named).
-   *
-   * gh#324 measured `width` at 91% raw and called it the worst axis in the system. It is not one
-   * axis. Three unrelated concerns wear the `-width` suffix: the thickness of a drawn line, the
-   * measure of a container (a dialog, a reading column, a sidebar), and the content width of a
-   * field (how wide a locale picker must be to hold its longest label). Only the FIRST is a
-   * vocabulary — see the verdict recorded in `scripts/token-scale-bypass-rules.mjs`.
-   *
-   * The vocabulary was already there and repeats hard: SIX values across ~20 tokens spanning
-   * borders, focus rings, accent rails, selected-state markers and presence strokes. Naming it is
-   * what lets a service retune line weight once — a hi-dpi theme that wants 1.5px hairlines, or a
-   * high-contrast theme that wants every emphasis stroke at 3px — instead of hunting 20 tokens.
-   *
-   * PIXELS, NOT REM, AND DELIBERATELY SO. A stroke is a DEVICE line: its job is to read as one
-   * crisp rule at any type size, so it must not grow when the root font-size does. Every token
-   * that moves onto this scale was already `px` for that reason; a `rem` thickness
-   * (`--slider-track-height: 0.375rem`) is a different decision and stays where it is.
-   *
-   * NOT SCALED. `--scaling` is a DENSITY knob — it tightens the spacing rhythm, and a 1px divider
-   * that became 0.92px under compact density would blur, not tighten. No token on this axis
-   * multiplies by it today and none should.
-   *
-   * `--stroke-hairline` sits BELOW `--stroke-sm` rather than being called `xs`, because 1px is
-   * not really a step: it is the device hairline, the one thickness a service retunes the
-   * EXISTENCE of rather than the value (cardinal rule #44). The scale-bypass guard exempts a bare
-   * `1px` for the same reason. Naming it anyway gives the retune-the-value route to the themes
-   * that want it.
-   *
-   * TIER 2 — a thickness that appears in exactly one place does not belong here. Set that
-   * component's own `--*-border-width` / `--*-ring-width` token at the call site or in the app
-   * theme; every stroke rule in src/styles reads its token through `var()`. */
-  --stroke-hairline: 1px; /* every resting border, divider and rule */
+  --icon-size-2xs: 0.625rem;
+  --icon-size-xs: 0.75rem;
+  --icon-size-sm: 0.875rem;
+  --icon-size-md: 1rem;
+  --icon-size-lg: 1.25rem;
+  --icon-size-xl: 1.5rem;
+  --icon-size-2xl: 2.25rem;
+  --icon-size-3xl: 2.5rem;
+  --icon-size-4xl: 3rem;
+
+  --stroke-hairline: 1px;
   --stroke-sm: 1.5px;
-  --stroke-md: 2px; /* the emphasis stroke — focus rings, selected markers */
+  --stroke-md: 2px;
   --stroke-lg: 3px;
   --stroke-xl: 4px;
   --stroke-2xl: 6px;
 
-  /* ── BAND HEIGHT — the vertical extent of a horizontal band that content is centred in
-   * (gh#324, the third axis to be named).
-   *
-   * Same split as `width`: `height` is TWO concerns wearing one suffix. A control, a table row, a
-   * menu item, a sidebar nav row and the app-shell top bar are all the same decision — how tall
-   * is the band this content sits in — and they share ONE vocabulary of seven values, each of
-   * which is declared by two to five tokens. A chart plot's height, a transfer pane's min-height
-   * and a select popover's max-height are the OTHER concern: container measures, chosen per
-   * surface, with almost no repeated value between them. Those are tier 2 and stay literal.
-   *
-   * gh#324's fourth case is the whole argument: `PageContainer`'s chrome band had no height token
-   * while `AppShell`'s bar did, so nothing could be aligned to it. The two were never conceived
-   * as members of one axis, because the axis had no name.
-   *
-   * WHY THIS IS NOT `--control-height-*`. The control tier is a RUNTIME LADDER: `--control-height`
-   * multiplies by `--scaling`, `-sm`/`-lg`/`-xs` step off it, and `@media (pointer: coarse)` lifts
-   * the whole ladder to the 44px tap floor. This scale is the STATIC vocabulary that the ladder is
-   * anchored on — `--control-height-default: var(--band-height-md)` — exactly as `--font-size-base`
-   * anchors the type scale. Do NOT point a band token at `--control-height-*` to "reuse a step":
-   * that silently enrols it in density AND in the coarse-pointer growth, which is a geometry
-   * change, not a rename. `--table-row-height-default` is `var(--band-height-md)` and NOT
-   * `var(--control-height-default)` for precisely that reason.
-   *
-   * NOT SCALED HERE, for the gh#328 reason: whether a band breathes with density is a per-token
-   * decision made long ago. `--control-height` opts in (`calc(… * var(--scaling))`);
-   * `--app-shell-bar-height` deliberately does not. Baking `--scaling` into the scale would flip
-   * every one of them at once. */
-  --band-height-xs: 1.5rem; /* 24px */
-  --band-height-sm: 1.75rem; /* 28px */
-  --band-height-md: 2rem; /* 32px — the default control/row band */
-  --band-height-lg: 2.25rem; /* 36px */
-  --band-height-xl: 2.75rem; /* 44px — the WCAG 2.2 AA touch floor (rule #24) */
-  --band-height-2xl: 3rem; /* 48px */
-  --band-height-3xl: 3.5rem; /* 56px */
-
-  /* Golden ratio scale */
+  --band-height-xs: 1.5rem;
+  --band-height-sm: 1.75rem;
+  --band-height-md: 2rem;
+  --band-height-lg: 2.25rem;
+  --band-height-xl: 2.75rem;
+  --band-height-2xl: 3rem;
+  --band-height-3xl: 3.5rem;
+
   --ratio-phi: 1.6180339887;
   --phi-unit: var(--space-4);
   --phi-n2: calc(var(--phi-unit) / var(--ratio-phi) / var(--ratio-phi));
@@ -456,13 +220,6 @@
   --phi-p2: calc(var(--phi-p1) * var(--ratio-phi));
 }
 
-/* SCALE-FIXED — pin a subtree to the baseline size (--scaling 1) so persistent
- * chrome (the AppShell topbar, the global search palette, …) does NOT resize with
- * the density axis. Setting only --scaling:1 is insufficient: the size tokens were
- * already substituted at :root and inherit baked, so each --scaling-derived token
- * (and every semantic token that aliases the spacing grid) is RE-DECLARED here to
- * re-resolve at baseline. Apply via `className="… ui-scale-fixed"`. Must list every
- * scaled token — the scale-fixed coverage test guards against drift. */
 .ui-scale-fixed {
   --scaling: 1;
   --space-1: 0.25rem;
@@ -476,10 +233,7 @@
   --space-12: 3rem;
   --radius: 0.375rem;
   --control-height: var(--control-height-default);
-  /* baseline tier values (2rem ∓ step) read straight off the band scale — keeps the
-   * control-sizing guard happy and avoids re-deriving from the (baked) active
-   * --control-height. Scale steps rather than literals since gh#324, so a service that
-   * retunes --band-height-* retunes the scale-fixed chrome with everything else. */
+
   --control-height-sm: var(--band-height-sm);
   --control-height-lg: var(--band-height-lg);
   --control-height-xs: var(--band-height-xs);
@@ -513,10 +267,6 @@
   --space-chrome-gap: var(--space-2);
   --field-label-gap: var(--space-2);
 
-  /* Motion — the primitive tier for animation, so enter/transition timing reads a token
-   * instead of a literal 0.5s / cubic-bezier(...) / translateY(10px) (cardinal rule #2).
-   * the reference design keeps motion LOW: short durations, a calm decelerate curve, a small reveal shift.
-   * Consumers honour prefers-reduced-motion at the call site. */
   --duration-fast: 150ms;
   --duration-base: 250ms;
   --duration-slow: 500ms;
@@ -525,38 +275,26 @@
   --ease-decelerate: cubic-bezier(0, 0, 0, 1);
   --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
   --reveal-distance: 10px;
-  /* One step of the Reveal stagger ladder — `<Reveal delay={n}>` waits n × this before entering,
-   * so a column of reveals cascades. Read instead of a literal `.04s`/`.09s` per-item delay. */
+
   --reveal-stagger-step: 60ms;
 
-  /* AMBIENT/LOOPING motion (gh#313) — the cycle member of the motion tier. `--duration-fast|base|
-   * slow` time a TRANSITION (something moves from A to B and stops); a loop needs an INTERVAL, so
-   * every ambient affordance in the product breathes at one rate. `Activity` reads these; the
-   * remaining Activity knobs (geometry / colour) live in tokens/components/activity.css.
-   * NOTE these two are Activity-scoped but live HERE, beside `--reveal-*`, because the motion tier
-   * is where timing belongs and because component-token names must carry a geometry/colour
-   * property word (`check-token-tiers`) — there is none for a duration. */
   --duration-loop: 1400ms;
-  /* Per-component override (#45): a service tunes its typing rhythm without moving every loop. */
+
   --activity-interval: var(--duration-loop);
-  /* Offset between the three `dots` marks — the loop counterpart to `--reveal-stagger-step`,
-   * named to match. In RTL the dots reverse with the row, so the cascade follows the reading
-   * direction with no extra rule. */
+
   --activity-stagger-step: 160ms;
 }
 
 .dark,
 :root[data-theme="dark"] {
-  /* Warm-tinted dark spine — keeps the hue-60 character at low lightness.
-   * `data-theme="dark"` is the theme axis (AppProvider theme prop → <html>); the
-   * legacy `.dark` class stays an equal alias so existing toggles keep working. */
+
   --background: 48 9% 9%;
   --foreground: 60 20% 96%;
   --card: 48 8% 12%;
   --card-foreground: 60 20% 96%;
   --popover: 48 8% 12%;
   --popover-foreground: 60 20% 96%;
-  --primary: 204 90% 60%; /* SmartHR blue lifted for dark contrast */
+  --primary: 204 90% 60%;
   --primary-foreground: 48 9% 9%;
   --secondary: 45 6% 18%;
   --secondary-foreground: 60 20% 96%;
@@ -564,20 +302,12 @@
   --muted-foreground: 44 6% 64%;
   --accent: 45 7% 22%;
   --accent-foreground: 60 20% 96%;
-  /* Filled destructive surfaces (button/badge/step) must clear WCAG AA (4.5:1) with comfortable
-   * margin, not sit on the floor (gh#199 — dark default was 4.54:1). Base darkened 52%→48% and the
-   * on-fill text lifted to pure white → ~5.5:1; states go DARKER (never lighter, which cut contrast
-   * against the light label). Error TEXT on dark surfaces uses --text-error, not this fill token. */
+
   --destructive: 357 55% 48%;
   --destructive-foreground: 0 0% 100%;
   --border: 45 6% 22%;
-  /* Control boundary (dark) — recomputed on the dark spine, not merely lightened by eye
-   * (gh#315). The dark pair shared `45 6% 22%`, which sat at 1.55:1 on --background and 1.43:1
-   * on the --card/--popover surface where dialogs put their fields. 47% gives
-   * --background 4.22:1 · --card/--popover 3.88:1 · --muted/--secondary 3.17:1 · zebra 3.81:1 ·
-   * hover 3.71:1. --border stays at 22%: dividers are decorative and a dark grid at 47% would
-   * read as a wireframe. See the light block above for the full reasoning. */
-  --input: 45 6% 47%; /* #7f7b71 — control boundary, ≥3:1 (WCAG 2.2 SC 1.4.11) */
+
+  --input: 45 6% 47%;
   --ring: 204 90% 60%;
   --success: 146 45% 55%;
   --success-foreground: 48 9% 9%;
@@ -588,20 +318,15 @@
   --attention: 25 95% 56%;
   --attention-foreground: 48 9% 9%;
 
-  /* IDENTITY (dark) — the SAME canonical emerald hue/chroma, lifted 29.6% → 36% lightness so the
-   * mark reads off the warm near-black spine (#00b87c: 6.9:1 on --background, 6.3:1 on --card;
-   * the unlifted #009766 sat at 4.4:1 on the card). The on-fill glyph flips dark, exactly like
-   * --success-foreground does. */
-  --brand: 160.5 100% 36%; /* #00b87c */
+  --brand: 160.5 100% 36%;
   --brand-foreground: 48 9% 9%;
 
-  /* Extended text hierarchy + interaction ramp (dark) */
   --text-tertiary: 44 6% 56%;
   --text-disabled: 45 6% 40%;
   --text-link: 204 90% 66%;
   --text-brand: 204 90% 66%;
-  /* Status text on the dark spine reads LIGHT (AA on dark surfaces). */
-  --text-primary: 204 90% 64%; /* lifted brand blue — AA on the dark primary tint */
+
+  --text-primary: 204 90% 64%;
   --text-success: 146 55% 64%;
   --text-warning: 44 95% 62%;
   --text-info: 221 70% 72%;