@bysages/tokens 0.2.2 → 0.3.0

package/dist/css/index.css

@@ -98,6 +98,39 @@
     --bs-color-info-800: oklch(0.364 0.092 250);
     --bs-color-info-900: oklch(0.3 0.072 250);
     --bs-color-info-950: oklch(0.232 0.052 250);
+    --bs-color-feicui-50: oklch(0.969 0.023 161.8);
+    --bs-color-feicui-100: oklch(0.922 0.053 162.4);
+    --bs-color-feicui-200: oklch(0.879 0.084 161.6);
+    --bs-color-feicui-300: oklch(0.821 0.119 158.8);
+    --bs-color-feicui-400: oklch(0.753 0.173 155.2);
+    --bs-color-feicui-500: oklch(0.738 0.191 152.4);
+    --bs-color-feicui-600: oklch(0.710 0.189 151.2);
+    --bs-color-feicui-700: oklch(0.641 0.169 151.5);
+    --bs-color-feicui-800: oklch(0.570 0.150 151.6);
+    --bs-color-feicui-900: oklch(0.417 0.104 153.6);
+    --bs-color-feicui-950: oklch(0.310 0.075 154.0);
+    --bs-color-jilan-50: oklch(0.959 0.019 260.2);
+    --bs-color-jilan-100: oklch(0.903 0.046 256.5);
+    --bs-color-jilan-200: oklch(0.824 0.084 262.4);
+    --bs-color-jilan-300: oklch(0.752 0.120 262.4);
+    --bs-color-jilan-400: oklch(0.689 0.151 258.1);
+    --bs-color-jilan-500: oklch(0.648 0.190 256.7);
+    --bs-color-jilan-600: oklch(0.605 0.190 257.1);
+    --bs-color-jilan-700: oklch(0.555 0.179 257.6);
+    --bs-color-jilan-800: oklch(0.450 0.127 254.4);
+    --bs-color-jilan-900: oklch(0.360 0.105 256.8);
+    --bs-color-jilan-950: oklch(0.270 0.080 257.0);
+    --bs-color-qingjin-50: oklch(0.957 0.016 262.8);
+    --bs-color-qingjin-100: oklch(0.883 0.046 263.7);
+    --bs-color-qingjin-200: oklch(0.809 0.078 262.9);
+    --bs-color-qingjin-300: oklch(0.757 0.100 263.2);
+    --bs-color-qingjin-400: oklch(0.615 0.168 262.0);
+    --bs-color-qingjin-500: oklch(0.536 0.181 260.3);
+    --bs-color-qingjin-600: oklch(0.492 0.217 261.4);
+    --bs-color-qingjin-700: oklch(0.440 0.193 261.2);
+    --bs-color-qingjin-800: oklch(0.384 0.163 260.7);
+    --bs-color-qingjin-900: oklch(0.299 0.110 258.3);
+    --bs-color-qingjin-950: oklch(0.220 0.082 258.5);
     --bs-space-1: 0.25rem;
     --bs-space-2: 0.5rem;
     --bs-space-3: 0.75rem;
@@ -154,8 +187,11 @@
     --bs-color-scrim: oklch(0.15 0.007 76 / 0.4);
 
     --bs-color-text-primary: var(--bs-color-gray-900);
-    --bs-color-text-secondary: var(--bs-color-gray-600);
-    --bs-color-text-tertiary: var(--bs-color-gray-500);
+    /* The quiet voices still clear AA on the resting paper: secondary at
+       gray-700 and tertiary at gray-600 both hold past 4.5:1 on surface-0,
+       so metadata never trades legibility for hierarchy. */
+    --bs-color-text-secondary: var(--bs-color-gray-700);
+    --bs-color-text-tertiary: var(--bs-color-gray-600);
     --bs-color-text-disabled: var(--bs-color-gray-400);
     --bs-color-text-inverse: var(--bs-color-surface-2);
     /* Ink over the scrim — the dimmed room behind dialogs and lightboxes.
@@ -225,6 +261,14 @@
     --bs-color-info-subtle: var(--bs-color-info-100);
     --bs-color-info-subtle-text: var(--bs-color-info-800);
 
+    /* Syntax inks label grammar, never state: a red tag in code is a tag,
+       not an error, so the code colours are their own print palette —
+       kept apart from the semantic pigments above on purpose. */
+    --bs-color-syntax-string: oklch(0.42 0.1 300);
+    --bs-color-syntax-literal: oklch(0.48 0.09 65);
+    --bs-color-syntax-tag: oklch(0.45 0.07 160);
+    --bs-color-syntax-function: oklch(0.42 0.09 255);
+
     /* Lighting — elevation shadows are computed, never copy-pasted. Every
        shadow draws its ink from --bs-shadow-ink, this theme's warm shadow hue,
        shifts with --bs-light-x/-y (where the key light stands), and spreads
@@ -375,6 +419,13 @@
     --bs-color-info-subtle: color-mix(in oklab, var(--bs-color-info) 16%, transparent);
     --bs-color-info-subtle-text: var(--bs-color-info-300);
 
+    /* Syntax inks at night: same print palette as light, lifted to the
+       lighter steps so grammar keeps its colour relations on dark paper. */
+    --bs-color-syntax-string: oklch(0.75 0.09 300);
+    --bs-color-syntax-literal: oklch(0.78 0.08 70);
+    --bs-color-syntax-tag: oklch(0.75 0.08 160);
+    --bs-color-syntax-function: oklch(0.75 0.08 255);
+
     /* Elevation in the dark: cast shadows need far more opacity to read against
        a dark ground, so every level carries a faint warm hairline of light to
        cut the raised surface out of the one below it. Same lighting parts as
@@ -433,8 +484,12 @@
      interface: qinghua (cobalt, the blue of blue-and-white porcelain), celadon
      (aquatic green-blue), zhusha (cinnabar, the seal-paste red used sparingly
      by civic sites for identity — never for errors; danger stays cinnabar-red
-     by way of --bs-color-danger, a separate token). Each accent redefines the
-     primary block and the focus hue; the fixed semantic pigments never follow. */
+     by way of --bs-color-danger, a separate token). Three borrowed
+     pigments ride along for the registers that speak them: feicui (the
+     jade green of the everyday handheld spec), jilan (the azure of its
+     office sibling) and qingjin (the lapis blue of the metric register).
+     Each accent redefines the primary block and the focus hue; the fixed
+     semantic pigments never follow. */
 
   [data-accent="qinghua"] {
     --bs-color-primary: var(--bs-color-brand-600);
@@ -535,6 +590,102 @@
     --bs-color-primary-border: var(--bs-color-zhusha-700);
   }
 
+  [data-accent="feicui"] {
+    --bs-color-primary: var(--bs-color-feicui-600);
+    --bs-color-primary-hover: var(--bs-color-feicui-700);
+    --bs-color-primary-active: var(--bs-color-feicui-800);
+    /* See qinghua: the fill must derive at the accent host, not the root. */
+    --bs-color-primary-fill: var(--bs-color-primary);
+    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);
+    --bs-color-primary-text: oklch(0.988 0.004 95);
+    --bs-color-primary-subtle: var(--bs-color-feicui-100);
+    --bs-color-primary-subtle-text: var(--bs-color-feicui-800);
+    --bs-color-primary-border: var(--bs-color-feicui-300);
+    --bs-color-focus: var(--bs-color-primary);
+  }
+
+  [data-theme="dark"] [data-accent="feicui"],
+  [data-theme="dark"][data-accent="feicui"],
+  :host([data-theme="dark"][data-accent="feicui"]) {
+    --bs-color-primary: var(--bs-color-feicui-500);
+    --bs-color-primary-hover: var(--bs-color-feicui-600);
+    --bs-color-primary-active: var(--bs-color-feicui-700);
+    /* Dark retires the mid-tone fill: the solid body drops one step to the
+       full-chroma 700 (hover 800) — deep enough for bright paper ink past
+       4.5:1 without kneading the pigment toward black. Light fills straight
+       from 600; dark fills straight from 700. */
+    --bs-color-primary-fill: var(--bs-color-feicui-700);
+    --bs-color-primary-fill-hover: var(--bs-color-feicui-800);
+    --bs-color-primary-text: var(--bs-color-gray-25);
+    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);
+    --bs-color-primary-subtle-text: var(--bs-color-feicui-300);
+    --bs-color-primary-border: var(--bs-color-feicui-700);
+  }
+
+  [data-accent="jilan"] {
+    --bs-color-primary: var(--bs-color-jilan-600);
+    --bs-color-primary-hover: var(--bs-color-jilan-700);
+    --bs-color-primary-active: var(--bs-color-jilan-800);
+    /* See qinghua: the fill must derive at the accent host, not the root. */
+    --bs-color-primary-fill: var(--bs-color-primary);
+    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);
+    --bs-color-primary-text: oklch(0.988 0.004 95);
+    --bs-color-primary-subtle: var(--bs-color-jilan-100);
+    --bs-color-primary-subtle-text: var(--bs-color-jilan-800);
+    --bs-color-primary-border: var(--bs-color-jilan-300);
+    --bs-color-focus: var(--bs-color-primary);
+  }
+
+  [data-theme="dark"] [data-accent="jilan"],
+  [data-theme="dark"][data-accent="jilan"],
+  :host([data-theme="dark"][data-accent="jilan"]) {
+    --bs-color-primary: var(--bs-color-jilan-500);
+    --bs-color-primary-hover: var(--bs-color-jilan-600);
+    --bs-color-primary-active: var(--bs-color-jilan-700);
+    /* Dark retires the mid-tone fill: the solid body drops one step to the
+       full-chroma 700 (hover 800) — deep enough for bright paper ink past
+       4.5:1 without kneading the pigment toward black. Light fills straight
+       from 600; dark fills straight from 700. */
+    --bs-color-primary-fill: var(--bs-color-jilan-700);
+    --bs-color-primary-fill-hover: var(--bs-color-jilan-800);
+    --bs-color-primary-text: var(--bs-color-gray-25);
+    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);
+    --bs-color-primary-subtle-text: var(--bs-color-jilan-300);
+    --bs-color-primary-border: var(--bs-color-jilan-700);
+  }
+
+  [data-accent="qingjin"] {
+    --bs-color-primary: var(--bs-color-qingjin-600);
+    --bs-color-primary-hover: var(--bs-color-qingjin-400);
+    --bs-color-primary-active: var(--bs-color-qingjin-700);
+    /* See qinghua: the fill must derive at the accent host, not the root. */
+    --bs-color-primary-fill: var(--bs-color-primary);
+    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);
+    --bs-color-primary-text: oklch(0.988 0.004 95);
+    --bs-color-primary-subtle: var(--bs-color-qingjin-100);
+    --bs-color-primary-subtle-text: var(--bs-color-qingjin-800);
+    --bs-color-primary-border: var(--bs-color-qingjin-300);
+    --bs-color-focus: var(--bs-color-primary);
+  }
+
+  [data-theme="dark"] [data-accent="qingjin"],
+  [data-theme="dark"][data-accent="qingjin"],
+  :host([data-theme="dark"][data-accent="qingjin"]) {
+    --bs-color-primary: var(--bs-color-qingjin-500);
+    --bs-color-primary-hover: var(--bs-color-qingjin-400);
+    --bs-color-primary-active: var(--bs-color-qingjin-700);
+    /* Dark retires the mid-tone fill: the solid body drops one step to the
+       full-chroma 700 (hover 800) — deep enough for bright paper ink past
+       4.5:1 without kneading the pigment toward black. Light fills straight
+       from 600; dark fills straight from 700. */
+    --bs-color-primary-fill: var(--bs-color-qingjin-700);
+    --bs-color-primary-fill-hover: var(--bs-color-qingjin-800);
+    --bs-color-primary-text: var(--bs-color-gray-25);
+    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);
+    --bs-color-primary-subtle-text: var(--bs-color-qingjin-300);
+    --bs-color-primary-border: var(--bs-color-qingjin-700);
+  }
+
 
   /* Typography — two tracks: the voice and the chrome. The voice is the song
      stack (upright, structured strokes — Noto Serif SC falling back through the
@@ -577,6 +728,10 @@
     --bs-line-height-normal: 1.5;
     --bs-line-height-relaxed: 1.625;
 
+    /* Eyebrow kickers share one tracked voice — the same whisper everywhere
+       an eyebrow announces a section, so no page improvises its own. */
+    --bs-tracking-eyebrow: 0.14em;
+
     /* Control labels carry a whisper of tracking — upright and unhurried is a
        property of CJK typesetting, not of any single typeface. */
     --bs-tracking-label: 0.02em;
@@ -687,7 +842,9 @@
      the open specs and the places their platforms are built, never the
      companies: cupertino for the soft airy handheld register, expressive
      for motion-forward spring, fluent for measured productivity depth,
-     material for the elevation-led android-era look.
+     material for the elevation-led android-era look, missive and its
+     office sibling dispatch for the familiar handheld registers, metric
+     for the metric productivity register.
 
      A scene moves only what the paper allows: shape (radius), density, motion
      pace and its curves, where the key light stands and how far it reaches,
@@ -820,29 +977,45 @@
     --bs-tracking-label: 0em;
   }
 
-  /* The borrowed papers. Four of the style scenes retint the surface
+  /* The borrowed papers. Seven of the style scenes retint the surface
      ladder toward the register they borrow from — cupertino's clean
      handheld white, material's neutral violet-gray, sketch's warm
-     sketchbook stock — while the paper-and-ink scenes keep the house
-     stock. Custom properties on the root resolve per theme attribute, so
-     each paper carries a light and a dark face. */
-  [data-scene="cupertino"][data-theme="light"],
-  [data-scene="cupertino"]:not([data-theme]) {
-    --bs-color-surface-0: oklch(0.973 0.001 265);
+     sketchbook stock, and the neutral grounds the missive family and
+     the metric register speak against — while the paper-and-ink scenes keep
+     the house stock. Custom properties on the root resolve per theme
+     attribute, so each paper carries a light and a dark face. */
+  [data-scene="cupertino"] {
+    --bs-color-surface-0: oklch(0.962 0.004 265);
     --bs-color-surface-1: oklch(0.981 0.001 265);
-    --bs-color-surface-2: oklch(0.992 0.001 265);
-    --bs-color-surface-3: oklch(0.992 0.001 265);
-    --bs-color-surface-4: oklch(0.992 0.001 265);
-    --bs-color-surface-5: oklch(0.992 0.001 265);
+    --bs-color-surface-2: oklch(1 0 0);
+    --bs-color-surface-3: oklch(1 0 0);
+    --bs-color-surface-4: oklch(1 0 0);
+    --bs-color-surface-5: oklch(1 0 0);
+    --bs-color-text-primary: oklch(0.208 0 0);
+    --bs-color-text-secondary: oklch(0.628 0.008 265);
+    --bs-color-text-tertiary: oklch(0.76 0.006 265);
+    --bs-color-text-disabled: oklch(0.83 0.005 265);
+    --bs-color-border: oklch(0.85 0.005 265);
+    --bs-color-border-strong: oklch(0.79 0.006 265);
+    --bs-color-scrim: oklch(0 0 0 / 0.4);
+    --bs-shadow-ink: oklch(0.25 0.01 265);
   }
 
-  [data-scene="cupertino"][data-theme="dark"] {
-    --bs-color-surface-0: oklch(0.165 0.004 262);
-    --bs-color-surface-1: oklch(0.205 0.004 262);
-    --bs-color-surface-2: oklch(0.245 0.004 262);
-    --bs-color-surface-3: oklch(0.272 0.004 262);
-    --bs-color-surface-4: oklch(0.29 0.004 262);
-    --bs-color-surface-5: oklch(0.31 0.004 262);
+  [data-scene="cupertino"][data-theme="dark"],
+  [data-scene="cupertino"]:not([data-theme]):where([data-theme="dark"] *) {
+    --bs-color-surface-0: oklch(0.18 0.004 265);
+    --bs-color-surface-1: oklch(0.216 0.004 265);
+    --bs-color-surface-2: oklch(0.245 0.004 265);
+    --bs-color-surface-3: oklch(0.272 0.004 265);
+    --bs-color-surface-4: oklch(0.29 0.004 265);
+    --bs-color-surface-5: oklch(0.31 0.004 265);
+    --bs-color-text-primary: oklch(1 0 0);
+    --bs-color-text-secondary: oklch(0.68 0.006 265);
+    --bs-color-text-tertiary: oklch(0.55 0.005 265);
+    --bs-color-text-disabled: oklch(0.4 0.004 265);
+    --bs-color-border: oklch(0.31 0.005 265);
+    --bs-color-border-strong: oklch(0.38 0.006 265);
+    --bs-color-scrim: oklch(0 0 0 / 0.5);
   }
 
   [data-scene="expressive"] {
@@ -906,23 +1079,38 @@
   /* The layers: light sits on the calm gray ground with layered whites
      rising above it; dark climbs through three gray steps. Chroma zero —
      this register keeps no pigment in its paper. */
-  [data-scene="fluent"][data-theme="light"],
-  [data-scene="fluent"]:not([data-theme]) {
-    --bs-color-surface-0: oklch(0.956 0 0);
-    --bs-color-surface-1: oklch(0.973 0 0);
-    --bs-color-surface-2: oklch(0.992 0 0);
-    --bs-color-surface-3: oklch(0.992 0 0);
-    --bs-color-surface-4: oklch(0.992 0 0);
-    --bs-color-surface-5: oklch(0.992 0 0);
+  [data-scene="fluent"] {
+    --bs-color-surface-0: oklch(0.972 0 0);
+    --bs-color-surface-1: oklch(0.982 0 0);
+    --bs-color-surface-2: oklch(1 0 0);
+    --bs-color-surface-3: oklch(1 0 0);
+    --bs-color-surface-4: oklch(1 0 0);
+    --bs-color-surface-5: oklch(1 0 0);
+    --bs-color-text-primary: oklch(0.226 0 0);
+    --bs-color-text-secondary: oklch(0.452 0 0);
+    --bs-color-text-tertiary: oklch(0.634 0 0);
+    --bs-color-text-disabled: oklch(0.75 0 0);
+    --bs-color-border: oklch(0.925 0 0);
+    --bs-color-border-strong: oklch(0.865 0 0);
+    --bs-color-scrim: oklch(0 0 0 / 0.4);
+    --bs-shadow-ink: oklch(0.25 0 0);
   }
 
-  [data-scene="fluent"][data-theme="dark"] {
-    --bs-color-surface-0: oklch(0.224 0 0);
-    --bs-color-surface-1: oklch(0.251 0 0);
-    --bs-color-surface-2: oklch(0.29 0 0);
-    --bs-color-surface-3: oklch(0.315 0 0);
-    --bs-color-surface-4: oklch(0.34 0 0);
-    --bs-color-surface-5: oklch(0.365 0 0);
+  [data-scene="fluent"][data-theme="dark"],
+  [data-scene="fluent"]:not([data-theme]):where([data-theme="dark"] *) {
+    --bs-color-surface-0: oklch(0.27 0 0);
+    --bs-color-surface-1: oklch(0.3 0 0);
+    --bs-color-surface-2: oklch(0.33 0 0);
+    --bs-color-surface-3: oklch(0.36 0 0);
+    --bs-color-surface-4: oklch(0.39 0 0);
+    --bs-color-surface-5: oklch(0.42 0 0);
+    --bs-color-text-primary: oklch(1 0 0);
+    --bs-color-text-secondary: oklch(0.822 0 0);
+    --bs-color-text-tertiary: oklch(0.68 0 0);
+    --bs-color-text-disabled: oklch(0.5 0 0);
+    --bs-color-border: oklch(0.33 0 0);
+    --bs-color-border-strong: oklch(0.4 0 0);
+    --bs-color-scrim: oklch(0 0 0 / 0.5);
   }
 
   [data-scene="material"] {
@@ -966,23 +1154,38 @@
 
   /* The surface: neutral, tinted faintly violet instead of the house's
      warm paper — the elevation-led register reads against cooler ground. */
-  [data-scene="material"][data-theme="light"],
-  [data-scene="material"]:not([data-theme]) {
-    --bs-color-surface-0: oklch(0.966 0.006 300);
-    --bs-color-surface-1: oklch(0.976 0.005 300);
-    --bs-color-surface-2: oklch(0.986 0.004 300);
-    --bs-color-surface-3: oklch(0.986 0.004 300);
-    --bs-color-surface-4: oklch(0.986 0.004 300);
-    --bs-color-surface-5: oklch(0.986 0.004 300);
+  [data-scene="material"] {
+    --bs-color-surface-0: oklch(0.968 0.011 315);
+    --bs-color-surface-1: oklch(0.976 0.009 318);
+    --bs-color-surface-2: oklch(0.983 0.007 320);
+    --bs-color-surface-3: oklch(0.983 0.007 320);
+    --bs-color-surface-4: oklch(0.983 0.007 320);
+    --bs-color-surface-5: oklch(0.983 0.007 320);
+    --bs-color-text-primary: oklch(0.245 0.008 312);
+    --bs-color-text-secondary: oklch(0.373 0.012 310);
+    --bs-color-text-tertiary: oklch(0.58 0.02 305);
+    --bs-color-text-disabled: oklch(0.8 0.015 310);
+    --bs-color-border: oklch(0.87 0.017 315);
+    --bs-color-border-strong: oklch(0.7 0.02 310);
+    --bs-color-scrim: oklch(0 0 0 / 0.4);
+    --bs-shadow-ink: oklch(0.25 0.015 310);
   }
 
-  [data-scene="material"][data-theme="dark"] {
-    --bs-color-surface-0: oklch(0.165 0.009 300);
-    --bs-color-surface-1: oklch(0.205 0.01 300);
-    --bs-color-surface-2: oklch(0.245 0.011 300);
-    --bs-color-surface-3: oklch(0.272 0.011 300);
-    --bs-color-surface-4: oklch(0.29 0.011 300);
-    --bs-color-surface-5: oklch(0.31 0.011 300);
+  [data-scene="material"][data-theme="dark"],
+  [data-scene="material"]:not([data-theme]):where([data-theme="dark"] *) {
+    --bs-color-surface-0: oklch(0.16 0.008 320);
+    --bs-color-surface-1: oklch(0.185 0.008 320);
+    --bs-color-surface-2: oklch(0.22 0.009 315);
+    --bs-color-surface-3: oklch(0.26 0.009 315);
+    --bs-color-surface-4: oklch(0.29 0.009 315);
+    --bs-color-surface-5: oklch(0.32 0.009 315);
+    --bs-color-text-primary: oklch(0.91 0.01 315);
+    --bs-color-text-secondary: oklch(0.87 0.017 315);
+    --bs-color-text-tertiary: oklch(0.66 0.015 310);
+    --bs-color-text-disabled: oklch(0.45 0.01 310);
+    --bs-color-border: oklch(0.37 0.012 310);
+    --bs-color-border-strong: oklch(0.5 0.015 308);
+    --bs-color-scrim: oklch(0 0 0 / 0.5);
   }
 
   [data-scene="sketch"] {
@@ -1015,8 +1218,7 @@
   /* The sketchbook stock: warmer and yellower than the house paper — the
      slightly grubby cream of a well-used drawing pad, night bleeding
      warmer still. */
-  [data-scene="sketch"][data-theme="light"],
-  [data-scene="sketch"]:not([data-theme]) {
+  [data-scene="sketch"] {
     --bs-color-surface-0: oklch(0.958 0.014 92);
     --bs-color-surface-1: oklch(0.972 0.013 93);
     --bs-color-surface-2: oklch(0.982 0.012 95);
@@ -1025,7 +1227,8 @@
     --bs-color-surface-5: oklch(0.982 0.012 95);
   }
 
-  [data-scene="sketch"][data-theme="dark"] {
+  [data-scene="sketch"][data-theme="dark"],
+  [data-scene="sketch"]:not([data-theme]):where([data-theme="dark"] *) {
     --bs-color-surface-0: oklch(0.165 0.012 85);
     --bs-color-surface-1: oklch(0.205 0.013 85);
     --bs-color-surface-2: oklch(0.245 0.014 85);
@@ -1068,6 +1271,287 @@
     --bs-radius-full: 1.35rem 1.8rem 1.25rem 1.7rem / 1.75rem 1.4rem 1.9rem 1.45rem;
   }
 
+  /* The everyday registers — three papers borrowed whole from the open
+     handheld and productivity specs: missive, the familiar phone
+     register, dispatch its office sibling, and metric, the metric
+     register. */
+
+  [data-scene="missive"] {
+    /* 家书 — the familiar handheld register: corners round soft but never
+       full, targets grow to the touch ladder, the pace eases back so
+       states are never missed, presses answer through the fill change
+       rather than a wash, and focus speaks as a crisp 2px accent line
+       pulled inside the edge. Headlines stand down from the serif — the
+       register speaks in the system voice. */
+    --bs-radius-sm: 0.25rem;
+    --bs-radius-md: 0.5rem;
+    --bs-radius-lg: 0.75rem;
+    --bs-radius-xl: 1rem;
+    --bs-radius-2xl: 1.25rem;
+    /* The register's own dialect runs deeper than geometry: the ink and
+       the hairlines go neutral graphite, and the control corner settles
+       at 8px — the button edge the spec draws. */
+    --bs-radius-control: 0.5rem;
+    --bs-color-text-primary: oklch(0.218 0 0);
+    --bs-color-text-secondary: oklch(0.556 0 0);
+    --bs-color-text-tertiary: oklch(0.767 0 0);
+    --bs-color-text-disabled: oklch(0.7 0 0);
+    --bs-color-border: oklch(0.922 0 0);
+    --bs-color-border-strong: oklch(0.876 0 0);
+    --bs-control-height-sm: 2rem;
+    --bs-control-height-md: 2.5rem;
+    --bs-control-height-lg: 3rem;
+    /* The register's own type ramp: 17px carries the body and the button
+       label on a 40px control — small type on this height is what reads
+       plump. 14px serves the quiet steps. */
+    --bs-font-size-sm: 0.875rem;
+    --bs-font-size-md: 1.0625rem;
+    --bs-font-size-base: 1.0625rem;
+    --bs-font-size-lg: 1.25rem;
+    --bs-density-scale: 1.15;
+    --bs-motion-scale: 0.9;
+    --bs-light-x: 0px;
+    --bs-light-y: 0px;
+    --bs-light-reach: 0.6;
+    --bs-ripple-opacity: 0;
+    --bs-focus-ring: inset 0 0 0 2px var(--bs-color-focus);
+    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);
+    --bs-font-serif: var(--bs-font-sans);
+    --bs-tracking-label: 0em;
+  }
+
+  [data-scene="dispatch"] {
+    /* 公牍 — the office sibling: the working desk cuts a harder corner
+       than the handheld (2-4px edges throughout the chrome it borrows),
+       the pigment pairs cobalt instead of green, and the ground cools. */
+    --bs-radius-sm: 0.125rem;
+    --bs-radius-md: 0.25rem;
+    --bs-radius-lg: 0.5rem;
+    --bs-radius-xl: 0.75rem;
+    --bs-radius-2xl: 1rem;
+    --bs-radius-control: 0.25rem;
+    --bs-color-text-primary: oklch(0.218 0 0);
+    --bs-color-text-secondary: oklch(0.556 0 0);
+    --bs-color-text-tertiary: oklch(0.767 0 0);
+    --bs-color-text-disabled: oklch(0.7 0 0);
+    --bs-color-border: oklch(0.922 0 0);
+    --bs-color-border-strong: oklch(0.876 0 0);
+    --bs-control-height-sm: 2rem;
+    --bs-control-height-md: 2.5rem;
+    --bs-control-height-lg: 3rem;
+    --bs-font-size-sm: 0.875rem;
+    --bs-font-size-md: 1.0625rem;
+    --bs-font-size-base: 1.0625rem;
+    --bs-font-size-lg: 1.25rem;
+    --bs-density-scale: 1.15;
+    --bs-motion-scale: 0.9;
+    --bs-light-x: 0px;
+    --bs-light-y: 0px;
+    --bs-light-reach: 0.6;
+    --bs-ripple-opacity: 0;
+    --bs-focus-ring: inset 0 0 0 2px var(--bs-color-focus);
+    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);
+    --bs-font-serif: var(--bs-font-sans);
+    --bs-tracking-label: 0em;
+  }
+
+  [data-scene="metric"] {
+    /* 格律 — the metric productivity register: the corner ladder steps in
+       strict meter, controls sit on the compact 24/32/40 ladder, hairlines
+       carry the hierarchy under a flat light, presses answer through fill,
+       and focus rings the edge with a plain 2px outline — no glow. */
+    --bs-radius-sm: 0.125rem;
+    --bs-radius-md: 0.1875rem;
+    --bs-radius-lg: 0.375rem;
+    --bs-radius-xl: 0.5625rem;
+    --bs-radius-2xl: 0.75rem;
+    /* The metric dialect: a near-square control edge and a neutral ink
+       stepped like the register's own type ramp. */
+    --bs-radius-control: 0.1875rem;
+    --bs-color-text-primary: oklch(0.205 0 0);
+    --bs-color-text-secondary: oklch(0.53 0 0);
+    --bs-color-text-tertiary: oklch(0.648 0 0);
+    --bs-color-text-disabled: oklch(0.82 0 0);
+    --bs-color-border: oklch(0.933 0 0);
+    --bs-color-border-strong: oklch(0.895 0 0);
+    /* The register pairs its blue one step deeper than the house lapis —
+       the borrowed brand's own working tone. */
+    --bs-color-primary: var(--bs-color-brand-700);
+    --bs-color-primary-hover: var(--bs-color-brand-800);
+    --bs-color-primary-active: var(--bs-color-brand-900);
+    --bs-control-height-sm: 1.5rem;
+    --bs-control-height-md: 2rem;
+    --bs-control-height-lg: 2.5rem;
+    --bs-density-scale: 0.95;
+    --bs-motion-scale: 0.9;
+    --bs-light-x: 0px;
+    --bs-light-y: 0px;
+    --bs-light-reach: 0.55;
+    --bs-ripple-opacity: 0;
+    --bs-color-focus: var(--bs-color-primary);
+    --bs-focus-ring: 0 0 0 2px var(--bs-color-focus);
+    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);
+  }
+
+  /* The everyday stocks: missive's pages sit on the deep gray ground
+     with white groups above; dispatch's office paper cools the same
+     ladder and goes true black at night — the register's own stock; the
+     metric register keeps a light cool gray ground and a stepped dark
+     ladder. */
+  [data-scene="missive"] {
+    --bs-color-surface-0: oklch(0.946 0 0);
+    --bs-color-surface-1: oklch(0.976 0 0);
+    --bs-color-surface-2: oklch(1 0 0);
+    --bs-color-surface-3: oklch(1 0 0);
+    --bs-color-surface-4: oklch(1 0 0);
+    --bs-color-surface-5: oklch(1 0 0);
+  }
+
+  [data-scene="missive"][data-theme="dark"],
+  [data-scene="missive"]:not([data-theme]):where([data-theme="dark"] *) {
+    --bs-color-surface-0: oklch(0.178 0 0);
+    --bs-color-surface-1: oklch(0.213 0 0);
+    --bs-color-surface-2: oklch(0.235 0 0);
+    --bs-color-surface-3: oklch(0.244 0 0);
+    --bs-color-surface-4: oklch(0.26 0 0);
+    --bs-color-surface-5: oklch(0.277 0 0);
+    --bs-color-text-primary: oklch(0.876 0 0);
+    --bs-color-text-secondary: oklch(0.64 0 0);
+    --bs-color-text-tertiary: oklch(0.475 0 0);
+    --bs-color-text-disabled: oklch(0.42 0 0);
+    --bs-color-border: oklch(0.348 0 0);
+    --bs-color-border-strong: oklch(0.409 0 0);
+  }
+
+  [data-scene="dispatch"] {
+    --bs-color-surface-0: oklch(0.973 0.002 265);
+    --bs-color-surface-1: oklch(0.976 0 0);
+    --bs-color-surface-2: oklch(1 0 0);
+    --bs-color-surface-3: oklch(1 0 0);
+    --bs-color-surface-4: oklch(1 0 0);
+    --bs-color-surface-5: oklch(1 0 0);
+  }
+
+  [data-scene="dispatch"][data-theme="dark"],
+  [data-scene="dispatch"]:not([data-theme]):where([data-theme="dark"] *) {
+    --bs-color-surface-0: oklch(0 0 0);
+    --bs-color-surface-1: oklch(0.192 0.002 265);
+    --bs-color-surface-2: oklch(0.214 0.002 265);
+    --bs-color-surface-3: oklch(0.235 0 0);
+    --bs-color-surface-4: oklch(0.257 0.002 265);
+    --bs-color-surface-5: oklch(0.277 0.002 265);
+    --bs-color-text-primary: oklch(0.845 0 0);
+    --bs-color-text-secondary: oklch(0.63 0 0);
+    --bs-color-text-tertiary: oklch(0.46 0 0);
+    --bs-color-text-disabled: oklch(0.4 0 0);
+    --bs-color-border: oklch(0.32 0 0);
+    --bs-color-border-strong: oklch(0.38 0 0);
+  }
+
+  [data-scene="metric"] {
+    /* The plain white stock: the borrowed register draws its pages on
+       white and lets the hairlines carry every separation. */
+    --bs-color-surface-0: oklch(1 0 0);
+    --bs-color-surface-1: oklch(1 0 0);
+    --bs-color-surface-2: oklch(1 0 0);
+    --bs-color-surface-3: oklch(1 0 0);
+    --bs-color-surface-4: oklch(1 0 0);
+    --bs-color-surface-5: oklch(1 0 0);
+  }
+
+  [data-scene="metric"][data-theme="dark"],
+  [data-scene="metric"]:not([data-theme]):where([data-theme="dark"] *) {
+    --bs-color-surface-0: oklch(0.209 0 0);
+    --bs-color-surface-1: oklch(0.239 0 0);
+    --bs-color-surface-2: oklch(0.26 0 0);
+    --bs-color-surface-3: oklch(0.293 0 0);
+    --bs-color-surface-4: oklch(0.321 0 0);
+    --bs-color-surface-5: oklch(0.348 0 0);
+    --bs-color-text-primary: oklch(0.925 0 0);
+    --bs-color-text-secondary: oklch(0.65 0 0);
+    --bs-color-text-tertiary: oklch(0.538 0 0);
+    --bs-color-text-disabled: oklch(0.34 0 0);
+    --bs-color-border: oklch(0.375 0 0);
+    --bs-color-border-strong: oklch(0.453 0 0);
+  }
+
+  [data-scene="new-york"] {
+    /* 玄素 — the monochrome developer register: black ink as the only
+       pigment, zinc-gray stock, hairline separation, the near-square
+       corner ladder under a generous 32/36/40 control row, a brisk quiet
+       pace, and focus as the offset ring — a crisp 2px line held clear of
+       the edge by a paper gap. */
+    --bs-radius-sm: 0.375rem;
+    --bs-radius-md: 0.5rem;
+    --bs-radius-lg: 0.625rem;
+    --bs-radius-xl: 0.75rem;
+    --bs-radius-2xl: 1rem;
+    --bs-radius-control: 0.375rem;
+    --bs-control-height-sm: 2rem;
+    --bs-control-height-md: 2.25rem;
+    --bs-control-height-lg: 2.5rem;
+    --bs-density-scale: 1;
+    --bs-motion-scale: 0.85;
+    --bs-light-x: 0px;
+    --bs-light-y: 0.0625rem;
+    --bs-light-reach: 0.6;
+    --bs-ripple-opacity: 0;
+    /* The register speaks in the system voice: headlines stand down from
+       the serif, labels lose their brush tracking. */
+    --bs-font-serif: var(--bs-font-sans);
+    --bs-tracking-label: 0em;
+    /* Focus speaks the register's dialect: the offset ring. */
+    --bs-focus-ring: 0 0 0 2px var(--bs-color-surface-0), 0 0 0 4px var(--bs-color-focus);
+    --bs-focus-ring-inset: inset 0 0 0 2px color-mix(in oklab, var(--bs-color-focus) 50%, transparent);
+  }
+
+  /* The register's stock: pages drawn on pure white with the zinc grays
+     carrying text and hairline — chroma leans a breath of blue. */
+  [data-scene="new-york"] {
+    --bs-color-surface-0: oklch(1 0 0);
+    --bs-color-surface-1: oklch(1 0 0);
+    --bs-color-surface-2: oklch(1 0 0);
+    --bs-color-surface-3: oklch(1 0 0);
+    --bs-color-surface-4: oklch(1 0 0);
+    --bs-color-surface-5: oklch(1 0 0);
+    --bs-color-text-primary: oklch(0.141 0.005 286);
+    --bs-color-text-secondary: oklch(0.552 0.016 286);
+    --bs-color-text-tertiary: oklch(0.705 0.015 286);
+    --bs-color-text-disabled: oklch(0.79 0.008 286);
+    --bs-color-border: oklch(0.92 0.004 286);
+    --bs-color-border-strong: oklch(0.871 0.006 286);
+    --bs-color-scrim: oklch(0 0 0 / 0.4);
+    --bs-shadow-ink: oklch(0.25 0.005 286);
+    /* The solid action is the register's black block — zinc-900, not the
+       house warm gray. */
+    --bs-color-primary: oklch(0.21 0.006 286);
+    --bs-color-primary-hover: oklch(0.255 0.006 286);
+    --bs-color-primary-active: oklch(0.3 0.007 286);
+  }
+
+  [data-scene="new-york"][data-theme="dark"],
+  [data-scene="new-york"]:not([data-theme]):where([data-theme="dark"] *) {
+    --bs-color-surface-0: oklch(0.145 0.005 286);
+    --bs-color-surface-1: oklch(0.18 0.005 286);
+    --bs-color-surface-2: oklch(0.21 0.006 286);
+    --bs-color-surface-3: oklch(0.24 0.006 286);
+    --bs-color-surface-4: oklch(0.27 0.006 286);
+    --bs-color-surface-5: oklch(0.3 0.007 286);
+    --bs-color-text-primary: oklch(0.985 0 286);
+    --bs-color-text-secondary: oklch(0.65 0.012 286);
+    --bs-color-text-tertiary: oklch(0.55 0.012 286);
+    --bs-color-text-disabled: oklch(0.4 0.008 286);
+    --bs-color-border: oklch(0.274 0.006 286);
+    --bs-color-border-strong: oklch(0.37 0.013 286);
+    --bs-color-scrim: oklch(0 0 0 / 0.5);
+    /* Primary inverts to the zinc paper-white; its ink stays dark. */
+    --bs-color-primary: oklch(0.985 0 0);
+    --bs-color-primary-hover: oklch(0.92 0.004 286);
+    --bs-color-primary-active: oklch(0.871 0.006 286);
+    --bs-color-ink-on-fill: oklch(0.21 0.006 286);
+    --bs-ink-knead: 0%;
+  }
+
 
   /* Density — decoration compresses, information never does: density scales whitespace and decoration
      only. Type sizes and contrast stay fixed so compact can never trade away

package/dist/css/primitives.css

@@ -95,6 +95,39 @@
   --bs-color-info-800: oklch(0.364 0.092 250);
   --bs-color-info-900: oklch(0.3 0.072 250);
   --bs-color-info-950: oklch(0.232 0.052 250);
+  --bs-color-feicui-50: oklch(0.969 0.023 161.8);
+  --bs-color-feicui-100: oklch(0.922 0.053 162.4);
+  --bs-color-feicui-200: oklch(0.879 0.084 161.6);
+  --bs-color-feicui-300: oklch(0.821 0.119 158.8);
+  --bs-color-feicui-400: oklch(0.753 0.173 155.2);
+  --bs-color-feicui-500: oklch(0.738 0.191 152.4);
+  --bs-color-feicui-600: oklch(0.710 0.189 151.2);
+  --bs-color-feicui-700: oklch(0.641 0.169 151.5);
+  --bs-color-feicui-800: oklch(0.570 0.150 151.6);
+  --bs-color-feicui-900: oklch(0.417 0.104 153.6);
+  --bs-color-feicui-950: oklch(0.310 0.075 154.0);
+  --bs-color-jilan-50: oklch(0.959 0.019 260.2);
+  --bs-color-jilan-100: oklch(0.903 0.046 256.5);
+  --bs-color-jilan-200: oklch(0.824 0.084 262.4);
+  --bs-color-jilan-300: oklch(0.752 0.120 262.4);
+  --bs-color-jilan-400: oklch(0.689 0.151 258.1);
+  --bs-color-jilan-500: oklch(0.648 0.190 256.7);
+  --bs-color-jilan-600: oklch(0.605 0.190 257.1);
+  --bs-color-jilan-700: oklch(0.555 0.179 257.6);
+  --bs-color-jilan-800: oklch(0.450 0.127 254.4);
+  --bs-color-jilan-900: oklch(0.360 0.105 256.8);
+  --bs-color-jilan-950: oklch(0.270 0.080 257.0);
+  --bs-color-qingjin-50: oklch(0.957 0.016 262.8);
+  --bs-color-qingjin-100: oklch(0.883 0.046 263.7);
+  --bs-color-qingjin-200: oklch(0.809 0.078 262.9);
+  --bs-color-qingjin-300: oklch(0.757 0.100 263.2);
+  --bs-color-qingjin-400: oklch(0.615 0.168 262.0);
+  --bs-color-qingjin-500: oklch(0.536 0.181 260.3);
+  --bs-color-qingjin-600: oklch(0.492 0.217 261.4);
+  --bs-color-qingjin-700: oklch(0.440 0.193 261.2);
+  --bs-color-qingjin-800: oklch(0.384 0.163 260.7);
+  --bs-color-qingjin-900: oklch(0.299 0.110 258.3);
+  --bs-color-qingjin-950: oklch(0.220 0.082 258.5);
   --bs-space-1: 0.25rem;
   --bs-space-2: 0.5rem;
   --bs-space-3: 0.75rem;

package/dist/js/index.mjs

@@ -91,6 +91,39 @@ export default {
   "bs-color-info-800": "oklch(0.364 0.092 250)",
   "bs-color-info-900": "oklch(0.3 0.072 250)",
   "bs-color-info-950": "oklch(0.232 0.052 250)",
+  "bs-color-feicui-50": "oklch(0.969 0.023 161.8)",
+  "bs-color-feicui-100": "oklch(0.922 0.053 162.4)",
+  "bs-color-feicui-200": "oklch(0.879 0.084 161.6)",
+  "bs-color-feicui-300": "oklch(0.821 0.119 158.8)",
+  "bs-color-feicui-400": "oklch(0.753 0.173 155.2)",
+  "bs-color-feicui-500": "oklch(0.738 0.191 152.4)",
+  "bs-color-feicui-600": "oklch(0.710 0.189 151.2)",
+  "bs-color-feicui-700": "oklch(0.641 0.169 151.5)",
+  "bs-color-feicui-800": "oklch(0.570 0.150 151.6)",
+  "bs-color-feicui-900": "oklch(0.417 0.104 153.6)",
+  "bs-color-feicui-950": "oklch(0.310 0.075 154.0)",
+  "bs-color-jilan-50": "oklch(0.959 0.019 260.2)",
+  "bs-color-jilan-100": "oklch(0.903 0.046 256.5)",
+  "bs-color-jilan-200": "oklch(0.824 0.084 262.4)",
+  "bs-color-jilan-300": "oklch(0.752 0.120 262.4)",
+  "bs-color-jilan-400": "oklch(0.689 0.151 258.1)",
+  "bs-color-jilan-500": "oklch(0.648 0.190 256.7)",
+  "bs-color-jilan-600": "oklch(0.605 0.190 257.1)",
+  "bs-color-jilan-700": "oklch(0.555 0.179 257.6)",
+  "bs-color-jilan-800": "oklch(0.450 0.127 254.4)",
+  "bs-color-jilan-900": "oklch(0.360 0.105 256.8)",
+  "bs-color-jilan-950": "oklch(0.270 0.080 257.0)",
+  "bs-color-qingjin-50": "oklch(0.957 0.016 262.8)",
+  "bs-color-qingjin-100": "oklch(0.883 0.046 263.7)",
+  "bs-color-qingjin-200": "oklch(0.809 0.078 262.9)",
+  "bs-color-qingjin-300": "oklch(0.757 0.100 263.2)",
+  "bs-color-qingjin-400": "oklch(0.615 0.168 262.0)",
+  "bs-color-qingjin-500": "oklch(0.536 0.181 260.3)",
+  "bs-color-qingjin-600": "oklch(0.492 0.217 261.4)",
+  "bs-color-qingjin-700": "oklch(0.440 0.193 261.2)",
+  "bs-color-qingjin-800": "oklch(0.384 0.163 260.7)",
+  "bs-color-qingjin-900": "oklch(0.299 0.110 258.3)",
+  "bs-color-qingjin-950": "oklch(0.220 0.082 258.5)",
   "bs-space-1": "0.25rem",
   "bs-space-2": "0.5rem",
   "bs-space-3": "0.75rem",

package/dist/js/styles.mjs

@@ -1,2 +1,2 @@
 /** Stylesheet for the full token layer, generated from dist/css/index.css. */
-export default "@layer bs.tokens;\n\n@layer bs.tokens {\n  /**\n   * Do not edit directly, this file was auto-generated.\n   */\n\n  :root, :host {\n    --bs-color-gray-25: oklch(0.985 0.003 92);\n    --bs-color-gray-50: oklch(0.968 0.005 90);\n    --bs-color-gray-100: oklch(0.928 0.007 88);\n    --bs-color-gray-200: oklch(0.872 0.009 86);\n    --bs-color-gray-300: oklch(0.795 0.011 84);\n    --bs-color-gray-400: oklch(0.665 0.013 82);\n    --bs-color-gray-500: oklch(0.568 0.014 80);\n    --bs-color-gray-600: oklch(0.482 0.014 78);\n    --bs-color-gray-700: oklch(0.405 0.013 76);\n    --bs-color-gray-800: oklch(0.318 0.011 76);\n    --bs-color-gray-850: oklch(0.272 0.01 76);\n    --bs-color-gray-900: oklch(0.23 0.009 76);\n    --bs-color-gray-925: oklch(0.188 0.008 76);\n    --bs-color-gray-950: oklch(0.15 0.007 76);\n    --bs-color-gray-975: oklch(0.118 0.006 76);\n    --bs-color-brand-50: oklch(0.962 0.014 255);\n    --bs-color-brand-100: oklch(0.93 0.031 255);\n    --bs-color-brand-200: oklch(0.885 0.056 255);\n    --bs-color-brand-300: oklch(0.815 0.09 255);\n    --bs-color-brand-400: oklch(0.72 0.122 255);\n    --bs-color-brand-500: oklch(0.6 0.15 255);\n    --bs-color-brand-600: oklch(0.53 0.155 255);\n    --bs-color-brand-700: oklch(0.46 0.15 255);\n    --bs-color-brand-800: oklch(0.395 0.13 255);\n    --bs-color-brand-900: oklch(0.33 0.105 255);\n    --bs-color-brand-950: oklch(0.26 0.08 255);\n    --bs-color-celadon-50: oklch(0.962 0.014 205);\n    --bs-color-celadon-100: oklch(0.928 0.028 205);\n    --bs-color-celadon-200: oklch(0.88 0.05 205);\n    --bs-color-celadon-300: oklch(0.81 0.072 205);\n    --bs-color-celadon-400: oklch(0.715 0.082 205);\n    --bs-color-celadon-500: oklch(0.63 0.085 205);\n    --bs-color-celadon-600: oklch(0.56 0.085 205);\n    --bs-color-celadon-700: oklch(0.485 0.08 205);\n    --bs-color-celadon-800: oklch(0.41 0.068 205);\n    --bs-color-celadon-900: oklch(0.34 0.054 205);\n    --bs-color-celadon-950: oklch(0.265 0.04 205);\n    --bs-color-zhusha-50: oklch(0.964 0.016 28);\n    --bs-color-zhusha-100: oklch(0.926 0.036 28);\n    --bs-color-zhusha-200: oklch(0.874 0.066 28);\n    --bs-color-zhusha-300: oklch(0.806 0.098 28);\n    --bs-color-zhusha-400: oklch(0.716 0.13 28);\n    --bs-color-zhusha-500: oklch(0.625 0.15 28);\n    --bs-color-zhusha-600: oklch(0.55 0.16 28);\n    --bs-color-zhusha-700: oklch(0.472 0.148 28);\n    --bs-color-zhusha-800: oklch(0.398 0.125 28);\n    --bs-color-zhusha-900: oklch(0.328 0.098 28);\n    --bs-color-zhusha-950: oklch(0.254 0.072 28);\n    --bs-color-success-50: oklch(0.962 0.024 155);\n    --bs-color-success-100: oklch(0.922 0.048 155);\n    --bs-color-success-200: oklch(0.868 0.082 155);\n    --bs-color-success-300: oklch(0.794 0.108 155);\n    --bs-color-success-400: oklch(0.71 0.122 155);\n    --bs-color-success-500: oklch(0.6 0.112 155);\n    --bs-color-success-600: oklch(0.52 0.1 155);\n    --bs-color-success-700: oklch(0.445 0.088 155);\n    --bs-color-success-800: oklch(0.375 0.072 155);\n    --bs-color-success-900: oklch(0.31 0.056 155);\n    --bs-color-success-950: oklch(0.24 0.04 155);\n    --bs-color-warning-50: oklch(0.968 0.028 78);\n    --bs-color-warning-100: oklch(0.934 0.056 74);\n    --bs-color-warning-200: oklch(0.892 0.086 70);\n    --bs-color-warning-300: oklch(0.836 0.112 67);\n    --bs-color-warning-400: oklch(0.76 0.126 66);\n    --bs-color-warning-500: oklch(0.665 0.125 65);\n    --bs-color-warning-600: oklch(0.55 0.122 65);\n    --bs-color-warning-700: oklch(0.495 0.11 63);\n    --bs-color-warning-800: oklch(0.415 0.092 62);\n    --bs-color-warning-900: oklch(0.34 0.074 62);\n    --bs-color-warning-950: oklch(0.262 0.054 62);\n    --bs-color-danger-50: oklch(0.964 0.018 25);\n    --bs-color-danger-100: oklch(0.924 0.04 25);\n    --bs-color-danger-200: oklch(0.87 0.07 25);\n    --bs-color-danger-300: oklch(0.798 0.106 25);\n    --bs-color-danger-400: oklch(0.712 0.138 25);\n    --bs-color-danger-500: oklch(0.6 0.15 25);\n    --bs-color-danger-600: oklch(0.51 0.15 25);\n    --bs-color-danger-700: oklch(0.44 0.135 25);\n    --bs-color-danger-800: oklch(0.372 0.112 25);\n    --bs-color-danger-900: oklch(0.306 0.088 25);\n    --bs-color-danger-950: oklch(0.236 0.064 25);\n    --bs-color-info-50: oklch(0.962 0.014 250);\n    --bs-color-info-100: oklch(0.924 0.03 250);\n    --bs-color-info-200: oklch(0.872 0.054 250);\n    --bs-color-info-300: oklch(0.802 0.082 250);\n    --bs-color-info-400: oklch(0.718 0.11 250);\n    --bs-color-info-500: oklch(0.6 0.125 250);\n    --bs-color-info-600: oklch(0.505 0.125 250);\n    --bs-color-info-700: oklch(0.432 0.112 250);\n    --bs-color-info-800: oklch(0.364 0.092 250);\n    --bs-color-info-900: oklch(0.3 0.072 250);\n    --bs-color-info-950: oklch(0.232 0.052 250);\n    --bs-space-1: 0.25rem;\n    --bs-space-2: 0.5rem;\n    --bs-space-3: 0.75rem;\n    --bs-space-4: 1rem;\n    --bs-space-5: 1.25rem;\n    --bs-space-6: 1.5rem;\n    --bs-space-7: 1.75rem;\n    --bs-space-8: 2rem;\n    --bs-space-10: 2.5rem;\n    --bs-space-12: 3rem;\n    --bs-space-16: 4rem;\n    --bs-space-20: 5rem;\n    --bs-space-24: 6rem;\n    --bs-radius-none: 0rem;\n    --bs-radius-xs: 0.25rem;\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    --bs-radius-full: 9999px;\n  }\n\n\n  /* Light theme — light as shadow, the paper-and-ink register: hierarchy reads through\n     the paper ladder (the ground sits in ambient shade, raised surfaces catch\n     the light), hairline borders, and restrained cast shadows in warm ink.\n     Controls stay crisp — a paper-white surface, one hairline, and shadow-xs.\n     Primary defaults to ink so the interface stays monochrome and solemn; the\n     pigment accents (qinghua, celadon, zhusha) live in accent.css. */\n\n  :root,\n  :host,\n  [data-theme=\"light\"],\n  :host([data-theme=\"light\"]) {\n    color-scheme: light;\n\n    /* Surfaces: the ground rests in ambient shade; raised surfaces catch the\n       light. Warm paper whites throughout — pure #ffffff never appears, it\n       would read clinical against the ink. */\n    --bs-color-surface-0: var(--bs-color-gray-50);\n    /* The page paper itself — the alias floating bodies read, mirroring\n       --bs-color-surface-inverse below. */\n    --bs-color-surface: var(--bs-color-surface-0);\n    --bs-color-surface-1: var(--bs-color-gray-25);\n    --bs-color-surface-2: oklch(0.988 0.004 95);\n    --bs-color-surface-3: oklch(0.988 0.004 95);\n    --bs-color-surface-4: oklch(0.988 0.004 95);\n    --bs-color-surface-5: oklch(0.988 0.004 95);\n    --bs-color-surface-inset: var(--bs-color-gray-100);\n    /* The inverted surface — ink on paper — hosts floating labels like\n       tooltips that must read against the page, never blend into it. */\n    --bs-color-surface-inverse: var(--bs-color-gray-800);\n    --bs-color-scrim: oklch(0.15 0.007 76 / 0.4);\n\n    --bs-color-text-primary: var(--bs-color-gray-900);\n    --bs-color-text-secondary: var(--bs-color-gray-600);\n    --bs-color-text-tertiary: var(--bs-color-gray-500);\n    --bs-color-text-disabled: var(--bs-color-gray-400);\n    --bs-color-text-inverse: var(--bs-color-surface-2);\n    /* Ink over the scrim — the dimmed room behind dialogs and lightboxes.\n       The scrim never lightens with the theme, so neither may the ink on\n       it: this stays paper-bright in both registers, unlike the mirror\n       ink above, which answers the page it floats over. */\n    --bs-color-text-on-scrim: var(--bs-color-surface-2);\n    /* Ink on a solid pigment fill: paper under daylight, kneaded bright\n       under lacquer night (see the dark theme). */\n    --bs-color-ink-on-fill: var(--bs-color-surface-2);\n    --bs-ink-knead: 0%;\n\n    --bs-color-border: var(--bs-color-gray-200);\n    --bs-color-border-strong: var(--bs-color-gray-300);\n\n    /* Focus is a halo of light: a crisp inner line inside a soft, wide\n       glow. Every default scene carries it, text inputs included. The\n       inset variant serves parts flush against a container edge, where\n       an outer halo would spill past it. */\n    --bs-color-focus: var(--bs-color-primary);\n    /* The hairline a focused control wears. A scene that borrows another\n       system's focus language re-points it — Fluent keeps the edge neutral\n       and lets the underline speak. */\n    --bs-focus-edge: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 20%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary is ink by default — solemn, unhurried, industry-neutral. The\n       hover deepens the ink into the paper; the pigment accents override the\n       whole block (see accent.css). */\n    --bs-color-primary: var(--bs-color-gray-800);\n    --bs-color-primary-hover: var(--bs-color-gray-900);\n    --bs-color-primary-active: var(--bs-color-gray-925);\n    --bs-color-primary-text: var(--bs-color-surface-2);\n    /* The solid-fill body: pigments rest at full strength on paper — night\n       kneads them (see the dark theme), daylight does not. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: var(--bs-color-gray-100);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-800);\n    --bs-color-primary-border: var(--bs-color-gray-300);\n\n    /* Fixed semantic pigments — bamboo, ochre, cinnabar, ultramarine. They do\n       not follow the accent theme: an error is always cinnabar-red, a warning\n       always ochre, whatever pigment the brand rides. */\n    --bs-color-success: var(--bs-color-success-600);\n    --bs-color-success-hover: var(--bs-color-success-700);\n    --bs-color-success-subtle: var(--bs-color-success-100);\n    --bs-color-success-subtle-text: var(--bs-color-success-800);\n\n    --bs-color-warning: var(--bs-color-warning-600);\n    --bs-color-warning-hover: var(--bs-color-warning-700);\n    --bs-color-warning-subtle: var(--bs-color-warning-100);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-800);\n\n    --bs-color-danger: var(--bs-color-danger-600);\n    --bs-color-danger-hover: var(--bs-color-danger-700);\n    --bs-color-danger-subtle: var(--bs-color-danger-100);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-800);\n\n    --bs-color-info: var(--bs-color-info-600);\n    --bs-color-info-hover: var(--bs-color-info-700);\n    --bs-color-info-subtle: var(--bs-color-info-100);\n    --bs-color-info-subtle-text: var(--bs-color-info-800);\n\n    /* Lighting — elevation shadows are computed, never copy-pasted. Every\n       shadow draws its ink from --bs-shadow-ink, this theme's warm shadow hue,\n       shifts with --bs-light-x/-y (where the key light stands), and spreads\n       with --bs-light-reach (how high the surface floats). Custom properties\n       resolve their own var() references at the declaring element, so these\n       composite tokens always carry theme ink; a colored surface that casts in\n       its own color composes its shadow inline from these parts mixed with its\n       tint — see the dialog trigger. Restraint ladder: controls carry only\n       shadow-xs; cards rise on elevation-1/2; menus and popovers separate on\n       elevation-3; dialogs own elevation-4/5. */\n    --bs-shadow-ink: oklch(0.3 0.02 80);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    /* Weighted hairlines: the 1px edge everything rides, and the 3px\n       status edge an alert earns. */\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 5%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent);\n    --bs-elevation-2:\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 6%, transparent),\n      var(--bs-light-x) calc(3px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 9%, transparent);\n    --bs-elevation-3:\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent),\n      var(--bs-light-x) calc(5px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent);\n    --bs-elevation-4:\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(28px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent),\n      var(--bs-light-x) calc(28px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(56px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent);\n    --bs-elevation-5:\n      var(--bs-light-x) calc(6px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(16px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(40px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-16px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent);\n  }\n\n\n  /* Dark theme — lacquer night: the room dims into warm lacquer black,\n     and text turns to paper. Surfaces still brighten as they rise (e0 darkest\n     → e5 lightest) — at night the ladder of light, not the cast shadow, does\n     the separating. Primary inverts: paper-white buttons set ink on fire\n     gently against the dark. */\n\n  [data-theme=\"dark\"],\n  :host([data-theme=\"dark\"]) {\n    color-scheme: dark;\n\n    /* Lacquer surfaces: warm black at every step, never pure #000. */\n    --bs-color-surface-0: oklch(0.165 0.008 75);\n    /* The page paper itself — the alias floating bodies read, mirroring\n       --bs-color-surface-inverse below. */\n    --bs-color-surface: var(--bs-color-surface-0);\n    --bs-color-surface-1: oklch(0.205 0.009 75);\n    --bs-color-surface-2: oklch(0.245 0.01 76);\n    --bs-color-surface-3: oklch(0.272 0.01 76);\n    --bs-color-surface-4: oklch(0.29 0.01 76);\n    --bs-color-surface-5: oklch(0.31 0.01 76);\n    --bs-color-surface-inset: oklch(0.135 0.007 75);\n    /* The inverted surface — paper on lacquer — hosts floating labels like\n       tooltips; at night the inversion reads as a slip of bright paper. */\n    --bs-color-surface-inverse: var(--bs-color-gray-100);\n    --bs-color-scrim: oklch(0.05 0.01 75 / 0.6);\n\n    --bs-color-text-primary: oklch(0.925 0.006 90);\n    --bs-color-text-secondary: var(--bs-color-gray-300);\n    --bs-color-text-tertiary: var(--bs-color-gray-400);\n    --bs-color-text-disabled: var(--bs-color-gray-500);\n    --bs-color-text-inverse: var(--bs-color-gray-900);\n    /* Ink over the scrim — the dimmed room behind dialogs and lightboxes.\n       The scrim never lightens with the theme, so neither may the ink on\n       it: this stays paper-bright in both registers, unlike the mirror\n       ink above, which answers the page it floats over. */\n    --bs-color-text-on-scrim: var(--bs-color-gray-100);\n    /* Ink on a solid pigment fill: pigments knead a fifth of ink into their\n       bodies at night (a mid-tone fill carries neither deep nor pale text\n       past 4.5:1), so the ink turns bright paper. */\n    --bs-color-ink-on-fill: var(--bs-color-gray-25);\n    --bs-ink-knead: 20%;\n\n    --bs-color-border: oklch(0.31 0.01 78);\n    --bs-color-border-strong: oklch(0.4 0.012 78);\n\n    /* The halo reads brighter at night, like any light source does. */\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-edge: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 26%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary inverts to paper — ink set down on lacquer. */\n    --bs-color-primary: oklch(0.93 0.007 90);\n    --bs-color-primary-hover: var(--bs-color-gray-200);\n    --bs-color-primary-active: var(--bs-color-gray-300);\n    --bs-color-primary-text: var(--bs-color-gray-900);\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 10%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-200);\n    --bs-color-primary-border: var(--bs-color-gray-700);\n\n    /* Semantic pigments lift to their lighter steps at night; the fixed hue\n       relationships (bamboo / ochre / cinnabar / ultramarine) never change. */\n    --bs-color-success: var(--bs-color-success-500);\n    --bs-color-success-hover: var(--bs-color-success-400);\n    --bs-color-success-subtle: color-mix(in oklab, var(--bs-color-success) 16%, transparent);\n    --bs-color-success-subtle-text: var(--bs-color-success-300);\n\n    --bs-color-warning: var(--bs-color-warning-500);\n    --bs-color-warning-hover: var(--bs-color-warning-400);\n    --bs-color-warning-subtle: color-mix(in oklab, var(--bs-color-warning) 16%, transparent);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-300);\n\n    --bs-color-danger: var(--bs-color-danger-500);\n    --bs-color-danger-hover: var(--bs-color-danger-400);\n    --bs-color-danger-subtle: color-mix(in oklab, var(--bs-color-danger) 16%, transparent);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-300);\n\n    --bs-color-info: var(--bs-color-info-500);\n    --bs-color-info-hover: var(--bs-color-info-400);\n    --bs-color-info-subtle: color-mix(in oklab, var(--bs-color-info) 16%, transparent);\n    --bs-color-info-subtle-text: var(--bs-color-info-300);\n\n    /* Elevation in the dark: cast shadows need far more opacity to read against\n       a dark ground, so every level carries a faint warm hairline of light to\n       cut the raised surface out of the one below it. Same lighting parts as\n       light — ink from --bs-shadow-ink, shifted by --bs-light-x/-y, spread by\n       --bs-light-reach; colored surfaces compose their tint inline. */\n    --bs-shadow-ink: oklch(0.04 0.01 75);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 35%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.04),\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 32%, transparent);\n    --bs-elevation-2:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.05),\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-1px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 36%, transparent);\n    --bs-elevation-3:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.06),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent);\n    --bs-elevation-4:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.07),\n      var(--bs-light-x) calc(8px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(16px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent),\n      var(--bs-light-x) calc(24px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(48px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent);\n    --bs-elevation-5:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.08),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 52%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent);\n  }\n\n\n  /* Accent themes — the pigments. Primary is ink by default (theme-light/dark);\n     switching [data-accent] lays a different mineral pigment under the same\n     interface: qinghua (cobalt, the blue of blue-and-white porcelain), celadon\n     (aquatic green-blue), zhusha (cinnabar, the seal-paste red used sparingly\n     by civic sites for identity — never for errors; danger stays cinnabar-red\n     by way of --bs-color-danger, a separate token). Each accent redefines the\n     primary block and the focus hue; the fixed semantic pigments never follow. */\n\n  [data-accent=\"qinghua\"] {\n    --bs-color-primary: var(--bs-color-brand-600);\n    --bs-color-primary-hover: var(--bs-color-brand-700);\n    --bs-color-primary-active: var(--bs-color-brand-800);\n    /* The fill derives here, not only on :root: custom properties resolve\n       var() at the declaring element, so a fill declared only on :root\n       freezes the ink default and never follows an accent that sits below\n       the root (ConfigProvider). */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-brand-100);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-800);\n    --bs-color-primary-border: var(--bs-color-brand-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"qinghua\"],\n  [data-theme=\"dark\"][data-accent=\"qinghua\"],\n  :host([data-theme=\"dark\"][data-accent=\"qinghua\"]) {\n    --bs-color-primary: var(--bs-color-brand-500);\n    --bs-color-primary-hover: var(--bs-color-brand-600);\n    --bs-color-primary-active: var(--bs-color-brand-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-brand-700);\n    --bs-color-primary-fill-hover: var(--bs-color-brand-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-300);\n    --bs-color-primary-border: var(--bs-color-brand-700);\n  }\n\n  [data-accent=\"celadon\"] {\n    --bs-color-primary: var(--bs-color-celadon-600);\n    --bs-color-primary-hover: var(--bs-color-celadon-700);\n    --bs-color-primary-active: var(--bs-color-celadon-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-celadon-100);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-800);\n    --bs-color-primary-border: var(--bs-color-celadon-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"celadon\"],\n  [data-theme=\"dark\"][data-accent=\"celadon\"],\n  :host([data-theme=\"dark\"][data-accent=\"celadon\"]) {\n    --bs-color-primary: var(--bs-color-celadon-500);\n    --bs-color-primary-hover: var(--bs-color-celadon-600);\n    --bs-color-primary-active: var(--bs-color-celadon-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-celadon-700);\n    --bs-color-primary-fill-hover: var(--bs-color-celadon-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-300);\n    --bs-color-primary-border: var(--bs-color-celadon-700);\n  }\n\n  [data-accent=\"zhusha\"] {\n    --bs-color-primary: var(--bs-color-zhusha-600);\n    --bs-color-primary-hover: var(--bs-color-zhusha-700);\n    --bs-color-primary-active: var(--bs-color-zhusha-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-zhusha-100);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-800);\n    --bs-color-primary-border: var(--bs-color-zhusha-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"zhusha\"],\n  [data-theme=\"dark\"][data-accent=\"zhusha\"],\n  :host([data-theme=\"dark\"][data-accent=\"zhusha\"]) {\n    --bs-color-primary: var(--bs-color-zhusha-500);\n    --bs-color-primary-hover: var(--bs-color-zhusha-600);\n    --bs-color-primary-active: var(--bs-color-zhusha-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-zhusha-700);\n    --bs-color-primary-fill-hover: var(--bs-color-zhusha-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-300);\n    --bs-color-primary-border: var(--bs-color-zhusha-700);\n  }\n\n\n  /* Typography — two tracks: the voice and the chrome. The voice is the song\n     stack (upright, structured strokes — Noto Serif SC falling back through the\n     platform faces); headings and editorial narrative ride it, the way Western\n     systems let a serif carry voice. The chrome is the modern hei stack: the\n     platform UI faces lead so Latin letters and figures hold one rhythm with the\n     CJK around them — a Chinese face reaching Latin first drops its digits onto\n     a taller, heavier cut, and the line reads out of true. The CJK set falls in\n     behind — MiSans and HarmonyOS Sans into PingFang / YaHei. Sizes are fixed\n     rem values outside the density scale; compact UI may choose\n     --bs-font-size-sm but never below it. */\n\n  :root,\n  :host {\n    --bs-font-sans:\n      -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, MiSans, \"HarmonyOS Sans SC\",\n      \"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", sans-serif;\n    --bs-font-serif:\n      \"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", SimSun, \"Times New Roman\", Georgia, serif;\n    --bs-font-mono:\n      ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", Consolas, \"PingFang SC\", \"Microsoft YaHei\",\n      monospace;\n\n    --bs-font-size-xs: 0.75rem;\n    --bs-font-size-sm: 0.8125rem;\n    --bs-font-size-md: 0.875rem;\n    --bs-font-size-base: 0.9375rem;\n    --bs-font-size-lg: 1.0625rem;\n    --bs-font-size-xl: 1.25rem;\n    --bs-font-size-2xl: 1.5rem;\n    --bs-font-size-3xl: 1.875rem;\n    --bs-font-size-4xl: 2.25rem;\n\n    /* The stroke icons are drawn with: one width, tuned to sit beside the\n       hairline instead of fighting it. */\n    --bs-icon-stroke-width: 1.75;\n\n    --bs-line-height-tight: 1.25;\n    --bs-line-height-snug: 1.375;\n    --bs-line-height-normal: 1.5;\n    --bs-line-height-relaxed: 1.625;\n\n    /* Control labels carry a whisper of tracking — upright and unhurried is a\n       property of CJK typesetting, not of any single typeface. */\n    --bs-tracking-label: 0.02em;\n\n    --bs-font-weight-regular: 400;\n    --bs-font-weight-medium: 500;\n    --bs-font-weight-semibold: 600;\n    --bs-font-weight-bold: 700;\n  }\n\n\n  /* Motion — the ink-and-light grammar. Three rules and a floor:\n     Light needs time — shadows transition about 1.5x slower than the property\n     that raised them, so a shadow reads as cast light, not a sticker.\n     Ink bleeds — surfaces enter by fading AND dissolving (blur to sharp),\n     never popping. Puppets have strings — moving parts overshoot on the spring\n     curve, and lists follow one another with a small stagger.\n     Tokens drive all transitions; the reduced-motion block retunes them instead\n     of removing states, so opacity still communicates elevation changes. */\n\n  /* Defaults sit at zero specificity (:where): the motion sheet can appear\n     twice in the compiled bundle — once before and once after scene.css —\n     and a plain :root would tie [data-scene] on specificity and, in that\n     second copy, outrank it by file order, silencing every scene that\n     retunes the curves below. */\n  :where(:root),\n  :where(:host) {\n    /* Durations ride --bs-motion-scale so a scene preset can tune the pace\n       (a snappier instrument, an unhurried civic register) without touching\n       the reduced-motion floor below, which declares 1ms directly. */\n    --bs-duration-instant: calc(80ms * var(--bs-motion-scale, 1));\n    --bs-duration-fast: calc(140ms * var(--bs-motion-scale, 1));\n    --bs-duration-base: calc(200ms * var(--bs-motion-scale, 1));\n    --bs-duration-slow: calc(320ms * var(--bs-motion-scale, 1));\n\n    --bs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n    --bs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n    --bs-ease-in: cubic-bezier(0.7, 0, 0.84, 0);\n    --bs-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);\n\n    /* Stagger step for lists and menus — each follower comes up 24ms after\n       the one before it, like puppets lifted in sequence. */\n    --bs-stagger-step: 24ms;\n\n    /* The press wash (ink-ripple) reads its pigment, reach, curve, and pace\n       from these, so a scene preset can retune the feedback — a smaller,\n       crisper wave in the flat content color for material, or silence for\n       registers that press without a wash — without touching the keyframes\n       in the core. The pigment is an opaque color and --bs-ripple-opacity\n       is the whole concentration — the two never double-deduct. */\n    --bs-ripple-pigment: var(--bs-color-primary);\n    --bs-ripple-opacity: 0.27;\n    --bs-ripple-core: 0%;\n    --bs-ripple-fade: 80%;\n    --bs-ripple-duration: calc(650ms * var(--bs-motion-scale, 1));\n    --bs-ripple-release: calc(320ms * var(--bs-motion-scale, 1));\n    --bs-ripple-ease: var(--bs-ease-out);\n    --bs-ripple-spread: 1;\n  }\n\n  /* Surfaces dissolve in like ink settling into paper: a fade, a soft focus\n     pulling sharp, and a one-percent settle. Panels and menus apply it on\n     their open state; exits stay plain opacity fades — faster, unobtrusive. */\n  @keyframes bs-ink-in {\n    from {\n      opacity: 0;\n      filter: blur(3px);\n      scale: 1.01;\n    }\n    to {\n      opacity: 1;\n      filter: blur(0);\n      scale: 1;\n    }\n  }\n\n  /* Followers rise into place on the string — a short lift with the spring\n     curve. Combine with per-item `animation-delay: calc(var(--bs-i) * var(--bs-stagger-step))`. */\n  @keyframes bs-item-in {\n    from {\n      opacity: 0;\n      translate: 0 4px;\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :root,\n    :host {\n      --bs-duration-instant: 1ms;\n      --bs-duration-fast: 1ms;\n      --bs-duration-base: 1ms;\n      --bs-duration-slow: 1ms;\n      --bs-stagger-step: 0ms;\n    }\n  }\n\n\n  /* Scene presets — one attribute that retunes the temperament of the whole\n     interface. Two families share the same five levers: the audience scenes\n     serve a desk (civic for elders and civic desks, tech for modern\n     efficiency products, enterprise the quiet commercial baseline, studio\n     the literati gathering for design and editorial work), and the style\n     scenes borrow the temperament of the major design languages — named for\n     the open specs and the places their platforms are built, never the\n     companies: cupertino for the soft airy handheld register, expressive\n     for motion-forward spring, fluent for measured productivity depth,\n     material for the elevation-led android-era look.\n\n     A scene moves only what the paper allows: shape (radius), density, motion\n     pace and its curves, where the key light stands and how far it reaches,\n     and how the press wash spreads. A style scene follows the register it\n     borrows whole — so it may also re-point the focus tokens, speaking\n     focus in the register's own dialect instead of the house halo — and it\n     may retint the paper itself (the surface ladder, light and dark) where\n     the borrowed register demands its own stock, and let the type follow\n     the register's voice — the one font move allowed is the platform's own\n     stack, which is what the register would speak in anyway. No scene\n     touches interaction logic or the semantic pigments. Each scene pairs\n     with a default accent and (for civic) the high-contrast tier; those\n     pairings are applied by the theme engine as plain data attributes, so\n     the accent and contrast rules — including their dark variants — carry\n     them unchanged.\n\n     Explicit attributes always outrank the scene's bundled defaults: a\n     `[data-accent]`, `[data-contrast]`, or `[data-density]` set alongside\n     `[data-scene]` wins by cascade order. Note `:root` ties `[data-scene]` in\n     specificity (both 0,1,0), so this file must sit after every stylesheet\n     that declares these variables on `:root` (themes, primitives via accent's\n     placement) and before density.css, whose explicit tiers must win over\n     scene defaults. */\n\n  [data-scene=\"civic\"] {\n    /* 典章 — for elders and civic desks: the square-cut register of official\n       documents. Corners go true square (a seal is not round), targets grow\n       to the spacious ladder (48px controls), the pace slows so states are\n       never missed, and the light stays flat so nothing hides in a shadow. */\n    --bs-radius-sm: 0rem;\n    --bs-radius-md: 0.125rem;\n    --bs-radius-lg: 0.25rem;\n    --bs-radius-xl: 0.375rem;\n    --bs-radius-2xl: 0.5rem;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n    --bs-density-scale: 1.5;\n    --bs-motion-scale: 1.25;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.7;\n  }\n\n  [data-scene=\"enterprise\"] {\n    /* 信笺 — the measured commercial baseline: default geometry at a calmer\n       light, so long working sessions read quiet and the hairlines do the\n       talking. */\n    --bs-density-scale: 1;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.85;\n  }\n\n  [data-scene=\"studio\"] {\n    /* 雅集 — the literati gathering for design and editorial work: controls\n       keep the 6px seal edge, vessels round out generously, whitespace\n       breathes, and the light comes from the upper left, casting each\n       element's shadow gently toward the lower right. */\n    --bs-radius-md: 0.625rem;\n    --bs-radius-lg: 0.875rem;\n    --bs-radius-xl: 1.25rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0.125rem;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.25;\n  }\n\n  [data-scene=\"tech\"] {\n    /* 司南 — the modern precision instrument: near-square corners, dense\n       rows, a snappy pace, and a flat restrained light where hairlines carry\n       all the hierarchy. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n    --bs-density-scale: 0.75;\n    --bs-motion-scale: 0.85;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.5;\n  }\n\n  /* The style scenes — five-lever homages, never clones: no frosted\n     materials, no imported fonts (a scene's voice goes only to the\n     platform's own stack), just the temperament a scene's levers can\n     honestly reach. */\n\n  [data-scene=\"cupertino\"] {\n    /* 圆融 — the soft airy register of handheld design: the capsule is\n       the action signal (every pressable thing rounds full), vessels round out\n       dramatically, targets grow to the 44px touch ladder, and motion\n       glides on the long sheet-spring curve. The interface stays light and\n       airy — separation reads as gentle diffuse depth, not cast shadow,\n       and presses answer through the fill change, never a wash. */\n    --bs-radius-md: 0.75rem;\n    --bs-radius-lg: 1.125rem;\n    --bs-radius-xl: 1.5rem;\n    --bs-radius-2xl: 2.25rem;\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.75rem;\n    --bs-control-height-lg: 3.125rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1.1;\n    --bs-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n    --bs-ease-spring: cubic-bezier(0.34, 1.1, 0.64, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.8;\n    --bs-ripple-opacity: 0;\n    /* Focus speaks the platform dialect: a crisp 2px accent outline\n       pulled inside the control's edge — no halo. */\n    --bs-focus-ring: inset 0 0 0 2px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);\n    /* The handheld register speaks in the system voice: headlines stand\n       down from the serif — everything rides the sans stack — and labels\n       lose their brush tracking. */\n    --bs-font-serif: var(--bs-font-sans);\n    --bs-tracking-label: 0em;\n  }\n\n  /* The borrowed papers. Four of the style scenes retint the surface\n     ladder toward the register they borrow from — cupertino's clean\n     handheld white, material's neutral violet-gray, sketch's warm\n     sketchbook stock — while the paper-and-ink scenes keep the house\n     stock. Custom properties on the root resolve per theme attribute, so\n     each paper carries a light and a dark face. */\n  [data-scene=\"cupertino\"][data-theme=\"light\"],\n  [data-scene=\"cupertino\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.973 0.001 265);\n    --bs-color-surface-1: oklch(0.981 0.001 265);\n    --bs-color-surface-2: oklch(0.992 0.001 265);\n    --bs-color-surface-3: oklch(0.992 0.001 265);\n    --bs-color-surface-4: oklch(0.992 0.001 265);\n    --bs-color-surface-5: oklch(0.992 0.001 265);\n  }\n\n  [data-scene=\"cupertino\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.165 0.004 262);\n    --bs-color-surface-1: oklch(0.205 0.004 262);\n    --bs-color-surface-2: oklch(0.245 0.004 262);\n    --bs-color-surface-3: oklch(0.272 0.004 262);\n    --bs-color-surface-4: oklch(0.29 0.004 262);\n    --bs-color-surface-5: oklch(0.31 0.004 262);\n  }\n\n  [data-scene=\"expressive\"] {\n    /* 飞白 — the motion-forward register, the dry brush that races ahead\n       of the ink. Generous rounding, a quick pace, and curves that overshoot\n       on the spring — the interface answers like an instrument, not a\n       form — under a warm key light from above. Focus speaks the\n       register's dialect: the solid pigment outline. */\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    /* Every press is a pill in the expressive register, on the 32/40/48\n       container ladder. */\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.5rem;\n    --bs-control-height-lg: 3rem;\n    --bs-motion-scale: 0.8;\n    --bs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n    --bs-ease-spring: cubic-bezier(0.34, 1.56, 0.5, 1);\n    --bs-light-x: 0.1875rem;\n    --bs-light-y: 0.1875rem;\n    --bs-light-reach: 1;\n    --bs-focus-ring: 0 0 0 3px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 3px var(--bs-color-focus);\n  }\n\n  [data-scene=\"fluent\"] {\n    /* 流水 — the measured productivity register, 行云流水: the corner\n       ladder runs 2/4/8/12 (shapes under 32px round to 2, controls 4,\n       vessels 8, sheets 12), measured rows on the 24/32/40 control ladder,\n       a brisk pace on the decelerate and standard curves, and a soft key\n       light from straight above whose shadows fall close to the element —\n       depth as quiet layering, no ripple. The paper goes neutral, both\n       faces, the register's own calm gray. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n    --bs-density-scale: 0.9;\n    --bs-motion-scale: 0.85;\n    --bs-ease-out: cubic-bezier(0.1, 0.9, 0.2, 1);\n    --bs-ease-in-out: cubic-bezier(0.33, 0, 0.67, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 0.7;\n    --bs-ripple-opacity: 0;\n    /* Focus speaks the register's dialect: the edge stays neutral while a\n       2px brand underline carries the state — structure, not glow. */\n    --bs-focus-edge: var(--bs-color-border);\n    --bs-focus-ring: inset 0 -2px 0 0 var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 -2px 0 0 var(--bs-color-focus);\n  }\n\n  /* The layers: light sits on the calm gray ground with layered whites\n     rising above it; dark climbs through three gray steps. Chroma zero —\n     this register keeps no pigment in its paper. */\n  [data-scene=\"fluent\"][data-theme=\"light\"],\n  [data-scene=\"fluent\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.956 0 0);\n    --bs-color-surface-1: oklch(0.973 0 0);\n    --bs-color-surface-2: oklch(0.992 0 0);\n    --bs-color-surface-3: oklch(0.992 0 0);\n    --bs-color-surface-4: oklch(0.992 0 0);\n    --bs-color-surface-5: oklch(0.992 0 0);\n  }\n\n  [data-scene=\"fluent\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.224 0 0);\n    --bs-color-surface-1: oklch(0.251 0 0);\n    --bs-color-surface-2: oklch(0.29 0 0);\n    --bs-color-surface-3: oklch(0.315 0 0);\n    --bs-color-surface-4: oklch(0.34 0 0);\n    --bs-color-surface-5: oklch(0.365 0 0);\n  }\n\n  [data-scene=\"material\"] {\n    /* 格物 — the elevation-led register, 格物致知: the shape ladder of\n       4px small, 8px medium, 12px medium-large vessels, 16px large,\n       28px extra-large — with pill presses on the 32 / 40 / 48 container\n       ladder (the touch minimum the register is built\n       around), the emphasized curves, and the signature that gives the\n       look its name: the key light stands directly overhead, so every\n       raised surface casts a soft shadow straight down a tall ladder.\n       Presses answer with the water ripple — a crisp solid wave that\n       holds while the finger holds, then leaves quickly. */\n    --bs-radius-sm: 0.25rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.5rem;\n    --bs-control-height-lg: 3rem;\n    --bs-motion-scale: 0.9;\n    --bs-ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);\n    --bs-ease-in-out: cubic-bezier(0.2, 0, 0, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.5;\n    /* Focus speaks the register's dialect: a solid pigment outline riding\n       just outside the part — no glow. */\n    --bs-focus-ring: 0 0 0 3px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 3px var(--bs-color-focus);\n    --bs-ripple-pigment: var(--bs-color-text-primary);\n    --bs-ripple-opacity: 0.12;\n    --bs-ripple-core: 97%;\n    --bs-ripple-fade: 100%;\n    --bs-ripple-duration: calc(450ms * var(--bs-motion-scale, 1));\n    --bs-ripple-release: calc(300ms * var(--bs-motion-scale, 1));\n    --bs-ripple-ease: cubic-bezier(0.2, 0, 0, 1);\n    --bs-ripple-spread: 0.8;\n  }\n\n  /* The surface: neutral, tinted faintly violet instead of the house's\n     warm paper — the elevation-led register reads against cooler ground. */\n  [data-scene=\"material\"][data-theme=\"light\"],\n  [data-scene=\"material\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.966 0.006 300);\n    --bs-color-surface-1: oklch(0.976 0.005 300);\n    --bs-color-surface-2: oklch(0.986 0.004 300);\n    --bs-color-surface-3: oklch(0.986 0.004 300);\n    --bs-color-surface-4: oklch(0.986 0.004 300);\n    --bs-color-surface-5: oklch(0.986 0.004 300);\n  }\n\n  [data-scene=\"material\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.165 0.009 300);\n    --bs-color-surface-1: oklch(0.205 0.01 300);\n    --bs-color-surface-2: oklch(0.245 0.011 300);\n    --bs-color-surface-3: oklch(0.272 0.011 300);\n    --bs-color-surface-4: oklch(0.29 0.011 300);\n    --bs-color-surface-5: oklch(0.31 0.011 300);\n  }\n\n  [data-scene=\"sketch\"] {\n    /* 写意 — the hand-drawn register, 不求形似求神韵: the loose brush of\n       sketchbooks and comics. No frame stays straight — every radius is an\n       uneven four-corner oval (the asymmetric slash syntax of a drawn\n       box), the fully-round tokens wobble too, moving parts bounce hard on\n       the spring, whitespace loosens, and the light sits off-axis like a\n       sticker's cast shadow. This block is the first of four wobble sets —\n       the other three follow, rotated by sibling position so no two\n       elements sway alike. */\n    --bs-radius-xs: 0.3rem 0.5rem 0.4rem 0.55rem / 0.5rem 0.35rem 0.55rem 0.4rem;\n    --bs-radius-sm: 0.5rem 0.9rem 0.625rem 0.8rem / 0.8rem 0.55rem 0.9rem 0.625rem;\n    --bs-radius-md: 0.625rem 1.125rem 0.75rem 1rem / 1rem 0.625rem 1.125rem 0.75rem;\n    --bs-radius-lg: 1rem 1.625rem 1.25rem 1.875rem / 1.625rem 1rem 1.875rem 1.25rem;\n    --bs-radius-xl: 1.5rem 2.25rem 1.75rem 2.5rem / 2.25rem 1.5rem 2.5rem 1.75rem;\n    --bs-radius-2xl: 2rem 2.875rem 2.375rem 3rem / 2.875rem 2rem 3rem 2.375rem;\n    --bs-radius-full: 1.25rem 1.75rem 1.5rem 1.875rem / 1.75rem 1.25rem 1.875rem 1.5rem;\n    --bs-density-scale: 1.15;\n    --bs-motion-scale: 0.9;\n    --bs-ease-spring: cubic-bezier(0.34, 1.66, 0.64, 1);\n    --bs-stagger-step: 40ms;\n    --bs-light-x: 0.1875rem;\n    --bs-light-y: 0.1875rem;\n    --bs-light-reach: 0.85;\n    --bs-ripple-opacity: 0.18;\n    --bs-ripple-duration: calc(450ms * var(--bs-motion-scale, 1));\n  }\n\n  /* The sketchbook stock: warmer and yellower than the house paper — the\n     slightly grubby cream of a well-used drawing pad, night bleeding\n     warmer still. */\n  [data-scene=\"sketch\"][data-theme=\"light\"],\n  [data-scene=\"sketch\"]:not([data-theme]) {\n    --bs-color-surface-0: oklch(0.958 0.014 92);\n    --bs-color-surface-1: oklch(0.972 0.013 93);\n    --bs-color-surface-2: oklch(0.982 0.012 95);\n    --bs-color-surface-3: oklch(0.982 0.012 95);\n    --bs-color-surface-4: oklch(0.982 0.012 95);\n    --bs-color-surface-5: oklch(0.982 0.012 95);\n  }\n\n  [data-scene=\"sketch\"][data-theme=\"dark\"] {\n    --bs-color-surface-0: oklch(0.165 0.012 85);\n    --bs-color-surface-1: oklch(0.205 0.013 85);\n    --bs-color-surface-2: oklch(0.245 0.014 85);\n    --bs-color-surface-3: oklch(0.272 0.014 85);\n    --bs-color-surface-4: oklch(0.29 0.014 85);\n    --bs-color-surface-5: oklch(0.31 0.014 85);\n  }\n\n  /* The three sibling sets. CSS has no random, but an element's seat among\n     its siblings is a good enough dice roll: the same layout never repeats\n     the same sway, while any one element stays put — the frame is drawn\n     once, then holds. */\n  [data-scene=\"sketch\"] :nth-child(4n + 2) {\n    --bs-radius-xs: 0.5rem 0.35rem 0.45rem 0.55rem / 0.4rem 0.55rem 0.35rem 0.5rem;\n    --bs-radius-sm: 0.85rem 0.6rem 0.95rem 0.7rem / 0.6rem 0.9rem 0.7rem 0.95rem;\n    --bs-radius-md: 1.05rem 0.7rem 1.2rem 0.8rem / 0.7rem 1.15rem 0.8rem 1.2rem;\n    --bs-radius-lg: 1.7rem 1.15rem 1.9rem 1.3rem / 1.15rem 1.8rem 1.3rem 1.95rem;\n    --bs-radius-xl: 2.4rem 1.65rem 2.6rem 1.8rem / 1.65rem 2.55rem 1.8rem 2.6rem;\n    --bs-radius-2xl: 3.05rem 2.1rem 3.25rem 2.2rem / 2.1rem 3.15rem 2.2rem 3.3rem;\n    --bs-radius-full: 1.65rem 1.3rem 1.8rem 1.35rem / 1.3rem 1.7rem 1.35rem 1.85rem;\n  }\n\n  [data-scene=\"sketch\"] :nth-child(4n + 3) {\n    --bs-radius-xs: 0.45rem 0.3rem 0.55rem 0.4rem / 0.35rem 0.5rem 0.45rem 0.55rem;\n    --bs-radius-sm: 0.7rem 1rem 0.55rem 0.85rem / 0.95rem 0.65rem 0.85rem 0.6rem;\n    --bs-radius-md: 0.85rem 1.25rem 0.7rem 1.1rem / 1.2rem 0.75rem 1.05rem 0.7rem;\n    --bs-radius-lg: 1.35rem 1.95rem 1.1rem 1.7rem / 1.9rem 1.2rem 1.75rem 1.15rem;\n    --bs-radius-xl: 2rem 2.8rem 1.7rem 2.5rem / 2.75rem 1.8rem 2.5rem 1.7rem;\n    --bs-radius-2xl: 2.7rem 3.6rem 2.3rem 3.3rem / 3.5rem 2.3rem 3.2rem 2.2rem;\n    --bs-radius-full: 1.4rem 1.9rem 1.3rem 1.75rem / 1.85rem 1.35rem 1.8rem 1.3rem;\n  }\n\n  [data-scene=\"sketch\"] :nth-child(4n) {\n    --bs-radius-xs: 0.35rem 0.55rem 0.3rem 0.5rem / 0.55rem 0.4rem 0.5rem 0.35rem;\n    --bs-radius-sm: 0.6rem 0.8rem 0.5rem 0.9rem / 0.75rem 0.55rem 0.95rem 0.65rem;\n    --bs-radius-md: 0.75rem 1rem 0.6rem 1.15rem / 0.95rem 0.7rem 1.1rem 0.8rem;\n    --bs-radius-lg: 1.2rem 1.6rem 1.05rem 1.8rem / 1.55rem 1.1rem 1.85rem 1.25rem;\n    --bs-radius-xl: 1.8rem 2.4rem 1.6rem 2.6rem / 2.3rem 1.7rem 2.7rem 1.9rem;\n    --bs-radius-2xl: 2.4rem 3.2rem 2.15rem 3.5rem / 3.1rem 2.3rem 3.6rem 2.4rem;\n    --bs-radius-full: 1.35rem 1.8rem 1.25rem 1.7rem / 1.75rem 1.4rem 1.9rem 1.45rem;\n  }\n\n\n  /* Density — decoration compresses, information never does: density scales whitespace and decoration\n     only. Type sizes and contrast stay fixed so compact can never trade away\n     readability. Control heights ride the density directly — a compact\n     workbench and an elder-friendly spacious screen are different products,\n     not the same one nudged by two pixels. */\n\n  /* The default scale sits behind :where() so a scene preset (an attribute,\n     same 0,1,0 as :root) can override it by cascade order, while the explicit\n     [data-density] tiers below still outrank scenes that come before them. */\n  :where(:root),\n  :where(:host) {\n    --bs-density-scale: 1;\n  }\n\n  :root,\n  :host,\n  /* Custom properties resolve their var() references at the declaring\n     element, so these derived tokens must re-declare on any element that\n     carries a density of its own — declared only on :root, they freeze at\n     the root's scale and a provider re-tuning --bs-density-scale on a\n     subtree would move nothing but the control heights. */\n  [data-density],\n  :host([data-density]) {\n    /* Interior control parts (thumbs, knobs, check boxes, close buttons) are\n       decoration riding a control, not the control itself: they scale with\n       density and keep no readable floor, so a compact density actually\n       makes them smaller. */\n    --bs-part-size-sm: calc(1rem * var(--bs-density-scale));\n    --bs-part-size-md: calc(1.25rem * var(--bs-density-scale));\n    --bs-part-size-lg: calc(1.75rem * var(--bs-density-scale));\n\n    /* Density-scaled whitespace. */\n    --bs-padding-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-padding-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-padding-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-padding-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-padding-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-padding-2xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n    /* Both ladders share one ramp mapping — a same-named tier must not be\n       two different sizes depending on which property carries it. */\n    --bs-gap-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-gap-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-gap-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-gap-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-gap-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-gap-2xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n    --bs-margin-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-margin-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-margin-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-margin-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-margin-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-margin-2xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n  }\n\n  /* Control heights per tier — the cross-system ladders (28/32/40 sits at\n     default; compact matches the Fiori/Ant workbench register; spacious\n     reaches the 48px targets elderly-vision research asks for). The base\n     tier sits behind :where() like the scale above, so a scene's bundled\n     ladder overrides it by cascade order while the explicit [data-density]\n     tiers below still outrank both. */\n  :where(:root),\n  :where(:host) {\n    --bs-control-height-sm: 1.75rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n  }\n\n  [data-density=\"compact\"],\n  :host([data-density=\"compact\"]) {\n    --bs-density-scale: 0.75;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n  }\n\n  [data-density=\"comfortable\"],\n  :host([data-density=\"comfortable\"]) {\n    --bs-density-scale: 1.25;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n  }\n\n  [data-density=\"spacious\"],\n  :host([data-density=\"spacious\"]) {\n    --bs-density-scale: 1.5;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n  }\n\n\n  /* Contrast tier — softness comes from light and shadow, never from low contrast: the aesthetic softens through\n     light, never through gray-on-gray. The high tier pulls secondary text and\n     borders up to primary strength and deepens the focus halo; it exists so\n     older and low-vision users get the same design, just louder. Surface\n     steps stay untouched — rows signal hover by one step of shade, and\n     flattening the ladder would silence every hover in the system. */\n\n  [data-contrast=\"high\"],\n  :host([data-contrast=\"high\"]) {\n    --bs-color-text-secondary: var(--bs-color-text-primary);\n    --bs-color-text-tertiary: var(--bs-color-text-secondary);\n    --bs-color-border: var(--bs-color-border-strong);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 34%, transparent);\n  }\n\n  [data-theme=\"light\"][data-contrast=\"high\"],\n  :host([data-theme=\"light\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-400);\n  }\n\n  [data-theme=\"dark\"][data-contrast=\"high\"],\n  :host([data-theme=\"dark\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-500);\n  }\n\n\n  /* Overlay stacking — one shared base for every dismissible layer (dialog,\n     popover, menu, select, …), ordered by zag's --layer-index offset so any\n     nesting combination stacks correctly. Per-component bases are forbidden. */\n  :root,\n  :host {\n    --bs-z-overlay: 1000;\n  }\n}\n";
+export default "@layer bs.tokens;\n\n@layer bs.tokens {\n  /**\n   * Do not edit directly, this file was auto-generated.\n   */\n\n  :root, :host {\n    --bs-color-gray-25: oklch(0.985 0.003 92);\n    --bs-color-gray-50: oklch(0.968 0.005 90);\n    --bs-color-gray-100: oklch(0.928 0.007 88);\n    --bs-color-gray-200: oklch(0.872 0.009 86);\n    --bs-color-gray-300: oklch(0.795 0.011 84);\n    --bs-color-gray-400: oklch(0.665 0.013 82);\n    --bs-color-gray-500: oklch(0.568 0.014 80);\n    --bs-color-gray-600: oklch(0.482 0.014 78);\n    --bs-color-gray-700: oklch(0.405 0.013 76);\n    --bs-color-gray-800: oklch(0.318 0.011 76);\n    --bs-color-gray-850: oklch(0.272 0.01 76);\n    --bs-color-gray-900: oklch(0.23 0.009 76);\n    --bs-color-gray-925: oklch(0.188 0.008 76);\n    --bs-color-gray-950: oklch(0.15 0.007 76);\n    --bs-color-gray-975: oklch(0.118 0.006 76);\n    --bs-color-brand-50: oklch(0.962 0.014 255);\n    --bs-color-brand-100: oklch(0.93 0.031 255);\n    --bs-color-brand-200: oklch(0.885 0.056 255);\n    --bs-color-brand-300: oklch(0.815 0.09 255);\n    --bs-color-brand-400: oklch(0.72 0.122 255);\n    --bs-color-brand-500: oklch(0.6 0.15 255);\n    --bs-color-brand-600: oklch(0.53 0.155 255);\n    --bs-color-brand-700: oklch(0.46 0.15 255);\n    --bs-color-brand-800: oklch(0.395 0.13 255);\n    --bs-color-brand-900: oklch(0.33 0.105 255);\n    --bs-color-brand-950: oklch(0.26 0.08 255);\n    --bs-color-celadon-50: oklch(0.962 0.014 205);\n    --bs-color-celadon-100: oklch(0.928 0.028 205);\n    --bs-color-celadon-200: oklch(0.88 0.05 205);\n    --bs-color-celadon-300: oklch(0.81 0.072 205);\n    --bs-color-celadon-400: oklch(0.715 0.082 205);\n    --bs-color-celadon-500: oklch(0.63 0.085 205);\n    --bs-color-celadon-600: oklch(0.56 0.085 205);\n    --bs-color-celadon-700: oklch(0.485 0.08 205);\n    --bs-color-celadon-800: oklch(0.41 0.068 205);\n    --bs-color-celadon-900: oklch(0.34 0.054 205);\n    --bs-color-celadon-950: oklch(0.265 0.04 205);\n    --bs-color-zhusha-50: oklch(0.964 0.016 28);\n    --bs-color-zhusha-100: oklch(0.926 0.036 28);\n    --bs-color-zhusha-200: oklch(0.874 0.066 28);\n    --bs-color-zhusha-300: oklch(0.806 0.098 28);\n    --bs-color-zhusha-400: oklch(0.716 0.13 28);\n    --bs-color-zhusha-500: oklch(0.625 0.15 28);\n    --bs-color-zhusha-600: oklch(0.55 0.16 28);\n    --bs-color-zhusha-700: oklch(0.472 0.148 28);\n    --bs-color-zhusha-800: oklch(0.398 0.125 28);\n    --bs-color-zhusha-900: oklch(0.328 0.098 28);\n    --bs-color-zhusha-950: oklch(0.254 0.072 28);\n    --bs-color-success-50: oklch(0.962 0.024 155);\n    --bs-color-success-100: oklch(0.922 0.048 155);\n    --bs-color-success-200: oklch(0.868 0.082 155);\n    --bs-color-success-300: oklch(0.794 0.108 155);\n    --bs-color-success-400: oklch(0.71 0.122 155);\n    --bs-color-success-500: oklch(0.6 0.112 155);\n    --bs-color-success-600: oklch(0.52 0.1 155);\n    --bs-color-success-700: oklch(0.445 0.088 155);\n    --bs-color-success-800: oklch(0.375 0.072 155);\n    --bs-color-success-900: oklch(0.31 0.056 155);\n    --bs-color-success-950: oklch(0.24 0.04 155);\n    --bs-color-warning-50: oklch(0.968 0.028 78);\n    --bs-color-warning-100: oklch(0.934 0.056 74);\n    --bs-color-warning-200: oklch(0.892 0.086 70);\n    --bs-color-warning-300: oklch(0.836 0.112 67);\n    --bs-color-warning-400: oklch(0.76 0.126 66);\n    --bs-color-warning-500: oklch(0.665 0.125 65);\n    --bs-color-warning-600: oklch(0.55 0.122 65);\n    --bs-color-warning-700: oklch(0.495 0.11 63);\n    --bs-color-warning-800: oklch(0.415 0.092 62);\n    --bs-color-warning-900: oklch(0.34 0.074 62);\n    --bs-color-warning-950: oklch(0.262 0.054 62);\n    --bs-color-danger-50: oklch(0.964 0.018 25);\n    --bs-color-danger-100: oklch(0.924 0.04 25);\n    --bs-color-danger-200: oklch(0.87 0.07 25);\n    --bs-color-danger-300: oklch(0.798 0.106 25);\n    --bs-color-danger-400: oklch(0.712 0.138 25);\n    --bs-color-danger-500: oklch(0.6 0.15 25);\n    --bs-color-danger-600: oklch(0.51 0.15 25);\n    --bs-color-danger-700: oklch(0.44 0.135 25);\n    --bs-color-danger-800: oklch(0.372 0.112 25);\n    --bs-color-danger-900: oklch(0.306 0.088 25);\n    --bs-color-danger-950: oklch(0.236 0.064 25);\n    --bs-color-info-50: oklch(0.962 0.014 250);\n    --bs-color-info-100: oklch(0.924 0.03 250);\n    --bs-color-info-200: oklch(0.872 0.054 250);\n    --bs-color-info-300: oklch(0.802 0.082 250);\n    --bs-color-info-400: oklch(0.718 0.11 250);\n    --bs-color-info-500: oklch(0.6 0.125 250);\n    --bs-color-info-600: oklch(0.505 0.125 250);\n    --bs-color-info-700: oklch(0.432 0.112 250);\n    --bs-color-info-800: oklch(0.364 0.092 250);\n    --bs-color-info-900: oklch(0.3 0.072 250);\n    --bs-color-info-950: oklch(0.232 0.052 250);\n    --bs-color-feicui-50: oklch(0.969 0.023 161.8);\n    --bs-color-feicui-100: oklch(0.922 0.053 162.4);\n    --bs-color-feicui-200: oklch(0.879 0.084 161.6);\n    --bs-color-feicui-300: oklch(0.821 0.119 158.8);\n    --bs-color-feicui-400: oklch(0.753 0.173 155.2);\n    --bs-color-feicui-500: oklch(0.738 0.191 152.4);\n    --bs-color-feicui-600: oklch(0.710 0.189 151.2);\n    --bs-color-feicui-700: oklch(0.641 0.169 151.5);\n    --bs-color-feicui-800: oklch(0.570 0.150 151.6);\n    --bs-color-feicui-900: oklch(0.417 0.104 153.6);\n    --bs-color-feicui-950: oklch(0.310 0.075 154.0);\n    --bs-color-jilan-50: oklch(0.959 0.019 260.2);\n    --bs-color-jilan-100: oklch(0.903 0.046 256.5);\n    --bs-color-jilan-200: oklch(0.824 0.084 262.4);\n    --bs-color-jilan-300: oklch(0.752 0.120 262.4);\n    --bs-color-jilan-400: oklch(0.689 0.151 258.1);\n    --bs-color-jilan-500: oklch(0.648 0.190 256.7);\n    --bs-color-jilan-600: oklch(0.605 0.190 257.1);\n    --bs-color-jilan-700: oklch(0.555 0.179 257.6);\n    --bs-color-jilan-800: oklch(0.450 0.127 254.4);\n    --bs-color-jilan-900: oklch(0.360 0.105 256.8);\n    --bs-color-jilan-950: oklch(0.270 0.080 257.0);\n    --bs-color-qingjin-50: oklch(0.957 0.016 262.8);\n    --bs-color-qingjin-100: oklch(0.883 0.046 263.7);\n    --bs-color-qingjin-200: oklch(0.809 0.078 262.9);\n    --bs-color-qingjin-300: oklch(0.757 0.100 263.2);\n    --bs-color-qingjin-400: oklch(0.615 0.168 262.0);\n    --bs-color-qingjin-500: oklch(0.536 0.181 260.3);\n    --bs-color-qingjin-600: oklch(0.492 0.217 261.4);\n    --bs-color-qingjin-700: oklch(0.440 0.193 261.2);\n    --bs-color-qingjin-800: oklch(0.384 0.163 260.7);\n    --bs-color-qingjin-900: oklch(0.299 0.110 258.3);\n    --bs-color-qingjin-950: oklch(0.220 0.082 258.5);\n    --bs-space-1: 0.25rem;\n    --bs-space-2: 0.5rem;\n    --bs-space-3: 0.75rem;\n    --bs-space-4: 1rem;\n    --bs-space-5: 1.25rem;\n    --bs-space-6: 1.5rem;\n    --bs-space-7: 1.75rem;\n    --bs-space-8: 2rem;\n    --bs-space-10: 2.5rem;\n    --bs-space-12: 3rem;\n    --bs-space-16: 4rem;\n    --bs-space-20: 5rem;\n    --bs-space-24: 6rem;\n    --bs-radius-none: 0rem;\n    --bs-radius-xs: 0.25rem;\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    --bs-radius-full: 9999px;\n  }\n\n\n  /* Light theme — light as shadow, the paper-and-ink register: hierarchy reads through\n     the paper ladder (the ground sits in ambient shade, raised surfaces catch\n     the light), hairline borders, and restrained cast shadows in warm ink.\n     Controls stay crisp — a paper-white surface, one hairline, and shadow-xs.\n     Primary defaults to ink so the interface stays monochrome and solemn; the\n     pigment accents (qinghua, celadon, zhusha) live in accent.css. */\n\n  :root,\n  :host,\n  [data-theme=\"light\"],\n  :host([data-theme=\"light\"]) {\n    color-scheme: light;\n\n    /* Surfaces: the ground rests in ambient shade; raised surfaces catch the\n       light. Warm paper whites throughout — pure #ffffff never appears, it\n       would read clinical against the ink. */\n    --bs-color-surface-0: var(--bs-color-gray-50);\n    /* The page paper itself — the alias floating bodies read, mirroring\n       --bs-color-surface-inverse below. */\n    --bs-color-surface: var(--bs-color-surface-0);\n    --bs-color-surface-1: var(--bs-color-gray-25);\n    --bs-color-surface-2: oklch(0.988 0.004 95);\n    --bs-color-surface-3: oklch(0.988 0.004 95);\n    --bs-color-surface-4: oklch(0.988 0.004 95);\n    --bs-color-surface-5: oklch(0.988 0.004 95);\n    --bs-color-surface-inset: var(--bs-color-gray-100);\n    /* The inverted surface — ink on paper — hosts floating labels like\n       tooltips that must read against the page, never blend into it. */\n    --bs-color-surface-inverse: var(--bs-color-gray-800);\n    --bs-color-scrim: oklch(0.15 0.007 76 / 0.4);\n\n    --bs-color-text-primary: var(--bs-color-gray-900);\n    /* The quiet voices still clear AA on the resting paper: secondary at\n       gray-700 and tertiary at gray-600 both hold past 4.5:1 on surface-0,\n       so metadata never trades legibility for hierarchy. */\n    --bs-color-text-secondary: var(--bs-color-gray-700);\n    --bs-color-text-tertiary: var(--bs-color-gray-600);\n    --bs-color-text-disabled: var(--bs-color-gray-400);\n    --bs-color-text-inverse: var(--bs-color-surface-2);\n    /* Ink over the scrim — the dimmed room behind dialogs and lightboxes.\n       The scrim never lightens with the theme, so neither may the ink on\n       it: this stays paper-bright in both registers, unlike the mirror\n       ink above, which answers the page it floats over. */\n    --bs-color-text-on-scrim: var(--bs-color-surface-2);\n    /* Ink on a solid pigment fill: paper under daylight, kneaded bright\n       under lacquer night (see the dark theme). */\n    --bs-color-ink-on-fill: var(--bs-color-surface-2);\n    --bs-ink-knead: 0%;\n\n    --bs-color-border: var(--bs-color-gray-200);\n    --bs-color-border-strong: var(--bs-color-gray-300);\n\n    /* Focus is a halo of light: a crisp inner line inside a soft, wide\n       glow. Every default scene carries it, text inputs included. The\n       inset variant serves parts flush against a container edge, where\n       an outer halo would spill past it. */\n    --bs-color-focus: var(--bs-color-primary);\n    /* The hairline a focused control wears. A scene that borrows another\n       system's focus language re-points it — Fluent keeps the edge neutral\n       and lets the underline speak. */\n    --bs-focus-edge: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 20%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary is ink by default — solemn, unhurried, industry-neutral. The\n       hover deepens the ink into the paper; the pigment accents override the\n       whole block (see accent.css). */\n    --bs-color-primary: var(--bs-color-gray-800);\n    --bs-color-primary-hover: var(--bs-color-gray-900);\n    --bs-color-primary-active: var(--bs-color-gray-925);\n    --bs-color-primary-text: var(--bs-color-surface-2);\n    /* The solid-fill body: pigments rest at full strength on paper — night\n       kneads them (see the dark theme), daylight does not. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: var(--bs-color-gray-100);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-800);\n    --bs-color-primary-border: var(--bs-color-gray-300);\n\n    /* Fixed semantic pigments — bamboo, ochre, cinnabar, ultramarine. They do\n       not follow the accent theme: an error is always cinnabar-red, a warning\n       always ochre, whatever pigment the brand rides. */\n    --bs-color-success: var(--bs-color-success-600);\n    --bs-color-success-hover: var(--bs-color-success-700);\n    --bs-color-success-subtle: var(--bs-color-success-100);\n    --bs-color-success-subtle-text: var(--bs-color-success-800);\n\n    --bs-color-warning: var(--bs-color-warning-600);\n    --bs-color-warning-hover: var(--bs-color-warning-700);\n    --bs-color-warning-subtle: var(--bs-color-warning-100);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-800);\n\n    --bs-color-danger: var(--bs-color-danger-600);\n    --bs-color-danger-hover: var(--bs-color-danger-700);\n    --bs-color-danger-subtle: var(--bs-color-danger-100);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-800);\n\n    --bs-color-info: var(--bs-color-info-600);\n    --bs-color-info-hover: var(--bs-color-info-700);\n    --bs-color-info-subtle: var(--bs-color-info-100);\n    --bs-color-info-subtle-text: var(--bs-color-info-800);\n\n    /* Syntax inks label grammar, never state: a red tag in code is a tag,\n       not an error, so the code colours are their own print palette —\n       kept apart from the semantic pigments above on purpose. */\n    --bs-color-syntax-string: oklch(0.42 0.1 300);\n    --bs-color-syntax-literal: oklch(0.48 0.09 65);\n    --bs-color-syntax-tag: oklch(0.45 0.07 160);\n    --bs-color-syntax-function: oklch(0.42 0.09 255);\n\n    /* Lighting — elevation shadows are computed, never copy-pasted. Every\n       shadow draws its ink from --bs-shadow-ink, this theme's warm shadow hue,\n       shifts with --bs-light-x/-y (where the key light stands), and spreads\n       with --bs-light-reach (how high the surface floats). Custom properties\n       resolve their own var() references at the declaring element, so these\n       composite tokens always carry theme ink; a colored surface that casts in\n       its own color composes its shadow inline from these parts mixed with its\n       tint — see the dialog trigger. Restraint ladder: controls carry only\n       shadow-xs; cards rise on elevation-1/2; menus and popovers separate on\n       elevation-3; dialogs own elevation-4/5. */\n    --bs-shadow-ink: oklch(0.3 0.02 80);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    /* Weighted hairlines: the 1px edge everything rides, and the 3px\n       status edge an alert earns. */\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 5%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent);\n    --bs-elevation-2:\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 6%, transparent),\n      var(--bs-light-x) calc(3px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 9%, transparent);\n    --bs-elevation-3:\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent),\n      var(--bs-light-x) calc(5px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent);\n    --bs-elevation-4:\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(28px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent),\n      var(--bs-light-x) calc(28px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(56px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent);\n    --bs-elevation-5:\n      var(--bs-light-x) calc(6px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(16px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(40px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-16px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent);\n  }\n\n\n  /* Dark theme — lacquer night: the room dims into warm lacquer black,\n     and text turns to paper. Surfaces still brighten as they rise (e0 darkest\n     → e5 lightest) — at night the ladder of light, not the cast shadow, does\n     the separating. Primary inverts: paper-white buttons set ink on fire\n     gently against the dark. */\n\n  [data-theme=\"dark\"],\n  :host([data-theme=\"dark\"]) {\n    color-scheme: dark;\n\n    /* Lacquer surfaces: warm black at every step, never pure #000. */\n    --bs-color-surface-0: oklch(0.165 0.008 75);\n    /* The page paper itself — the alias floating bodies read, mirroring\n       --bs-color-surface-inverse below. */\n    --bs-color-surface: var(--bs-color-surface-0);\n    --bs-color-surface-1: oklch(0.205 0.009 75);\n    --bs-color-surface-2: oklch(0.245 0.01 76);\n    --bs-color-surface-3: oklch(0.272 0.01 76);\n    --bs-color-surface-4: oklch(0.29 0.01 76);\n    --bs-color-surface-5: oklch(0.31 0.01 76);\n    --bs-color-surface-inset: oklch(0.135 0.007 75);\n    /* The inverted surface — paper on lacquer — hosts floating labels like\n       tooltips; at night the inversion reads as a slip of bright paper. */\n    --bs-color-surface-inverse: var(--bs-color-gray-100);\n    --bs-color-scrim: oklch(0.05 0.01 75 / 0.6);\n\n    --bs-color-text-primary: oklch(0.925 0.006 90);\n    --bs-color-text-secondary: var(--bs-color-gray-300);\n    --bs-color-text-tertiary: var(--bs-color-gray-400);\n    --bs-color-text-disabled: var(--bs-color-gray-500);\n    --bs-color-text-inverse: var(--bs-color-gray-900);\n    /* Ink over the scrim — the dimmed room behind dialogs and lightboxes.\n       The scrim never lightens with the theme, so neither may the ink on\n       it: this stays paper-bright in both registers, unlike the mirror\n       ink above, which answers the page it floats over. */\n    --bs-color-text-on-scrim: var(--bs-color-gray-100);\n    /* Ink on a solid pigment fill: pigments knead a fifth of ink into their\n       bodies at night (a mid-tone fill carries neither deep nor pale text\n       past 4.5:1), so the ink turns bright paper. */\n    --bs-color-ink-on-fill: var(--bs-color-gray-25);\n    --bs-ink-knead: 20%;\n\n    --bs-color-border: oklch(0.31 0.01 78);\n    --bs-color-border-strong: oklch(0.4 0.012 78);\n\n    /* The halo reads brighter at night, like any light source does. */\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-edge: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 26%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary inverts to paper — ink set down on lacquer. */\n    --bs-color-primary: oklch(0.93 0.007 90);\n    --bs-color-primary-hover: var(--bs-color-gray-200);\n    --bs-color-primary-active: var(--bs-color-gray-300);\n    --bs-color-primary-text: var(--bs-color-gray-900);\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 10%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-200);\n    --bs-color-primary-border: var(--bs-color-gray-700);\n\n    /* Semantic pigments lift to their lighter steps at night; the fixed hue\n       relationships (bamboo / ochre / cinnabar / ultramarine) never change. */\n    --bs-color-success: var(--bs-color-success-500);\n    --bs-color-success-hover: var(--bs-color-success-400);\n    --bs-color-success-subtle: color-mix(in oklab, var(--bs-color-success) 16%, transparent);\n    --bs-color-success-subtle-text: var(--bs-color-success-300);\n\n    --bs-color-warning: var(--bs-color-warning-500);\n    --bs-color-warning-hover: var(--bs-color-warning-400);\n    --bs-color-warning-subtle: color-mix(in oklab, var(--bs-color-warning) 16%, transparent);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-300);\n\n    --bs-color-danger: var(--bs-color-danger-500);\n    --bs-color-danger-hover: var(--bs-color-danger-400);\n    --bs-color-danger-subtle: color-mix(in oklab, var(--bs-color-danger) 16%, transparent);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-300);\n\n    --bs-color-info: var(--bs-color-info-500);\n    --bs-color-info-hover: var(--bs-color-info-400);\n    --bs-color-info-subtle: color-mix(in oklab, var(--bs-color-info) 16%, transparent);\n    --bs-color-info-subtle-text: var(--bs-color-info-300);\n\n    /* Syntax inks at night: same print palette as light, lifted to the\n       lighter steps so grammar keeps its colour relations on dark paper. */\n    --bs-color-syntax-string: oklch(0.75 0.09 300);\n    --bs-color-syntax-literal: oklch(0.78 0.08 70);\n    --bs-color-syntax-tag: oklch(0.75 0.08 160);\n    --bs-color-syntax-function: oklch(0.75 0.08 255);\n\n    /* Elevation in the dark: cast shadows need far more opacity to read against\n       a dark ground, so every level carries a faint warm hairline of light to\n       cut the raised surface out of the one below it. Same lighting parts as\n       light — ink from --bs-shadow-ink, shifted by --bs-light-x/-y, spread by\n       --bs-light-reach; colored surfaces compose their tint inline. */\n    --bs-shadow-ink: oklch(0.04 0.01 75);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 35%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.04),\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 32%, transparent);\n    --bs-elevation-2:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.05),\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-1px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 36%, transparent);\n    --bs-elevation-3:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.06),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent);\n    --bs-elevation-4:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.07),\n      var(--bs-light-x) calc(8px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(16px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent),\n      var(--bs-light-x) calc(24px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(48px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent);\n    --bs-elevation-5:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.08),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 52%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent);\n  }\n\n\n  /* Accent themes — the pigments. Primary is ink by default (theme-light/dark);\n     switching [data-accent] lays a different mineral pigment under the same\n     interface: qinghua (cobalt, the blue of blue-and-white porcelain), celadon\n     (aquatic green-blue), zhusha (cinnabar, the seal-paste red used sparingly\n     by civic sites for identity — never for errors; danger stays cinnabar-red\n     by way of --bs-color-danger, a separate token). Three borrowed\n     pigments ride along for the registers that speak them: feicui (the\n     jade green of the everyday handheld spec), jilan (the azure of its\n     office sibling) and qingjin (the lapis blue of the metric register).\n     Each accent redefines the primary block and the focus hue; the fixed\n     semantic pigments never follow. */\n\n  [data-accent=\"qinghua\"] {\n    --bs-color-primary: var(--bs-color-brand-600);\n    --bs-color-primary-hover: var(--bs-color-brand-700);\n    --bs-color-primary-active: var(--bs-color-brand-800);\n    /* The fill derives here, not only on :root: custom properties resolve\n       var() at the declaring element, so a fill declared only on :root\n       freezes the ink default and never follows an accent that sits below\n       the root (ConfigProvider). */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-brand-100);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-800);\n    --bs-color-primary-border: var(--bs-color-brand-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"qinghua\"],\n  [data-theme=\"dark\"][data-accent=\"qinghua\"],\n  :host([data-theme=\"dark\"][data-accent=\"qinghua\"]) {\n    --bs-color-primary: var(--bs-color-brand-500);\n    --bs-color-primary-hover: var(--bs-color-brand-600);\n    --bs-color-primary-active: var(--bs-color-brand-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-brand-700);\n    --bs-color-primary-fill-hover: var(--bs-color-brand-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-300);\n    --bs-color-primary-border: var(--bs-color-brand-700);\n  }\n\n  [data-accent=\"celadon\"] {\n    --bs-color-primary: var(--bs-color-celadon-600);\n    --bs-color-primary-hover: var(--bs-color-celadon-700);\n    --bs-color-primary-active: var(--bs-color-celadon-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-celadon-100);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-800);\n    --bs-color-primary-border: var(--bs-color-celadon-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"celadon\"],\n  [data-theme=\"dark\"][data-accent=\"celadon\"],\n  :host([data-theme=\"dark\"][data-accent=\"celadon\"]) {\n    --bs-color-primary: var(--bs-color-celadon-500);\n    --bs-color-primary-hover: var(--bs-color-celadon-600);\n    --bs-color-primary-active: var(--bs-color-celadon-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-celadon-700);\n    --bs-color-primary-fill-hover: var(--bs-color-celadon-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-300);\n    --bs-color-primary-border: var(--bs-color-celadon-700);\n  }\n\n  [data-accent=\"zhusha\"] {\n    --bs-color-primary: var(--bs-color-zhusha-600);\n    --bs-color-primary-hover: var(--bs-color-zhusha-700);\n    --bs-color-primary-active: var(--bs-color-zhusha-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-zhusha-100);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-800);\n    --bs-color-primary-border: var(--bs-color-zhusha-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"zhusha\"],\n  [data-theme=\"dark\"][data-accent=\"zhusha\"],\n  :host([data-theme=\"dark\"][data-accent=\"zhusha\"]) {\n    --bs-color-primary: var(--bs-color-zhusha-500);\n    --bs-color-primary-hover: var(--bs-color-zhusha-600);\n    --bs-color-primary-active: var(--bs-color-zhusha-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-zhusha-700);\n    --bs-color-primary-fill-hover: var(--bs-color-zhusha-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-300);\n    --bs-color-primary-border: var(--bs-color-zhusha-700);\n  }\n\n  [data-accent=\"feicui\"] {\n    --bs-color-primary: var(--bs-color-feicui-600);\n    --bs-color-primary-hover: var(--bs-color-feicui-700);\n    --bs-color-primary-active: var(--bs-color-feicui-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-feicui-100);\n    --bs-color-primary-subtle-text: var(--bs-color-feicui-800);\n    --bs-color-primary-border: var(--bs-color-feicui-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"feicui\"],\n  [data-theme=\"dark\"][data-accent=\"feicui\"],\n  :host([data-theme=\"dark\"][data-accent=\"feicui\"]) {\n    --bs-color-primary: var(--bs-color-feicui-500);\n    --bs-color-primary-hover: var(--bs-color-feicui-600);\n    --bs-color-primary-active: var(--bs-color-feicui-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-feicui-700);\n    --bs-color-primary-fill-hover: var(--bs-color-feicui-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-feicui-300);\n    --bs-color-primary-border: var(--bs-color-feicui-700);\n  }\n\n  [data-accent=\"jilan\"] {\n    --bs-color-primary: var(--bs-color-jilan-600);\n    --bs-color-primary-hover: var(--bs-color-jilan-700);\n    --bs-color-primary-active: var(--bs-color-jilan-800);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-jilan-100);\n    --bs-color-primary-subtle-text: var(--bs-color-jilan-800);\n    --bs-color-primary-border: var(--bs-color-jilan-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"jilan\"],\n  [data-theme=\"dark\"][data-accent=\"jilan\"],\n  :host([data-theme=\"dark\"][data-accent=\"jilan\"]) {\n    --bs-color-primary: var(--bs-color-jilan-500);\n    --bs-color-primary-hover: var(--bs-color-jilan-600);\n    --bs-color-primary-active: var(--bs-color-jilan-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-jilan-700);\n    --bs-color-primary-fill-hover: var(--bs-color-jilan-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-jilan-300);\n    --bs-color-primary-border: var(--bs-color-jilan-700);\n  }\n\n  [data-accent=\"qingjin\"] {\n    --bs-color-primary: var(--bs-color-qingjin-600);\n    --bs-color-primary-hover: var(--bs-color-qingjin-400);\n    --bs-color-primary-active: var(--bs-color-qingjin-700);\n    /* See qinghua: the fill must derive at the accent host, not the root. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-qingjin-100);\n    --bs-color-primary-subtle-text: var(--bs-color-qingjin-800);\n    --bs-color-primary-border: var(--bs-color-qingjin-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"qingjin\"],\n  [data-theme=\"dark\"][data-accent=\"qingjin\"],\n  :host([data-theme=\"dark\"][data-accent=\"qingjin\"]) {\n    --bs-color-primary: var(--bs-color-qingjin-500);\n    --bs-color-primary-hover: var(--bs-color-qingjin-400);\n    --bs-color-primary-active: var(--bs-color-qingjin-700);\n    /* Dark retires the mid-tone fill: the solid body drops one step to the\n       full-chroma 700 (hover 800) — deep enough for bright paper ink past\n       4.5:1 without kneading the pigment toward black. Light fills straight\n       from 600; dark fills straight from 700. */\n    --bs-color-primary-fill: var(--bs-color-qingjin-700);\n    --bs-color-primary-fill-hover: var(--bs-color-qingjin-800);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-qingjin-300);\n    --bs-color-primary-border: var(--bs-color-qingjin-700);\n  }\n\n\n  /* Typography — two tracks: the voice and the chrome. The voice is the song\n     stack (upright, structured strokes — Noto Serif SC falling back through the\n     platform faces); headings and editorial narrative ride it, the way Western\n     systems let a serif carry voice. The chrome is the modern hei stack: the\n     platform UI faces lead so Latin letters and figures hold one rhythm with the\n     CJK around them — a Chinese face reaching Latin first drops its digits onto\n     a taller, heavier cut, and the line reads out of true. The CJK set falls in\n     behind — MiSans and HarmonyOS Sans into PingFang / YaHei. Sizes are fixed\n     rem values outside the density scale; compact UI may choose\n     --bs-font-size-sm but never below it. */\n\n  :root,\n  :host {\n    --bs-font-sans:\n      -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, MiSans, \"HarmonyOS Sans SC\",\n      \"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", sans-serif;\n    --bs-font-serif:\n      \"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", SimSun, \"Times New Roman\", Georgia, serif;\n    --bs-font-mono:\n      ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", Consolas, \"PingFang SC\", \"Microsoft YaHei\",\n      monospace;\n\n    --bs-font-size-xs: 0.75rem;\n    --bs-font-size-sm: 0.8125rem;\n    --bs-font-size-md: 0.875rem;\n    --bs-font-size-base: 0.9375rem;\n    --bs-font-size-lg: 1.0625rem;\n    --bs-font-size-xl: 1.25rem;\n    --bs-font-size-2xl: 1.5rem;\n    --bs-font-size-3xl: 1.875rem;\n    --bs-font-size-4xl: 2.25rem;\n\n    /* The stroke icons are drawn with: one width, tuned to sit beside the\n       hairline instead of fighting it. */\n    --bs-icon-stroke-width: 1.75;\n\n    --bs-line-height-tight: 1.25;\n    --bs-line-height-snug: 1.375;\n    --bs-line-height-normal: 1.5;\n    --bs-line-height-relaxed: 1.625;\n\n    /* Eyebrow kickers share one tracked voice — the same whisper everywhere\n       an eyebrow announces a section, so no page improvises its own. */\n    --bs-tracking-eyebrow: 0.14em;\n\n    /* Control labels carry a whisper of tracking — upright and unhurried is a\n       property of CJK typesetting, not of any single typeface. */\n    --bs-tracking-label: 0.02em;\n\n    --bs-font-weight-regular: 400;\n    --bs-font-weight-medium: 500;\n    --bs-font-weight-semibold: 600;\n    --bs-font-weight-bold: 700;\n  }\n\n\n  /* Motion — the ink-and-light grammar. Three rules and a floor:\n     Light needs time — shadows transition about 1.5x slower than the property\n     that raised them, so a shadow reads as cast light, not a sticker.\n     Ink bleeds — surfaces enter by fading AND dissolving (blur to sharp),\n     never popping. Puppets have strings — moving parts overshoot on the spring\n     curve, and lists follow one another with a small stagger.\n     Tokens drive all transitions; the reduced-motion block retunes them instead\n     of removing states, so opacity still communicates elevation changes. */\n\n  /* Defaults sit at zero specificity (:where): the motion sheet can appear\n     twice in the compiled bundle — once before and once after scene.css —\n     and a plain :root would tie [data-scene] on specificity and, in that\n     second copy, outrank it by file order, silencing every scene that\n     retunes the curves below. */\n  :where(:root),\n  :where(:host) {\n    /* Durations ride --bs-motion-scale so a scene preset can tune the pace\n       (a snappier instrument, an unhurried civic register) without touching\n       the reduced-motion floor below, which declares 1ms directly. */\n    --bs-duration-instant: calc(80ms * var(--bs-motion-scale, 1));\n    --bs-duration-fast: calc(140ms * var(--bs-motion-scale, 1));\n    --bs-duration-base: calc(200ms * var(--bs-motion-scale, 1));\n    --bs-duration-slow: calc(320ms * var(--bs-motion-scale, 1));\n\n    --bs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n    --bs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n    --bs-ease-in: cubic-bezier(0.7, 0, 0.84, 0);\n    --bs-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);\n\n    /* Stagger step for lists and menus — each follower comes up 24ms after\n       the one before it, like puppets lifted in sequence. */\n    --bs-stagger-step: 24ms;\n\n    /* The press wash (ink-ripple) reads its pigment, reach, curve, and pace\n       from these, so a scene preset can retune the feedback — a smaller,\n       crisper wave in the flat content color for material, or silence for\n       registers that press without a wash — without touching the keyframes\n       in the core. The pigment is an opaque color and --bs-ripple-opacity\n       is the whole concentration — the two never double-deduct. */\n    --bs-ripple-pigment: var(--bs-color-primary);\n    --bs-ripple-opacity: 0.27;\n    --bs-ripple-core: 0%;\n    --bs-ripple-fade: 80%;\n    --bs-ripple-duration: calc(650ms * var(--bs-motion-scale, 1));\n    --bs-ripple-release: calc(320ms * var(--bs-motion-scale, 1));\n    --bs-ripple-ease: var(--bs-ease-out);\n    --bs-ripple-spread: 1;\n  }\n\n  /* Surfaces dissolve in like ink settling into paper: a fade, a soft focus\n     pulling sharp, and a one-percent settle. Panels and menus apply it on\n     their open state; exits stay plain opacity fades — faster, unobtrusive. */\n  @keyframes bs-ink-in {\n    from {\n      opacity: 0;\n      filter: blur(3px);\n      scale: 1.01;\n    }\n    to {\n      opacity: 1;\n      filter: blur(0);\n      scale: 1;\n    }\n  }\n\n  /* Followers rise into place on the string — a short lift with the spring\n     curve. Combine with per-item `animation-delay: calc(var(--bs-i) * var(--bs-stagger-step))`. */\n  @keyframes bs-item-in {\n    from {\n      opacity: 0;\n      translate: 0 4px;\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :root,\n    :host {\n      --bs-duration-instant: 1ms;\n      --bs-duration-fast: 1ms;\n      --bs-duration-base: 1ms;\n      --bs-duration-slow: 1ms;\n      --bs-stagger-step: 0ms;\n    }\n  }\n\n\n  /* Scene presets — one attribute that retunes the temperament of the whole\n     interface. Two families share the same five levers: the audience scenes\n     serve a desk (civic for elders and civic desks, tech for modern\n     efficiency products, enterprise the quiet commercial baseline, studio\n     the literati gathering for design and editorial work), and the style\n     scenes borrow the temperament of the major design languages — named for\n     the open specs and the places their platforms are built, never the\n     companies: cupertino for the soft airy handheld register, expressive\n     for motion-forward spring, fluent for measured productivity depth,\n     material for the elevation-led android-era look, missive and its\n     office sibling dispatch for the familiar handheld registers, metric\n     for the metric productivity register.\n\n     A scene moves only what the paper allows: shape (radius), density, motion\n     pace and its curves, where the key light stands and how far it reaches,\n     and how the press wash spreads. A style scene follows the register it\n     borrows whole — so it may also re-point the focus tokens, speaking\n     focus in the register's own dialect instead of the house halo — and it\n     may retint the paper itself (the surface ladder, light and dark) where\n     the borrowed register demands its own stock, and let the type follow\n     the register's voice — the one font move allowed is the platform's own\n     stack, which is what the register would speak in anyway. No scene\n     touches interaction logic or the semantic pigments. Each scene pairs\n     with a default accent and (for civic) the high-contrast tier; those\n     pairings are applied by the theme engine as plain data attributes, so\n     the accent and contrast rules — including their dark variants — carry\n     them unchanged.\n\n     Explicit attributes always outrank the scene's bundled defaults: a\n     `[data-accent]`, `[data-contrast]`, or `[data-density]` set alongside\n     `[data-scene]` wins by cascade order. Note `:root` ties `[data-scene]` in\n     specificity (both 0,1,0), so this file must sit after every stylesheet\n     that declares these variables on `:root` (themes, primitives via accent's\n     placement) and before density.css, whose explicit tiers must win over\n     scene defaults. */\n\n  [data-scene=\"civic\"] {\n    /* 典章 — for elders and civic desks: the square-cut register of official\n       documents. Corners go true square (a seal is not round), targets grow\n       to the spacious ladder (48px controls), the pace slows so states are\n       never missed, and the light stays flat so nothing hides in a shadow. */\n    --bs-radius-sm: 0rem;\n    --bs-radius-md: 0.125rem;\n    --bs-radius-lg: 0.25rem;\n    --bs-radius-xl: 0.375rem;\n    --bs-radius-2xl: 0.5rem;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n    --bs-density-scale: 1.5;\n    --bs-motion-scale: 1.25;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.7;\n  }\n\n  [data-scene=\"enterprise\"] {\n    /* 信笺 — the measured commercial baseline: default geometry at a calmer\n       light, so long working sessions read quiet and the hairlines do the\n       talking. */\n    --bs-density-scale: 1;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.85;\n  }\n\n  [data-scene=\"studio\"] {\n    /* 雅集 — the literati gathering for design and editorial work: controls\n       keep the 6px seal edge, vessels round out generously, whitespace\n       breathes, and the light comes from the upper left, casting each\n       element's shadow gently toward the lower right. */\n    --bs-radius-md: 0.625rem;\n    --bs-radius-lg: 0.875rem;\n    --bs-radius-xl: 1.25rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0.125rem;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.25;\n  }\n\n  [data-scene=\"tech\"] {\n    /* 司南 — the modern precision instrument: near-square corners, dense\n       rows, a snappy pace, and a flat restrained light where hairlines carry\n       all the hierarchy. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n    --bs-density-scale: 0.75;\n    --bs-motion-scale: 0.85;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.5;\n  }\n\n  /* The style scenes — five-lever homages, never clones: no frosted\n     materials, no imported fonts (a scene's voice goes only to the\n     platform's own stack), just the temperament a scene's levers can\n     honestly reach. */\n\n  [data-scene=\"cupertino\"] {\n    /* 圆融 — the soft airy register of handheld design: the capsule is\n       the action signal (every pressable thing rounds full), vessels round out\n       dramatically, targets grow to the 44px touch ladder, and motion\n       glides on the long sheet-spring curve. The interface stays light and\n       airy — separation reads as gentle diffuse depth, not cast shadow,\n       and presses answer through the fill change, never a wash. */\n    --bs-radius-md: 0.75rem;\n    --bs-radius-lg: 1.125rem;\n    --bs-radius-xl: 1.5rem;\n    --bs-radius-2xl: 2.25rem;\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.75rem;\n    --bs-control-height-lg: 3.125rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1.1;\n    --bs-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n    --bs-ease-spring: cubic-bezier(0.34, 1.1, 0.64, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.8;\n    --bs-ripple-opacity: 0;\n    /* Focus speaks the platform dialect: a crisp 2px accent outline\n       pulled inside the control's edge — no halo. */\n    --bs-focus-ring: inset 0 0 0 2px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);\n    /* The handheld register speaks in the system voice: headlines stand\n       down from the serif — everything rides the sans stack — and labels\n       lose their brush tracking. */\n    --bs-font-serif: var(--bs-font-sans);\n    --bs-tracking-label: 0em;\n  }\n\n  /* The borrowed papers. Seven of the style scenes retint the surface\n     ladder toward the register they borrow from — cupertino's clean\n     handheld white, material's neutral violet-gray, sketch's warm\n     sketchbook stock, and the neutral grounds the missive family and\n     the metric register speak against — while the paper-and-ink scenes keep\n     the house stock. Custom properties on the root resolve per theme\n     attribute, so each paper carries a light and a dark face. */\n  [data-scene=\"cupertino\"] {\n    --bs-color-surface-0: oklch(0.962 0.004 265);\n    --bs-color-surface-1: oklch(0.981 0.001 265);\n    --bs-color-surface-2: oklch(1 0 0);\n    --bs-color-surface-3: oklch(1 0 0);\n    --bs-color-surface-4: oklch(1 0 0);\n    --bs-color-surface-5: oklch(1 0 0);\n    --bs-color-text-primary: oklch(0.208 0 0);\n    --bs-color-text-secondary: oklch(0.628 0.008 265);\n    --bs-color-text-tertiary: oklch(0.76 0.006 265);\n    --bs-color-text-disabled: oklch(0.83 0.005 265);\n    --bs-color-border: oklch(0.85 0.005 265);\n    --bs-color-border-strong: oklch(0.79 0.006 265);\n    --bs-color-scrim: oklch(0 0 0 / 0.4);\n    --bs-shadow-ink: oklch(0.25 0.01 265);\n  }\n\n  [data-scene=\"cupertino\"][data-theme=\"dark\"],\n  [data-scene=\"cupertino\"]:not([data-theme]):where([data-theme=\"dark\"] *) {\n    --bs-color-surface-0: oklch(0.18 0.004 265);\n    --bs-color-surface-1: oklch(0.216 0.004 265);\n    --bs-color-surface-2: oklch(0.245 0.004 265);\n    --bs-color-surface-3: oklch(0.272 0.004 265);\n    --bs-color-surface-4: oklch(0.29 0.004 265);\n    --bs-color-surface-5: oklch(0.31 0.004 265);\n    --bs-color-text-primary: oklch(1 0 0);\n    --bs-color-text-secondary: oklch(0.68 0.006 265);\n    --bs-color-text-tertiary: oklch(0.55 0.005 265);\n    --bs-color-text-disabled: oklch(0.4 0.004 265);\n    --bs-color-border: oklch(0.31 0.005 265);\n    --bs-color-border-strong: oklch(0.38 0.006 265);\n    --bs-color-scrim: oklch(0 0 0 / 0.5);\n  }\n\n  [data-scene=\"expressive\"] {\n    /* 飞白 — the motion-forward register, the dry brush that races ahead\n       of the ink. Generous rounding, a quick pace, and curves that overshoot\n       on the spring — the interface answers like an instrument, not a\n       form — under a warm key light from above. Focus speaks the\n       register's dialect: the solid pigment outline. */\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    /* Every press is a pill in the expressive register, on the 32/40/48\n       container ladder. */\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.5rem;\n    --bs-control-height-lg: 3rem;\n    --bs-motion-scale: 0.8;\n    --bs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n    --bs-ease-spring: cubic-bezier(0.34, 1.56, 0.5, 1);\n    --bs-light-x: 0.1875rem;\n    --bs-light-y: 0.1875rem;\n    --bs-light-reach: 1;\n    --bs-focus-ring: 0 0 0 3px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 3px var(--bs-color-focus);\n  }\n\n  [data-scene=\"fluent\"] {\n    /* 流水 — the measured productivity register, 行云流水: the corner\n       ladder runs 2/4/8/12 (shapes under 32px round to 2, controls 4,\n       vessels 8, sheets 12), measured rows on the 24/32/40 control ladder,\n       a brisk pace on the decelerate and standard curves, and a soft key\n       light from straight above whose shadows fall close to the element —\n       depth as quiet layering, no ripple. The paper goes neutral, both\n       faces, the register's own calm gray. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n    --bs-density-scale: 0.9;\n    --bs-motion-scale: 0.85;\n    --bs-ease-out: cubic-bezier(0.1, 0.9, 0.2, 1);\n    --bs-ease-in-out: cubic-bezier(0.33, 0, 0.67, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 0.7;\n    --bs-ripple-opacity: 0;\n    /* Focus speaks the register's dialect: the edge stays neutral while a\n       2px brand underline carries the state — structure, not glow. */\n    --bs-focus-edge: var(--bs-color-border);\n    --bs-focus-ring: inset 0 -2px 0 0 var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 -2px 0 0 var(--bs-color-focus);\n  }\n\n  /* The layers: light sits on the calm gray ground with layered whites\n     rising above it; dark climbs through three gray steps. Chroma zero —\n     this register keeps no pigment in its paper. */\n  [data-scene=\"fluent\"] {\n    --bs-color-surface-0: oklch(0.972 0 0);\n    --bs-color-surface-1: oklch(0.982 0 0);\n    --bs-color-surface-2: oklch(1 0 0);\n    --bs-color-surface-3: oklch(1 0 0);\n    --bs-color-surface-4: oklch(1 0 0);\n    --bs-color-surface-5: oklch(1 0 0);\n    --bs-color-text-primary: oklch(0.226 0 0);\n    --bs-color-text-secondary: oklch(0.452 0 0);\n    --bs-color-text-tertiary: oklch(0.634 0 0);\n    --bs-color-text-disabled: oklch(0.75 0 0);\n    --bs-color-border: oklch(0.925 0 0);\n    --bs-color-border-strong: oklch(0.865 0 0);\n    --bs-color-scrim: oklch(0 0 0 / 0.4);\n    --bs-shadow-ink: oklch(0.25 0 0);\n  }\n\n  [data-scene=\"fluent\"][data-theme=\"dark\"],\n  [data-scene=\"fluent\"]:not([data-theme]):where([data-theme=\"dark\"] *) {\n    --bs-color-surface-0: oklch(0.27 0 0);\n    --bs-color-surface-1: oklch(0.3 0 0);\n    --bs-color-surface-2: oklch(0.33 0 0);\n    --bs-color-surface-3: oklch(0.36 0 0);\n    --bs-color-surface-4: oklch(0.39 0 0);\n    --bs-color-surface-5: oklch(0.42 0 0);\n    --bs-color-text-primary: oklch(1 0 0);\n    --bs-color-text-secondary: oklch(0.822 0 0);\n    --bs-color-text-tertiary: oklch(0.68 0 0);\n    --bs-color-text-disabled: oklch(0.5 0 0);\n    --bs-color-border: oklch(0.33 0 0);\n    --bs-color-border-strong: oklch(0.4 0 0);\n    --bs-color-scrim: oklch(0 0 0 / 0.5);\n  }\n\n  [data-scene=\"material\"] {\n    /* 格物 — the elevation-led register, 格物致知: the shape ladder of\n       4px small, 8px medium, 12px medium-large vessels, 16px large,\n       28px extra-large — with pill presses on the 32 / 40 / 48 container\n       ladder (the touch minimum the register is built\n       around), the emphasized curves, and the signature that gives the\n       look its name: the key light stands directly overhead, so every\n       raised surface casts a soft shadow straight down a tall ladder.\n       Presses answer with the water ripple — a crisp solid wave that\n       holds while the finger holds, then leaves quickly. */\n    --bs-radius-sm: 0.25rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-radius-control: var(--bs-radius-full);\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.5rem;\n    --bs-control-height-lg: 3rem;\n    --bs-motion-scale: 0.9;\n    --bs-ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);\n    --bs-ease-in-out: cubic-bezier(0.2, 0, 0, 1);\n    --bs-light-x: 0px;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.5;\n    /* Focus speaks the register's dialect: a solid pigment outline riding\n       just outside the part — no glow. */\n    --bs-focus-ring: 0 0 0 3px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 3px var(--bs-color-focus);\n    --bs-ripple-pigment: var(--bs-color-text-primary);\n    --bs-ripple-opacity: 0.12;\n    --bs-ripple-core: 97%;\n    --bs-ripple-fade: 100%;\n    --bs-ripple-duration: calc(450ms * var(--bs-motion-scale, 1));\n    --bs-ripple-release: calc(300ms * var(--bs-motion-scale, 1));\n    --bs-ripple-ease: cubic-bezier(0.2, 0, 0, 1);\n    --bs-ripple-spread: 0.8;\n  }\n\n  /* The surface: neutral, tinted faintly violet instead of the house's\n     warm paper — the elevation-led register reads against cooler ground. */\n  [data-scene=\"material\"] {\n    --bs-color-surface-0: oklch(0.968 0.011 315);\n    --bs-color-surface-1: oklch(0.976 0.009 318);\n    --bs-color-surface-2: oklch(0.983 0.007 320);\n    --bs-color-surface-3: oklch(0.983 0.007 320);\n    --bs-color-surface-4: oklch(0.983 0.007 320);\n    --bs-color-surface-5: oklch(0.983 0.007 320);\n    --bs-color-text-primary: oklch(0.245 0.008 312);\n    --bs-color-text-secondary: oklch(0.373 0.012 310);\n    --bs-color-text-tertiary: oklch(0.58 0.02 305);\n    --bs-color-text-disabled: oklch(0.8 0.015 310);\n    --bs-color-border: oklch(0.87 0.017 315);\n    --bs-color-border-strong: oklch(0.7 0.02 310);\n    --bs-color-scrim: oklch(0 0 0 / 0.4);\n    --bs-shadow-ink: oklch(0.25 0.015 310);\n  }\n\n  [data-scene=\"material\"][data-theme=\"dark\"],\n  [data-scene=\"material\"]:not([data-theme]):where([data-theme=\"dark\"] *) {\n    --bs-color-surface-0: oklch(0.16 0.008 320);\n    --bs-color-surface-1: oklch(0.185 0.008 320);\n    --bs-color-surface-2: oklch(0.22 0.009 315);\n    --bs-color-surface-3: oklch(0.26 0.009 315);\n    --bs-color-surface-4: oklch(0.29 0.009 315);\n    --bs-color-surface-5: oklch(0.32 0.009 315);\n    --bs-color-text-primary: oklch(0.91 0.01 315);\n    --bs-color-text-secondary: oklch(0.87 0.017 315);\n    --bs-color-text-tertiary: oklch(0.66 0.015 310);\n    --bs-color-text-disabled: oklch(0.45 0.01 310);\n    --bs-color-border: oklch(0.37 0.012 310);\n    --bs-color-border-strong: oklch(0.5 0.015 308);\n    --bs-color-scrim: oklch(0 0 0 / 0.5);\n  }\n\n  [data-scene=\"sketch\"] {\n    /* 写意 — the hand-drawn register, 不求形似求神韵: the loose brush of\n       sketchbooks and comics. No frame stays straight — every radius is an\n       uneven four-corner oval (the asymmetric slash syntax of a drawn\n       box), the fully-round tokens wobble too, moving parts bounce hard on\n       the spring, whitespace loosens, and the light sits off-axis like a\n       sticker's cast shadow. This block is the first of four wobble sets —\n       the other three follow, rotated by sibling position so no two\n       elements sway alike. */\n    --bs-radius-xs: 0.3rem 0.5rem 0.4rem 0.55rem / 0.5rem 0.35rem 0.55rem 0.4rem;\n    --bs-radius-sm: 0.5rem 0.9rem 0.625rem 0.8rem / 0.8rem 0.55rem 0.9rem 0.625rem;\n    --bs-radius-md: 0.625rem 1.125rem 0.75rem 1rem / 1rem 0.625rem 1.125rem 0.75rem;\n    --bs-radius-lg: 1rem 1.625rem 1.25rem 1.875rem / 1.625rem 1rem 1.875rem 1.25rem;\n    --bs-radius-xl: 1.5rem 2.25rem 1.75rem 2.5rem / 2.25rem 1.5rem 2.5rem 1.75rem;\n    --bs-radius-2xl: 2rem 2.875rem 2.375rem 3rem / 2.875rem 2rem 3rem 2.375rem;\n    --bs-radius-full: 1.25rem 1.75rem 1.5rem 1.875rem / 1.75rem 1.25rem 1.875rem 1.5rem;\n    --bs-density-scale: 1.15;\n    --bs-motion-scale: 0.9;\n    --bs-ease-spring: cubic-bezier(0.34, 1.66, 0.64, 1);\n    --bs-stagger-step: 40ms;\n    --bs-light-x: 0.1875rem;\n    --bs-light-y: 0.1875rem;\n    --bs-light-reach: 0.85;\n    --bs-ripple-opacity: 0.18;\n    --bs-ripple-duration: calc(450ms * var(--bs-motion-scale, 1));\n  }\n\n  /* The sketchbook stock: warmer and yellower than the house paper — the\n     slightly grubby cream of a well-used drawing pad, night bleeding\n     warmer still. */\n  [data-scene=\"sketch\"] {\n    --bs-color-surface-0: oklch(0.958 0.014 92);\n    --bs-color-surface-1: oklch(0.972 0.013 93);\n    --bs-color-surface-2: oklch(0.982 0.012 95);\n    --bs-color-surface-3: oklch(0.982 0.012 95);\n    --bs-color-surface-4: oklch(0.982 0.012 95);\n    --bs-color-surface-5: oklch(0.982 0.012 95);\n  }\n\n  [data-scene=\"sketch\"][data-theme=\"dark\"],\n  [data-scene=\"sketch\"]:not([data-theme]):where([data-theme=\"dark\"] *) {\n    --bs-color-surface-0: oklch(0.165 0.012 85);\n    --bs-color-surface-1: oklch(0.205 0.013 85);\n    --bs-color-surface-2: oklch(0.245 0.014 85);\n    --bs-color-surface-3: oklch(0.272 0.014 85);\n    --bs-color-surface-4: oklch(0.29 0.014 85);\n    --bs-color-surface-5: oklch(0.31 0.014 85);\n  }\n\n  /* The three sibling sets. CSS has no random, but an element's seat among\n     its siblings is a good enough dice roll: the same layout never repeats\n     the same sway, while any one element stays put — the frame is drawn\n     once, then holds. */\n  [data-scene=\"sketch\"] :nth-child(4n + 2) {\n    --bs-radius-xs: 0.5rem 0.35rem 0.45rem 0.55rem / 0.4rem 0.55rem 0.35rem 0.5rem;\n    --bs-radius-sm: 0.85rem 0.6rem 0.95rem 0.7rem / 0.6rem 0.9rem 0.7rem 0.95rem;\n    --bs-radius-md: 1.05rem 0.7rem 1.2rem 0.8rem / 0.7rem 1.15rem 0.8rem 1.2rem;\n    --bs-radius-lg: 1.7rem 1.15rem 1.9rem 1.3rem / 1.15rem 1.8rem 1.3rem 1.95rem;\n    --bs-radius-xl: 2.4rem 1.65rem 2.6rem 1.8rem / 1.65rem 2.55rem 1.8rem 2.6rem;\n    --bs-radius-2xl: 3.05rem 2.1rem 3.25rem 2.2rem / 2.1rem 3.15rem 2.2rem 3.3rem;\n    --bs-radius-full: 1.65rem 1.3rem 1.8rem 1.35rem / 1.3rem 1.7rem 1.35rem 1.85rem;\n  }\n\n  [data-scene=\"sketch\"] :nth-child(4n + 3) {\n    --bs-radius-xs: 0.45rem 0.3rem 0.55rem 0.4rem / 0.35rem 0.5rem 0.45rem 0.55rem;\n    --bs-radius-sm: 0.7rem 1rem 0.55rem 0.85rem / 0.95rem 0.65rem 0.85rem 0.6rem;\n    --bs-radius-md: 0.85rem 1.25rem 0.7rem 1.1rem / 1.2rem 0.75rem 1.05rem 0.7rem;\n    --bs-radius-lg: 1.35rem 1.95rem 1.1rem 1.7rem / 1.9rem 1.2rem 1.75rem 1.15rem;\n    --bs-radius-xl: 2rem 2.8rem 1.7rem 2.5rem / 2.75rem 1.8rem 2.5rem 1.7rem;\n    --bs-radius-2xl: 2.7rem 3.6rem 2.3rem 3.3rem / 3.5rem 2.3rem 3.2rem 2.2rem;\n    --bs-radius-full: 1.4rem 1.9rem 1.3rem 1.75rem / 1.85rem 1.35rem 1.8rem 1.3rem;\n  }\n\n  [data-scene=\"sketch\"] :nth-child(4n) {\n    --bs-radius-xs: 0.35rem 0.55rem 0.3rem 0.5rem / 0.55rem 0.4rem 0.5rem 0.35rem;\n    --bs-radius-sm: 0.6rem 0.8rem 0.5rem 0.9rem / 0.75rem 0.55rem 0.95rem 0.65rem;\n    --bs-radius-md: 0.75rem 1rem 0.6rem 1.15rem / 0.95rem 0.7rem 1.1rem 0.8rem;\n    --bs-radius-lg: 1.2rem 1.6rem 1.05rem 1.8rem / 1.55rem 1.1rem 1.85rem 1.25rem;\n    --bs-radius-xl: 1.8rem 2.4rem 1.6rem 2.6rem / 2.3rem 1.7rem 2.7rem 1.9rem;\n    --bs-radius-2xl: 2.4rem 3.2rem 2.15rem 3.5rem / 3.1rem 2.3rem 3.6rem 2.4rem;\n    --bs-radius-full: 1.35rem 1.8rem 1.25rem 1.7rem / 1.75rem 1.4rem 1.9rem 1.45rem;\n  }\n\n  /* The everyday registers — three papers borrowed whole from the open\n     handheld and productivity specs: missive, the familiar phone\n     register, dispatch its office sibling, and metric, the metric\n     register. */\n\n  [data-scene=\"missive\"] {\n    /* 家书 — the familiar handheld register: corners round soft but never\n       full, targets grow to the touch ladder, the pace eases back so\n       states are never missed, presses answer through the fill change\n       rather than a wash, and focus speaks as a crisp 2px accent line\n       pulled inside the edge. Headlines stand down from the serif — the\n       register speaks in the system voice. */\n    --bs-radius-sm: 0.25rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.25rem;\n    /* The register's own dialect runs deeper than geometry: the ink and\n       the hairlines go neutral graphite, and the control corner settles\n       at 8px — the button edge the spec draws. */\n    --bs-radius-control: 0.5rem;\n    --bs-color-text-primary: oklch(0.218 0 0);\n    --bs-color-text-secondary: oklch(0.556 0 0);\n    --bs-color-text-tertiary: oklch(0.767 0 0);\n    --bs-color-text-disabled: oklch(0.7 0 0);\n    --bs-color-border: oklch(0.922 0 0);\n    --bs-color-border-strong: oklch(0.876 0 0);\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.5rem;\n    --bs-control-height-lg: 3rem;\n    /* The register's own type ramp: 17px carries the body and the button\n       label on a 40px control — small type on this height is what reads\n       plump. 14px serves the quiet steps. */\n    --bs-font-size-sm: 0.875rem;\n    --bs-font-size-md: 1.0625rem;\n    --bs-font-size-base: 1.0625rem;\n    --bs-font-size-lg: 1.25rem;\n    --bs-density-scale: 1.15;\n    --bs-motion-scale: 0.9;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.6;\n    --bs-ripple-opacity: 0;\n    --bs-focus-ring: inset 0 0 0 2px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);\n    --bs-font-serif: var(--bs-font-sans);\n    --bs-tracking-label: 0em;\n  }\n\n  [data-scene=\"dispatch\"] {\n    /* 公牍 — the office sibling: the working desk cuts a harder corner\n       than the handheld (2-4px edges throughout the chrome it borrows),\n       the pigment pairs cobalt instead of green, and the ground cools. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-radius-control: 0.25rem;\n    --bs-color-text-primary: oklch(0.218 0 0);\n    --bs-color-text-secondary: oklch(0.556 0 0);\n    --bs-color-text-tertiary: oklch(0.767 0 0);\n    --bs-color-text-disabled: oklch(0.7 0 0);\n    --bs-color-border: oklch(0.922 0 0);\n    --bs-color-border-strong: oklch(0.876 0 0);\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.5rem;\n    --bs-control-height-lg: 3rem;\n    --bs-font-size-sm: 0.875rem;\n    --bs-font-size-md: 1.0625rem;\n    --bs-font-size-base: 1.0625rem;\n    --bs-font-size-lg: 1.25rem;\n    --bs-density-scale: 1.15;\n    --bs-motion-scale: 0.9;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.6;\n    --bs-ripple-opacity: 0;\n    --bs-focus-ring: inset 0 0 0 2px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);\n    --bs-font-serif: var(--bs-font-sans);\n    --bs-tracking-label: 0em;\n  }\n\n  [data-scene=\"metric\"] {\n    /* 格律 — the metric productivity register: the corner ladder steps in\n       strict meter, controls sit on the compact 24/32/40 ladder, hairlines\n       carry the hierarchy under a flat light, presses answer through fill,\n       and focus rings the edge with a plain 2px outline — no glow. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.1875rem;\n    --bs-radius-lg: 0.375rem;\n    --bs-radius-xl: 0.5625rem;\n    --bs-radius-2xl: 0.75rem;\n    /* The metric dialect: a near-square control edge and a neutral ink\n       stepped like the register's own type ramp. */\n    --bs-radius-control: 0.1875rem;\n    --bs-color-text-primary: oklch(0.205 0 0);\n    --bs-color-text-secondary: oklch(0.53 0 0);\n    --bs-color-text-tertiary: oklch(0.648 0 0);\n    --bs-color-text-disabled: oklch(0.82 0 0);\n    --bs-color-border: oklch(0.933 0 0);\n    --bs-color-border-strong: oklch(0.895 0 0);\n    /* The register pairs its blue one step deeper than the house lapis —\n       the borrowed brand's own working tone. */\n    --bs-color-primary: var(--bs-color-brand-700);\n    --bs-color-primary-hover: var(--bs-color-brand-800);\n    --bs-color-primary-active: var(--bs-color-brand-900);\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n    --bs-density-scale: 0.95;\n    --bs-motion-scale: 0.9;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.55;\n    --bs-ripple-opacity: 0;\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-ring: 0 0 0 2px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 2px var(--bs-color-focus);\n  }\n\n  /* The everyday stocks: missive's pages sit on the deep gray ground\n     with white groups above; dispatch's office paper cools the same\n     ladder and goes true black at night — the register's own stock; the\n     metric register keeps a light cool gray ground and a stepped dark\n     ladder. */\n  [data-scene=\"missive\"] {\n    --bs-color-surface-0: oklch(0.946 0 0);\n    --bs-color-surface-1: oklch(0.976 0 0);\n    --bs-color-surface-2: oklch(1 0 0);\n    --bs-color-surface-3: oklch(1 0 0);\n    --bs-color-surface-4: oklch(1 0 0);\n    --bs-color-surface-5: oklch(1 0 0);\n  }\n\n  [data-scene=\"missive\"][data-theme=\"dark\"],\n  [data-scene=\"missive\"]:not([data-theme]):where([data-theme=\"dark\"] *) {\n    --bs-color-surface-0: oklch(0.178 0 0);\n    --bs-color-surface-1: oklch(0.213 0 0);\n    --bs-color-surface-2: oklch(0.235 0 0);\n    --bs-color-surface-3: oklch(0.244 0 0);\n    --bs-color-surface-4: oklch(0.26 0 0);\n    --bs-color-surface-5: oklch(0.277 0 0);\n    --bs-color-text-primary: oklch(0.876 0 0);\n    --bs-color-text-secondary: oklch(0.64 0 0);\n    --bs-color-text-tertiary: oklch(0.475 0 0);\n    --bs-color-text-disabled: oklch(0.42 0 0);\n    --bs-color-border: oklch(0.348 0 0);\n    --bs-color-border-strong: oklch(0.409 0 0);\n  }\n\n  [data-scene=\"dispatch\"] {\n    --bs-color-surface-0: oklch(0.973 0.002 265);\n    --bs-color-surface-1: oklch(0.976 0 0);\n    --bs-color-surface-2: oklch(1 0 0);\n    --bs-color-surface-3: oklch(1 0 0);\n    --bs-color-surface-4: oklch(1 0 0);\n    --bs-color-surface-5: oklch(1 0 0);\n  }\n\n  [data-scene=\"dispatch\"][data-theme=\"dark\"],\n  [data-scene=\"dispatch\"]:not([data-theme]):where([data-theme=\"dark\"] *) {\n    --bs-color-surface-0: oklch(0 0 0);\n    --bs-color-surface-1: oklch(0.192 0.002 265);\n    --bs-color-surface-2: oklch(0.214 0.002 265);\n    --bs-color-surface-3: oklch(0.235 0 0);\n    --bs-color-surface-4: oklch(0.257 0.002 265);\n    --bs-color-surface-5: oklch(0.277 0.002 265);\n    --bs-color-text-primary: oklch(0.845 0 0);\n    --bs-color-text-secondary: oklch(0.63 0 0);\n    --bs-color-text-tertiary: oklch(0.46 0 0);\n    --bs-color-text-disabled: oklch(0.4 0 0);\n    --bs-color-border: oklch(0.32 0 0);\n    --bs-color-border-strong: oklch(0.38 0 0);\n  }\n\n  [data-scene=\"metric\"] {\n    /* The plain white stock: the borrowed register draws its pages on\n       white and lets the hairlines carry every separation. */\n    --bs-color-surface-0: oklch(1 0 0);\n    --bs-color-surface-1: oklch(1 0 0);\n    --bs-color-surface-2: oklch(1 0 0);\n    --bs-color-surface-3: oklch(1 0 0);\n    --bs-color-surface-4: oklch(1 0 0);\n    --bs-color-surface-5: oklch(1 0 0);\n  }\n\n  [data-scene=\"metric\"][data-theme=\"dark\"],\n  [data-scene=\"metric\"]:not([data-theme]):where([data-theme=\"dark\"] *) {\n    --bs-color-surface-0: oklch(0.209 0 0);\n    --bs-color-surface-1: oklch(0.239 0 0);\n    --bs-color-surface-2: oklch(0.26 0 0);\n    --bs-color-surface-3: oklch(0.293 0 0);\n    --bs-color-surface-4: oklch(0.321 0 0);\n    --bs-color-surface-5: oklch(0.348 0 0);\n    --bs-color-text-primary: oklch(0.925 0 0);\n    --bs-color-text-secondary: oklch(0.65 0 0);\n    --bs-color-text-tertiary: oklch(0.538 0 0);\n    --bs-color-text-disabled: oklch(0.34 0 0);\n    --bs-color-border: oklch(0.375 0 0);\n    --bs-color-border-strong: oklch(0.453 0 0);\n  }\n\n  [data-scene=\"new-york\"] {\n    /* 玄素 — the monochrome developer register: black ink as the only\n       pigment, zinc-gray stock, hairline separation, the near-square\n       corner ladder under a generous 32/36/40 control row, a brisk quiet\n       pace, and focus as the offset ring — a crisp 2px line held clear of\n       the edge by a paper gap. */\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.625rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-radius-control: 0.375rem;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.5rem;\n    --bs-density-scale: 1;\n    --bs-motion-scale: 0.85;\n    --bs-light-x: 0px;\n    --bs-light-y: 0.0625rem;\n    --bs-light-reach: 0.6;\n    --bs-ripple-opacity: 0;\n    /* The register speaks in the system voice: headlines stand down from\n       the serif, labels lose their brush tracking. */\n    --bs-font-serif: var(--bs-font-sans);\n    --bs-tracking-label: 0em;\n    /* Focus speaks the register's dialect: the offset ring. */\n    --bs-focus-ring: 0 0 0 2px var(--bs-color-surface-0), 0 0 0 4px var(--bs-color-focus);\n    --bs-focus-ring-inset: inset 0 0 0 2px color-mix(in oklab, var(--bs-color-focus) 50%, transparent);\n  }\n\n  /* The register's stock: pages drawn on pure white with the zinc grays\n     carrying text and hairline — chroma leans a breath of blue. */\n  [data-scene=\"new-york\"] {\n    --bs-color-surface-0: oklch(1 0 0);\n    --bs-color-surface-1: oklch(1 0 0);\n    --bs-color-surface-2: oklch(1 0 0);\n    --bs-color-surface-3: oklch(1 0 0);\n    --bs-color-surface-4: oklch(1 0 0);\n    --bs-color-surface-5: oklch(1 0 0);\n    --bs-color-text-primary: oklch(0.141 0.005 286);\n    --bs-color-text-secondary: oklch(0.552 0.016 286);\n    --bs-color-text-tertiary: oklch(0.705 0.015 286);\n    --bs-color-text-disabled: oklch(0.79 0.008 286);\n    --bs-color-border: oklch(0.92 0.004 286);\n    --bs-color-border-strong: oklch(0.871 0.006 286);\n    --bs-color-scrim: oklch(0 0 0 / 0.4);\n    --bs-shadow-ink: oklch(0.25 0.005 286);\n    /* The solid action is the register's black block — zinc-900, not the\n       house warm gray. */\n    --bs-color-primary: oklch(0.21 0.006 286);\n    --bs-color-primary-hover: oklch(0.255 0.006 286);\n    --bs-color-primary-active: oklch(0.3 0.007 286);\n  }\n\n  [data-scene=\"new-york\"][data-theme=\"dark\"],\n  [data-scene=\"new-york\"]:not([data-theme]):where([data-theme=\"dark\"] *) {\n    --bs-color-surface-0: oklch(0.145 0.005 286);\n    --bs-color-surface-1: oklch(0.18 0.005 286);\n    --bs-color-surface-2: oklch(0.21 0.006 286);\n    --bs-color-surface-3: oklch(0.24 0.006 286);\n    --bs-color-surface-4: oklch(0.27 0.006 286);\n    --bs-color-surface-5: oklch(0.3 0.007 286);\n    --bs-color-text-primary: oklch(0.985 0 286);\n    --bs-color-text-secondary: oklch(0.65 0.012 286);\n    --bs-color-text-tertiary: oklch(0.55 0.012 286);\n    --bs-color-text-disabled: oklch(0.4 0.008 286);\n    --bs-color-border: oklch(0.274 0.006 286);\n    --bs-color-border-strong: oklch(0.37 0.013 286);\n    --bs-color-scrim: oklch(0 0 0 / 0.5);\n    /* Primary inverts to the zinc paper-white; its ink stays dark. */\n    --bs-color-primary: oklch(0.985 0 0);\n    --bs-color-primary-hover: oklch(0.92 0.004 286);\n    --bs-color-primary-active: oklch(0.871 0.006 286);\n    --bs-color-ink-on-fill: oklch(0.21 0.006 286);\n    --bs-ink-knead: 0%;\n  }\n\n\n  /* Density — decoration compresses, information never does: density scales whitespace and decoration\n     only. Type sizes and contrast stay fixed so compact can never trade away\n     readability. Control heights ride the density directly — a compact\n     workbench and an elder-friendly spacious screen are different products,\n     not the same one nudged by two pixels. */\n\n  /* The default scale sits behind :where() so a scene preset (an attribute,\n     same 0,1,0 as :root) can override it by cascade order, while the explicit\n     [data-density] tiers below still outrank scenes that come before them. */\n  :where(:root),\n  :where(:host) {\n    --bs-density-scale: 1;\n  }\n\n  :root,\n  :host,\n  /* Custom properties resolve their var() references at the declaring\n     element, so these derived tokens must re-declare on any element that\n     carries a density of its own — declared only on :root, they freeze at\n     the root's scale and a provider re-tuning --bs-density-scale on a\n     subtree would move nothing but the control heights. */\n  [data-density],\n  :host([data-density]) {\n    /* Interior control parts (thumbs, knobs, check boxes, close buttons) are\n       decoration riding a control, not the control itself: they scale with\n       density and keep no readable floor, so a compact density actually\n       makes them smaller. */\n    --bs-part-size-sm: calc(1rem * var(--bs-density-scale));\n    --bs-part-size-md: calc(1.25rem * var(--bs-density-scale));\n    --bs-part-size-lg: calc(1.75rem * var(--bs-density-scale));\n\n    /* Density-scaled whitespace. */\n    --bs-padding-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-padding-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-padding-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-padding-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-padding-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-padding-2xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n    /* Both ladders share one ramp mapping — a same-named tier must not be\n       two different sizes depending on which property carries it. */\n    --bs-gap-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-gap-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-gap-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-gap-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-gap-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-gap-2xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n    --bs-margin-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-margin-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-margin-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-margin-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-margin-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-margin-2xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n  }\n\n  /* Control heights per tier — the cross-system ladders (28/32/40 sits at\n     default; compact matches the Fiori/Ant workbench register; spacious\n     reaches the 48px targets elderly-vision research asks for). The base\n     tier sits behind :where() like the scale above, so a scene's bundled\n     ladder overrides it by cascade order while the explicit [data-density]\n     tiers below still outrank both. */\n  :where(:root),\n  :where(:host) {\n    --bs-control-height-sm: 1.75rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n  }\n\n  [data-density=\"compact\"],\n  :host([data-density=\"compact\"]) {\n    --bs-density-scale: 0.75;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n  }\n\n  [data-density=\"comfortable\"],\n  :host([data-density=\"comfortable\"]) {\n    --bs-density-scale: 1.25;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n  }\n\n  [data-density=\"spacious\"],\n  :host([data-density=\"spacious\"]) {\n    --bs-density-scale: 1.5;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n  }\n\n\n  /* Contrast tier — softness comes from light and shadow, never from low contrast: the aesthetic softens through\n     light, never through gray-on-gray. The high tier pulls secondary text and\n     borders up to primary strength and deepens the focus halo; it exists so\n     older and low-vision users get the same design, just louder. Surface\n     steps stay untouched — rows signal hover by one step of shade, and\n     flattening the ladder would silence every hover in the system. */\n\n  [data-contrast=\"high\"],\n  :host([data-contrast=\"high\"]) {\n    --bs-color-text-secondary: var(--bs-color-text-primary);\n    --bs-color-text-tertiary: var(--bs-color-text-secondary);\n    --bs-color-border: var(--bs-color-border-strong);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 34%, transparent);\n  }\n\n  [data-theme=\"light\"][data-contrast=\"high\"],\n  :host([data-theme=\"light\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-400);\n  }\n\n  [data-theme=\"dark\"][data-contrast=\"high\"],\n  :host([data-theme=\"dark\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-500);\n  }\n\n\n  /* Overlay stacking — one shared base for every dismissible layer (dialog,\n     popover, menu, select, …), ordered by zag's --layer-index offset so any\n     nesting combination stacks correctly. Per-component bases are forbidden. */\n  :root,\n  :host {\n    --bs-z-overlay: 1000;\n  }\n}\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/tokens",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Design tokens for By Sages Elements — DTCG source compiled to CSS variables and JavaScript: surface ramps, elevation from light, density tiers, themes",
   "keywords": [
     "css",
@@ -47,7 +47,7 @@
     }
   },
   "devDependencies": {
-    "style-dictionary": "5.5.4"
+    "style-dictionary": "5.5.5"
   },
   "scripts": {
     "build": "node scripts/build.mjs",