@cyberskill/design 2.1.0 → 2.3.0

package/_ds_manifest.json

@@ -3195,7 +3195,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 112,
-      "sourceLine": 71
+      "sourceLine": 70
     },
     {
       "name": "--cs-heading-weight-strong",
@@ -3204,7 +3204,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 113,
-      "sourceLine": 72
+      "sourceLine": 71
     },
     {
       "name": "--cs-heading-weight",
@@ -3213,7 +3213,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 114,
-      "sourceLine": 73
+      "sourceLine": 72
     },
     {
       "name": "--cs-heading-tracking",
@@ -3222,7 +3222,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 115,
-      "sourceLine": 74
+      "sourceLine": 73
     },
     {
       "name": "--cs-icon-sm",
@@ -3231,7 +3231,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 116,
-      "sourceLine": 77
+      "sourceLine": 76
     },
     {
       "name": "--cs-icon-md",
@@ -3240,7 +3240,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 117,
-      "sourceLine": 78
+      "sourceLine": 77
     },
     {
       "name": "--cs-icon-lg",
@@ -3249,7 +3249,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 118,
-      "sourceLine": 79
+      "sourceLine": 78
     },
     {
       "name": "--cs-space-0",
@@ -4479,7 +4479,7 @@
     },
     {
       "name": "--cs-accent-strong",
-      "value": "#916D10",
+      "value": "#916D11",
       "kind": "color",
       "definedIn": "tokens/elements.css",
       "important": false,
@@ -4551,7 +4551,7 @@
     },
     {
       "name": "--cs-accent-grad-b",
-      "value": "#F3B958",
+      "value": "#C4B78F",
       "kind": "color",
       "definedIn": "tokens/elements.css",
       "important": false,
@@ -5750,7 +5750,7 @@
       "scope": ".cs-display-face",
       "important": false,
       "declarationOrder": 1050,
-      "sourceLine": 20
+      "sourceLine": 24
     },
     {
       "name": "--cs-term-border",
@@ -5858,8 +5858,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1063,
-      "sourceLine": 12
+      "declarationOrder": 1066,
+      "sourceLine": 15
     },
     {
       "name": "--cs-glass-whisper-border",
@@ -5867,8 +5867,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1064,
-      "sourceLine": 13
+      "declarationOrder": 1067,
+      "sourceLine": 16
     },
     {
       "name": "--cs-glass-light-bg",
@@ -5876,8 +5876,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1065,
-      "sourceLine": 14
+      "declarationOrder": 1068,
+      "sourceLine": 17
     },
     {
       "name": "--cs-glass-light-border",
@@ -5885,8 +5885,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1066,
-      "sourceLine": 15
+      "declarationOrder": 1069,
+      "sourceLine": 18
     },
     {
       "name": "--cs-glass-standard-bg",
@@ -5894,8 +5894,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1067,
-      "sourceLine": 16
+      "declarationOrder": 1070,
+      "sourceLine": 19
     },
     {
       "name": "--cs-glass-standard-border",
@@ -5903,8 +5903,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1068,
-      "sourceLine": 17
+      "declarationOrder": 1071,
+      "sourceLine": 20
     },
     {
       "name": "--cs-glass-heavy-bg",
@@ -5912,8 +5912,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1069,
-      "sourceLine": 18
+      "declarationOrder": 1072,
+      "sourceLine": 21
     },
     {
       "name": "--cs-glass-heavy-border",
@@ -5921,8 +5921,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1070,
-      "sourceLine": 19
+      "declarationOrder": 1073,
+      "sourceLine": 22
     },
     {
       "name": "--cs-color-border-default",
@@ -5937,7 +5937,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1071,
+      "declarationOrder": 1074,
       "sourceLine": 144
     },
     {
@@ -5953,7 +5953,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1072,
+      "declarationOrder": 1075,
       "sourceLine": 144
     },
     {
@@ -5969,7 +5969,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1073,
+      "declarationOrder": 1076,
       "sourceLine": 145
     },
     {
@@ -5985,7 +5985,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1074,
+      "declarationOrder": 1077,
       "sourceLine": 145
     },
     {
@@ -6001,7 +6001,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1075,
+      "declarationOrder": 1078,
       "sourceLine": 150
     },
     {
@@ -6017,7 +6017,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1076,
+      "declarationOrder": 1079,
       "sourceLine": 150
     }
   ],

package/_esm/cs.mjs

@@ -1,4 +1,4 @@
-// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.1.0).
+// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.3.0).
 // No build step: import this module directly in a browser. It loads the pinned umd-react@19.2.8
 // distribution; its retained React and ReactDOM files report runtime version 19.2.4.
 // (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
@@ -33,7 +33,7 @@ if (!found()) await ensureScript("../_ds_bundle.js");
 export const CS = g[found()];
 if (!CS) throw new Error("cs.js: bundle loaded but no CyberSkillDesignSystem_* namespace found");
 export default CS;
-export const VERSION = "2.1.0";
+export const VERSION = "2.3.0";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;

package/base/collections.css

@@ -27,7 +27,7 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
   .cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
 }
 .cs-item--interactive:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
-.cs-item.is-selected { border-color: var(--cs-color-brand-ochre); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }
+.cs-item.is-selected { border-color: var(--cs-accent); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }
 .cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
 /* Static Item text remains information, rather than an inactive control. */
 div.cs-item.is-disabled { opacity: 1; }
@@ -47,7 +47,7 @@ div.cs-item.is-disabled { opacity: 1; }
 .cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: var(--cs-space-5); position: relative; }
 .cs-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 26px 0; inset-inline-start: 12px; inline-size: 2px; background: var(--cs-color-border-default); }
 .cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg, #fff); font-size: var(--cs-font-size-xs); font-weight: 700; z-index: 1; }
-.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
+.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-accent-on); }
 .cs-timeline__item--todo .cs-timeline__marker { background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); }
 .cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }
 .cs-timeline__meta { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); font-family: var(--cs-font-family-mono); }
@@ -92,7 +92,7 @@ div.cs-item.is-disabled { opacity: 1; }
 
 /* EmptyState */
 .cs-empty { text-align: center; padding: 48px 24px; display: grid; gap: 8px; justify-items: center; }
-.cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-color-brand-ochre) 24%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); margin-block-end: 6px; }
+.cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 24%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); margin-block-end: 6px; }
 .cs-empty__title { font-size: var(--cs-text-h4); font-weight: 700; }
 .cs-empty__body { color: var(--cs-color-text-muted); max-inline-size: 380px; }
 .cs-empty__actions { margin-block-start: 12px; display: flex; gap: 10px; }

package/base/components.css

@@ -38,8 +38,8 @@
 
 .cs-button--secondary {
   background: var(--cs-color-surface-panel, #ffffff);
-  border-color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-brand-ochre));
-  color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-brand-ochre));
+  border-color: var(--_cs-light, var(--cs-accent-strong, #45210e))var(--_cs-dark, var(--cs-accent, #f4ba17));
+  color: var(--_cs-light, var(--cs-color-text-accent, #45210e))var(--_cs-dark, var(--cs-color-text-accent, #f4ba17));
 }
 .cs-button--secondary:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }
 
@@ -129,7 +129,7 @@
 
 /* ---- Dialog ---- */
 .cs-dialog-layer { inset: 0; position: fixed; z-index: var(--cs-depth-modal); }
-.cs-dialog__overlay { background: rgba(31, 19, 11, 0.42); inset: 0; position: absolute; }
+.cs-dialog__overlay { background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); inset: 0; position: absolute; }
 .cs-dialog {
   background: var(--cs-color-surface-panel, #ffffff);
   border-radius: var(--cs-radius-md, 8px);
@@ -190,9 +190,14 @@
 .cs-table-wrap--status { padding: var(--cs-space-4, 16px) 0; }
 .cs-table { border-collapse: collapse; color: var(--cs-color-text-primary, #45210e); inline-size: 100%; }
 .cs-table th, .cs-table td {
-  border-block-end: 1px solid rgba(69, 33, 14, 0.18);
+  border-block-end: 1px solid var(--cs-color-border-subtle, var(--_cs-border-subtle));
   padding: 0.625rem 0.75rem; text-align: start;
 }
+.cs-table th.cs-table__cell--numeric,
+.cs-table td.cs-table__cell--numeric {
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
 .cs-table thead th {
   font-size: var(--cs-font-size-xs, 0.75rem); text-transform: uppercase;
   letter-spacing: var(--cs-letter-spacing-caps, 0.08em); color: var(--cs-color-text-muted, #3f2d21);
@@ -210,7 +215,7 @@
 .cs-ai-disclosure__panel {
   background: var(--cs-color-surface-panel, #ffffff);
   color: var(--cs-color-text-primary, #45210e);
-  border: 1px solid rgba(69, 33, 14, 0.18); border-radius: var(--cs-radius-md, 8px);
+  border: 1px solid var(--cs-color-border-subtle, var(--_cs-border-subtle)); border-radius: var(--cs-radius-md, 8px);
   box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(31, 19, 11, 0.08));
   display: grid; gap: 0.375rem; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0;
   min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: var(--cs-depth-dropdown, 60);

package/base/controls.css

@@ -29,12 +29,12 @@
 .cs-stepper input::-webkit-outer-spin-button, .cs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 
 /* Slider (native range) */
-.cs-slider { inline-size: 100%; accent-color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); block-size: 22px; cursor: pointer; }
+.cs-slider { inline-size: 100%; accent-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); block-size: 22px; cursor: pointer; }
 .cs-slider:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 4px; border-radius: var(--cs-radius-full); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 
 /* FileUpload / dropzone */
 .cs-dropzone { display: grid; gap: 6px; justify-items: center; text-align: center; border: 2px dashed var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 28px 24px; background: var(--cs-color-surface-raised); cursor: pointer; color: var(--cs-color-text-primary); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), background var(--cs-duration-fast) var(--cs-ease-standard); }
-.cs-dropzone:hover, .cs-dropzone.is-dragging { border-color: var(--cs-color-brand-ochre); background: color-mix(in oklab, var(--cs-color-brand-ochre) 8%, var(--cs-color-surface-panel)); }
+.cs-dropzone:hover, .cs-dropzone.is-dragging { border-color: var(--cs-accent); background: color-mix(in oklab, var(--cs-accent) 8%, var(--cs-color-surface-panel)); }
 .cs-dropzone__icon { color: var(--cs-color-text-accent); }
 .cs-dropzone__title { font-weight: 700; }
 .cs-dropzone__hint { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }
@@ -42,7 +42,7 @@
 /* SegmentedControl (matches Status Hub lens switcher) */
 .cs-segmented { display: inline-flex; gap: 4px; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }
 .cs-segmented button { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
-.cs-segmented button[aria-checked="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { background: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); color: var(--_cs-light, var(--cs-color-text-inverse))var(--_cs-dark, var(--cs-color-brand-umber)); }
+.cs-segmented button[aria-checked="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { background: var(--_cs-light, var(--cs-component-button-primary-bg))var(--_cs-dark, var(--cs-component-button-primary-bg)); color: var(--_cs-light, var(--cs-component-button-primary-fg))var(--_cs-dark, var(--cs-component-button-primary-fg)); }
 
 /* StatusIndicator */
 .cs-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; color: var(--cs-color-text-primary); }
@@ -65,7 +65,7 @@
 .cs-toggle:disabled { opacity: .5; cursor: not-allowed; }
 .cs-rating { display: inline-flex; gap: 4px; }
 .cs-rating button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--cs-color-border-default); display: grid; place-items: center; }
-.cs-rating button.on { color: var(--cs-color-brand-ochre); }
+.cs-rating button.on { color: var(--cs-accent); }
 .cs-rating[data-readonly="true"] button { cursor: default; }
 .cs-rating button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-otp { display: inline-flex; gap: 8px; }
@@ -175,7 +175,7 @@
 @keyframes cs-img-shimmer { from { opacity: .55; } to { opacity: .9; } }
 .cs-image.is-zoomable { cursor: zoom-in; }
 .cs-image__fallback { display: grid; place-items: center; min-block-size: 80px; block-size: 100%; color: var(--cs-color-text-muted); }
-.cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .82); display: grid; place-items: center; cursor: zoom-out; }
+.cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 82%, transparent); display: grid; place-items: center; cursor: zoom-out; }
 .cs-image__zoom img { max-inline-size: 88vw; max-block-size: 86vh; border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-xl); }
 .cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; /* on-dark-chrome ink */ font-size: var(--cs-font-size-base); cursor: pointer; }
 .cs-toolbar { display: inline-flex; align-items: center; gap: 4px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 4px; }
@@ -287,8 +287,8 @@
 .cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-colorpicker__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-colorpicker__hex input { inline-size: 110px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px; }
-.cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); }
-.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
+.cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); }
+.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
 .cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 2); inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 14px 16px; }
 .cs-tour__pop b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
 .cs-tour__pop p { margin: 6px 0 12px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-muted); }
@@ -304,7 +304,7 @@
 .cs-splitter__bar { inline-size: 8px; cursor: col-resize; background: var(--cs-color-surface-raised); border-inline: 1px solid var(--cs-color-border-default); touch-action: none; }
 .cs-splitter__bar:hover { background: var(--cs-accent-tint); }
 .cs-splitter__bar:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
-.cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); display: grid; place-items: center; }
+.cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); display: grid; place-items: center; }
 .cs-hotkeys__card { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 18px 20px; min-inline-size: 300px; }
 .cs-hotkeys__card b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
 .cs-hotkeys__card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }

package/base/data.css

@@ -3,8 +3,10 @@
 /* Card */
 .cs-card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); color: var(--cs-color-text-primary); overflow: hidden; }
 .cs-card--flat { box-shadow: none; }
+.cs-card--raised { background: var(--cs-color-surface-raised); }
+.cs-card--featured { background: var(--_cs-light, var(--cs-color-surface-raised))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 12%, var(--cs-color-surface-panel))); border-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); box-shadow: var(--cs-shadow-md); }
 .cs-card--interactive { cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
-.cs-card--interactive:hover { border-color: var(--cs-color-brand-ochre); box-shadow: var(--cs-shadow-md); }
+.cs-card--interactive:hover { border-color: var(--cs-accent); box-shadow: var(--cs-shadow-md); }
 .cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-sm); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
 .cs-card--flat.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-card--interactive:active { transform: translateY(1px); }
@@ -27,7 +29,7 @@
 .cs-stat__delta--flat { color: var(--cs-color-text-muted); }
 
 /* Avatar */
-.cs-avatar { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cs-color-brand-umber); color: var(--cs-color-brand-ochre); font-family: var(--cs-font-family-ui); font-weight: 700; flex: none; user-select: none; }
+.cs-avatar { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); font-family: var(--cs-font-family-ui); font-weight: 700; flex: none; user-select: none; }
 .cs-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
 .cs-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--cs-font-size-xs); }
 .cs-avatar--md { inline-size: 40px; block-size: 40px; font-size: var(--cs-font-size-sm); }

package/base/feedback.css

@@ -1,9 +1,11 @@
 /* CyberSkill — feedback + status (.cs-*). Semantic colour never the only signal. */
 
 /* Badge — compact status label */
-.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
+.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
 .cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); }
 .cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }
+[data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--solid { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); }
+[data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--ochre { background: var(--cs-accent-tint); color: var(--cs-color-text-accent); border-color: color-mix(in oklab, var(--cs-accent) 55%, transparent); }
 .cs-badge--success { background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg); border-color: transparent; }
 .cs-badge--danger { background: var(--cs-color-semantic-danger); color: var(--cs-color-semantic-danger-fg); border-color: transparent; }
 .cs-badge--warning { background: var(--cs-color-semantic-warning); color: var(--cs-color-semantic-warning-fg); border-color: transparent; }
@@ -49,12 +51,12 @@
 @media (prefers-reduced-motion: reduce) { .cs-toast { animation: none; } }
 
 /* Spinner */
-.cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent); border-color: var(--_cs-light, color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-brand-ochre) 26%, transparent)); border-top-color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); animation: cs-spin 0.62s linear infinite; }
+.cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-accent-strong) 22%, transparent); border-color: var(--_cs-light, color-mix(in oklab, var(--cs-accent-strong) 22%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 26%, transparent)); border-top-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); animation: cs-spin 0.62s linear infinite; }
 @media (prefers-reduced-motion: reduce) { .cs-spinner { animation: none; } }
 
 /* Progress bar */
 .cs-progress { inline-size: 100%; block-size: 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); overflow: hidden; }
-.cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-color-brand-ochre); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
+.cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-accent); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
 .cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); }
 .cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); }
 

package/base/forms.css

@@ -17,7 +17,7 @@
 
 /* Checkbox + Radio — native, brand accent */
 .cs-check, .cs-radio { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); line-height: 1.4; }
-.cs-check input, .cs-radio input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); cursor: pointer; }
+.cs-check input, .cs-radio input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); cursor: pointer; }
 .cs-check.is-disabled, .cs-radio.is-disabled { opacity: 0.55; cursor: not-allowed; }
 .cs-check__text, .cs-radio__text { display: grid; gap: 2px; }
 .cs-check__desc, .cs-radio__desc { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }
@@ -29,7 +29,7 @@
 .cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
 .cs-switch__track { inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--cs-color-border-default); position: relative; transition: background var(--cs-duration-fast) var(--cs-ease-standard); flex: none; }
 .cs-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--cs-color-surface-panel, #fff); box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
-.cs-switch input:checked + .cs-switch__track { background: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); }
+.cs-switch input:checked + .cs-switch__track { background: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); }
 .cs-switch input:checked + .cs-switch__track::after { transform: translateX(18px); }
 .cs-switch input:focus-visible + .cs-switch__track { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-switch:focus-within { outline-style: solid; outline-width: 2px; outline-color: var(--cs-color-text-primary); outline-offset: 4px; border-radius: 6px; }

package/base/glass.css

@@ -9,6 +9,9 @@
 
 /* ---- 1. Composition from token scalars ---- */
 :root {
+  --_cs-border-subtle: var(--_cs-light, color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 18%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-border-default, #4a3a2c) 82%, transparent));
+  --_cs-border-strong: var(--_cs-light, color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 65%, var(--cs-color-text-primary, #45210e)))var(--_cs-dark, color-mix(in oklab, var(--cs-color-border-default, #4a3a2c) 65%, var(--cs-color-text-primary, #f5ead9)));
+  --_cs-surface-scrim: var(--_cs-light, color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 48%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-surface-page, #1a1108) 72%, transparent));
   --cs-glass-whisper-bg: color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent);
   --cs-glass-whisper-border: transparent;
   --cs-glass-light-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent);
@@ -107,8 +110,8 @@
 .cs-aurora {
   background-color: var(--cs-color-brand-umber);
   background-image:
-    radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-color-brand-ochre) 46%, transparent), transparent 55%),
-    radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, #ffcf5c 32%, transparent), transparent 60%),
+    radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-accent, var(--cs-color-brand-ochre)) 46%, transparent), transparent 55%),
+    radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, var(--cs-accent-grad-b, #ffcf5c) 32%, transparent), transparent 60%),
     radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, #1a1108 60%, transparent), transparent 60%);
   color: #fff; /* on-aurora wash */
 }

package/base/interaction.css

@@ -12,7 +12,7 @@
 }
 .cs-button--primary:hover:not(.is-disabled),
 .cs-button--danger:hover:not(.is-disabled) {
-  box-shadow: 0 8px 20px rgba(69, 33, 14, 0.24);
+  box-shadow: var(--_cs-light, 0 8px 20px color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 24%, transparent))var(--_cs-dark, var(--cs-shadow-md));
   transform: translateY(-1px);
 }
 .cs-button--primary:active:not(.is-disabled),

package/base/navigation.css

@@ -4,7 +4,7 @@
 .cs-tabs { display: flex; gap: 4px; overflow-x: auto; border-block-end: 1px solid var(--cs-color-border-default); }
 .cs-tab { flex-shrink: 0; appearance: none; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); padding: 10px 14px; cursor: pointer; position: relative; border-block-end: 2px solid transparent; margin-block-end: 0; display: inline-flex; align-items: center; gap: 7px; }
 .cs-tab:hover { color: var(--cs-color-text-primary); }
-.cs-tab[aria-selected="true"] { color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); border-block-end-color: var(--cs-color-brand-ochre); }
+.cs-tab[aria-selected="true"] { color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); border-block-end-color: var(--cs-accent); }
 .cs-tab:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: -3px; border-radius: var(--cs-radius-sm); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-tab__count { font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-full); padding: 1px 7px; }
 
@@ -17,10 +17,10 @@
 .cs-breadcrumb__current { color: var(--cs-color-text-primary); font-weight: 600; }
 
 /* Pagination */
-.cs-pagination { display: inline-flex; align-items: center; gap: 4px; }
+.cs-pagination { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
 .cs-pagination button { min-inline-size: 38px; block-size: 38px; padding: 0 10px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-md); font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); cursor: pointer; display: inline-grid; place-items: center; }
-.cs-pagination button:hover:not(:disabled) { border-color: var(--cs-color-brand-ochre); }
-.cs-pagination button[aria-current="page"] { background: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); color: var(--_cs-light, var(--cs-color-text-inverse))var(--_cs-dark, var(--cs-color-brand-umber)); border-color: transparent; }
+.cs-pagination button:hover:not(:disabled) { border-color: var(--cs-accent); }
+.cs-pagination button[aria-current="page"] { background: var(--_cs-light, var(--cs-component-button-primary-bg))var(--_cs-dark, var(--cs-component-button-primary-bg)); color: var(--_cs-light, var(--cs-component-button-primary-fg))var(--_cs-dark, var(--cs-component-button-primary-fg)); border-color: transparent; }
 .cs-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }
 .cs-pagination__ellipsis { padding: 0 4px; color: var(--cs-color-text-muted); }
 

package/base/responsive.css

@@ -37,10 +37,14 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
 @media screen and (max-width: 768px) {
   .cs-desk { padding: 24px 10px !important; }
   .cs-sheet { padding: 40px 40px !important; }
+  .cs-display:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-4xl); }
+  .cs-h1:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-2xl); }
 }
 @media screen and (max-width: 640px) {
   .cs-desk { padding: 12px 6px !important; }
   .cs-sheet { padding: 26px 20px !important; border-radius: 8px !important; }
+  .cs-display:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-3xl); }
+  .cs-h1:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-xl); }
 }
 @media screen and (max-width: 360px) {
   .cs-sheet { padding: 20px 15px !important; }

package/base/shell.css

@@ -6,8 +6,8 @@
 .cs-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); text-decoration: none; cursor: pointer; border: 0; background: transparent; inline-size: 100%; text-align: start; }
 .cs-nav-item:hover { background: var(--cs-color-surface-raised); }
 .cs-nav-item__icon { flex: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
-.cs-nav-item.is-active { background: color-mix(in oklab, var(--cs-color-brand-ochre) 22%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); }
-.cs-nav-item.is-active .cs-nav-item__icon { color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); }
+.cs-nav-item.is-active { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); }
+.cs-nav-item.is-active .cs-nav-item__icon { color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); }
 .cs-nav-item__trail { margin-inline-start: auto; }
 
 /* Steps */
@@ -15,9 +15,9 @@
 .cs-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; padding-inline-end: 12px; }
 .cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }
 .cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
-.cs-step--done .cs-step__marker { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-color: transparent; }
-.cs-step--done:not(:last-child)::after { background: var(--cs-color-brand-umber); }
-.cs-step--active .cs-step__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-color-brand-ochre) 28%, transparent); }
+.cs-step--done .cs-step__marker { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); border-color: transparent; }
+.cs-step--done:not(:last-child)::after { background: var(--cs-accent-strong); }
+.cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-accent-on); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
 .cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
 .cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
 
@@ -27,9 +27,9 @@
 .cs-popover__panel--end { inset-inline-start: auto; inset-inline-end: 0; }
 
 /* Drawer */
-.cs-drawer-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); }
-.cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: -18px 0 48px rgba(31, 19, 11, 0.22); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }
-.cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: 18px 0 48px rgba(31, 19, 11, 0.22); animation-name: cs-drawer-in-left; }
+.cs-drawer-scrim { position: fixed; inset: 0; background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); z-index: var(--cs-depth-modal); }
+.cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: var(--_cs-light, -18px 0 48px color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 22%, transparent))var(--_cs-dark, var(--cs-shadow-xl)); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }
+.cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: var(--_cs-light, 18px 0 48px color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 22%, transparent))var(--_cs-dark, var(--cs-shadow-xl)); animation-name: cs-drawer-in-left; }
 .cs-drawer__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
 .cs-drawer__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; }
 .cs-drawer__close { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); display: grid; place-items: center; padding: 4px; }
@@ -41,7 +41,7 @@
 @media (prefers-reduced-motion: reduce) { .cs-drawer { animation: none; } }
 
 /* CommandPalette */
-.cs-cmdk-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); display: grid; align-items: start; justify-items: center; padding-block-start: 12vh; }
+.cs-cmdk-scrim { position: fixed; inset: 0; background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); z-index: var(--cs-depth-modal); display: grid; align-items: start; justify-items: center; padding-block-start: 12vh; }
 .cs-cmdk { inline-size: min(560px, 92vw); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); overflow: hidden; }
 .cs-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--cs-color-border-default); }
 .cs-cmdk__search svg { color: var(--cs-color-text-muted); }

package/base/typography.css

@@ -2,7 +2,9 @@
  * weight + tracking so consumers write intent (.cs-h1) not magic numbers.
  * Built on the semantic aliases in tokens/typography.css. */
 .cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
+.cs-display--fluid { font-family: var(--cs-heading-family); font-size: clamp(2.25rem, 1.5rem + 3.5vw, var(--cs-text-display)); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
 .cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
+.cs-h1--fluid { font-family: var(--cs-heading-family); font-size: clamp(1.75rem, 1.25rem + 2vw, var(--cs-text-h1)); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
 .cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
 .cs-h3 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h3); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); overflow-wrap: break-word; }
 .cs-h4 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h4); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-font-weight-semibold); }
@@ -12,6 +14,8 @@
 .cs-caption { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-caption); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }
 .cs-eyebrow { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-eyebrow); font-weight: var(--cs-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-accent); }
 .cs-mono { font-family: var(--cs-font-family-mono); }
+.cs-tabular { font-variant-numeric: tabular-nums; }
+.cs-prose { max-inline-size: var(--cs-prose-measure, 45rem); line-height: var(--cs-font-lineHeight-body, 1.5); }
 /* Opt in to the display face for a subtree — retargets --cs-heading-family so
  * .cs-display/.cs-h1…h4 and bare headings follow, body copy stays on the UI
  * face. Space Grotesk tops out at 700, so --cs-heading-weight-strong (800)

package/components/api-discovery.json

@@ -3,7 +3,7 @@
   "interpretation": "Discovery projection: every public export and authored prop definition, with inherited prop counts. Inherited native props, full signatures, support evidence/history and compiler metadata remain in components/api-index.json. Declarations remain authoritative; this projection does not establish runtime, semantic or human acceptance.",
   "completeIndex": {
     "path": "components/api-index.json",
-    "sha256": "8e876f2a86a03a7380c9126c252eb1190becc020b4b59d0b6bf48ca33d7806d4"
+    "sha256": "468afbb6e09f78a1be6fe2b2b06bbd6ea30f4fa06abb835c191eb6490082854a"
   },
   "exports": [
     {