@cyberskill/design 1.1.0 → 1.2.0

package/_esm/cs.mjs

@@ -1,4 +1,4 @@
-// CyberSkill Design System — ESM entry point (GENERATED from _ds_manifest.json at v1.1.0).
+// CyberSkill Design System — ESM entry point (GENERATED from _ds_manifest.json at v1.2.0).
 // No build step: import this module directly in a browser. It ensures React 19.2.8 via umd-react
 // (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
 // ../_ds_bundle.js once, resolves the compiler-assigned namespace BY PREFIX (never a hardcoded suffix),
@@ -12,14 +12,27 @@ async function ensureScript(src, integrity){
     if (integrity) { s.integrity = integrity; s.crossOrigin = "anonymous"; }
     s.onload = res; s.onerror = () => rej(new Error("cs.js: failed to load " + href)); document.head.appendChild(s); });
 }
-if (!g.React) await ensureScript("https://unpkg.com/umd-react@19.2.8/dist/react.production.min.js", "sha384-/nh8CKeV7Pk42Gpda6L4DM1JtZ2bwPOi+eh9O7+a1Y22UkGs8+mw3aW1shQ9FV30");
-if (!g.ReactDOM) await ensureScript("https://unpkg.com/umd-react@19.2.8/dist/react-dom.production.min.js", "sha384-rhLCB72qrpcezgY2QW0panvW9IeO32m94nvuDVRD/iEGHXoUbjtijL6Xi/Z5/mzu");
+async function ensureReact() {
+  const localReact = new URL("../_vendor/react/react.production.min.js", import.meta.url).href;
+  const localDom = new URL("../_vendor/react/react-dom.production.min.js", import.meta.url).href;
+  const cdnReact = "https://unpkg.com/umd-react@19.2.8/dist/react.production.min.js";
+  const cdnDom = "https://unpkg.com/umd-react@19.2.8/dist/react-dom.production.min.js";
+  const sriReact = "sha384-/nh8CKeV7Pk42Gpda6L4DM1JtZ2bwPOi+eh9O7+a1Y22UkGs8+mw3aW1shQ9FV30";
+  const sriDom = "sha384-rhLCB72qrpcezgY2QW0panvW9IeO32m94nvuDVRD/iEGHXoUbjtijL6Xi/Z5/mzu";
+  if (!g.React) {
+    try { await ensureScript(localReact); } catch { await ensureScript(cdnReact, sriReact); }
+  }
+  if (!g.ReactDOM) {
+    try { await ensureScript(localDom); } catch { await ensureScript(cdnDom, sriDom); }
+  }
+}
+await ensureReact();
 const found = () => Object.keys(g).find(k => /^CyberSkillDesignSystem_/.test(k));
 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 = "1.1.0";
+export const VERSION = "1.2.0";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;
@@ -95,6 +108,7 @@ export const NativeSelect = CS.NativeSelect;
 export const NavItem = CS.NavItem;
 export const NavigationMenu = CS.NavigationMenu;
 export const NumberField = CS.NumberField;
+export const OverlayProvider = CS.OverlayProvider;
 export const Pagination = CS.Pagination;
 export const Popconfirm = CS.Popconfirm;
 export const Popover = CS.Popover;

package/_esm/react.d.ts

@@ -206,6 +206,8 @@ export { Drawer } from "../components/overlays/Drawer";
 export type * from "../components/overlays/Drawer";
 export { HoverCard } from "../components/overlays/HoverCard";
 export type * from "../components/overlays/HoverCard";
+export { OverlayProvider } from "../components/overlays/OverlayManager";
+export type * from "../components/overlays/OverlayManager";
 export { Popconfirm } from "../components/overlays/Popconfirm";
 export type * from "../components/overlays/Popconfirm";
 export { Popover } from "../components/overlays/Popover";

package/_esm/react.mjs

@@ -108,6 +108,7 @@ export { AlertDialog } from "../components/overlays/AlertDialog.jsx";
 export { ContextMenu } from "../components/overlays/ContextMenu.jsx";
 export { Drawer } from "../components/overlays/Drawer.jsx";
 export { HoverCard } from "../components/overlays/HoverCard.jsx";
+export { OverlayProvider } from "../components/overlays/OverlayManager.jsx";
 export { Popconfirm } from "../components/overlays/Popconfirm.jsx";
 export { Popover } from "../components/overlays/Popover.jsx";
 export { Tour } from "../components/overlays/Tour.jsx";

package/base/a11y.css

@@ -9,6 +9,19 @@
  * Focus rings are NOT here — they are already systematic (global :focus-visible in
  * reset.css + per-component 3px ochre rings in components/forms/navigation/controls). */
 
+/* Visually hidden but available to AT / file inputs (FileUpload keyboard path). */
+.cs-sr-only {
+  position: absolute !important;
+  inline-size: 1px !important;
+  block-size: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
 /* ---- 1. Touch targets: 44px minimum on coarse pointers ---- */
 @media (pointer: coarse) {
   /* Primary navigation & action targets → full 44px */
@@ -55,3 +68,8 @@
   :root { --cs-color-border-default: #9a8060; --cs-color-text-muted: #5a4638; }
   [data-theme="dark"] { --cs-color-border-default: #7a6450; --cs-color-text-muted: #d8c9b6; }
 }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] { --cs-color-border-default: #7a6450; --cs-color-text-muted: #d8c9b6; }
+}

package/base/ai.css

@@ -17,7 +17,7 @@
 .cs-chat-msg--user { flex-direction: row-reverse; }
 .cs-chat-msg__avatar { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
 .cs-chat-msg--lumi .cs-chat-msg__avatar { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
-.cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; font-weight: 700; font-size: 13px; font-family: var(--cs-font-family-ui); }
+.cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; font-weight: 700; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }
 .cs-chat-msg__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
 .cs-chat-msg__col { display: grid; gap: 3px; max-inline-size: 80%; }
 .cs-chat-msg--user .cs-chat-msg__col { justify-items: end; }
@@ -54,7 +54,7 @@
 .cs-citations__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
 .cs-citation { display: flex; align-items: flex-start; gap: 9px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); text-decoration: none; }
 a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
-.cs-citation__num { flex: none; inline-size: 20px; block-size: 20px; border-radius: 6px; background: color-mix(in oklab, var(--cs-color-semantic-info) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-info); font-family: var(--cs-font-family-mono); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
+.cs-citation__num { flex: none; inline-size: 20px; block-size: 20px; border-radius: 6px; background: color-mix(in oklab, var(--cs-color-semantic-info) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-info); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-2xs); font-weight: 700; display: grid; place-items: center; }
 .cs-citation__text { line-height: 1.4; }
 .cs-citation__src { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); }
 

package/base/collections.css

@@ -22,7 +22,7 @@
 .cs-item--interactive { cursor: pointer; font: inherit; inline-size: 100%; }
 button.cs-item--interactive { border: 1px solid transparent; background: var(--cs-color-surface-panel); }
 .cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
-.cs-item--interactive:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; }
+.cs-item--interactive:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; }
 .cs-item.is-selected { border-color: var(--cs-color-brand-ochre); 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; }
 .cs-item__leading { flex: none; display: grid; place-items: center; color: var(--cs-color-text-accent); }
@@ -40,7 +40,7 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
 .cs-timeline { display: grid; }
 .cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: 20px; 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: #fff; font-size: 12px; font-weight: 700; z-index: 1; }
+.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--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; }
@@ -72,7 +72,7 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
 .cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid #4a3a2c; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: #c9b7a3; }
 .cs-code__copy { border: 0; background: transparent; color: #c9b7a3; cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; }
 .cs-code__copy:hover { color: var(--cs-color-brand-ochre); }
-.cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: 13px; line-height: 1.6; }
+.cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-sm); line-height: 1.6; }
 .cs-code code { font-family: inherit; }
 
 /* EmptyState */
@@ -82,3 +82,8 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
 .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; }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-empty__icon { color: var(--cs-color-brand-ochre); }
+}

package/base/components.css

@@ -31,7 +31,7 @@
 .cs-button:focus-visible,
 .cs-field__control:focus-visible,
 .cs-ai-disclosure__badge:focus-visible {
-  outline: 3px solid var(--cs-color-accent-ochre, #f4ba17);
+  outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre, #f4ba17);
   outline-offset: 2px;
 }
 
@@ -130,7 +130,7 @@
 .cs-field__error { color: var(--cs-color-semantic-danger, #b42318); font-size: 0.875rem; }
 
 /* ---- Dialog ---- */
-.cs-dialog-layer { inset: 0; position: fixed; z-index: 1000; }
+.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 {
   background: var(--cs-color-surface-panel, #ffffff);
@@ -213,3 +213,12 @@
 .cs-ai-disclosure, .cs-review-gate, .cs-logo {
   font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
 }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  /* Dark theme: umber text/border on the low-emphasis buttons is invisible on dark surfaces —
+   remap so secondary reads as an ochre outline and tertiary/ghost use the light body colour. */
+  [data-theme="system"] .cs-button--secondary { color: var(--cs-color-brand-ochre); border-color: var(--cs-color-brand-ochre); }
+  [data-theme="system"] .cs-button--tertiary { color: var(--cs-color-text-primary); }
+  [data-theme="system"] .cs-button--ghost { color: var(--cs-color-text-primary); }
+}

package/base/controls.css

@@ -12,7 +12,7 @@
 /* NumberField / stepper */
 .cs-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
 .cs-stepper:focus-within { border-color: var(--cs-color-brand-ochre); }
-.cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: 18px; font-weight: 700; display: grid; place-items: center; }
+.cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: var(--cs-font-size-md); font-weight: 700; display: grid; place-items: center; }
 .cs-stepper button:hover:not(:disabled) { color: var(--cs-color-text-accent); }
 .cs-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }
 .cs-stepper input { inline-size: 56px; text-align: center; border: 0; border-inline: 1px solid var(--cs-color-border-default); background: transparent; font: inherit; font-family: var(--cs-font-family-mono); color: var(--cs-color-text-primary); outline: 0; min-height: 42px; -moz-appearance: textfield; }
@@ -21,7 +21,7 @@
 /* Slider (native range) */
 .cs-slider { inline-size: 100%; accent-color: var(--cs-color-brand-umber); block-size: 22px; cursor: pointer; }
 [data-theme="dark"] .cs-slider { accent-color: var(--cs-color-brand-ochre); }
-.cs-slider:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 4px; border-radius: var(--cs-radius-full); }
+.cs-slider:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 4px; border-radius: var(--cs-radius-full); }
 
 /* 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); }
@@ -60,10 +60,10 @@
 .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[data-readonly="true"] button { cursor: default; }
-.cs-rating button:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; border-radius: 4px; }
+.cs-rating button:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; border-radius: 4px; }
 .cs-otp { display: inline-flex; gap: 8px; }
 .cs-otp input { inline-size: 44px; block-size: 52px; text-align: center; font: 700 22px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); }
-.cs-otp input:focus { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; border-color: var(--cs-accent); }
+.cs-otp input:focus { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; border-color: var(--cs-accent); }
 .cs-otp input:disabled { opacity: .5; }
 .cs-btngroup { display: inline-flex; }
 .cs-btngroup .cs-button { border-radius: 0; }
@@ -74,30 +74,30 @@
 /* ---- v3 Batch 2 part 2 (Jul 2026): Combobox · InputGroup · TagInput ---- */
 .cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }
 .cs-combobox input { inline-size: 100%; box-sizing: border-box; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 34px 10px 12px; min-block-size: 44px; }
-.cs-combobox input:focus { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-combobox input:focus { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-combobox__caret { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--cs-color-text-muted); }
-.cs-combobox__list { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; list-style: none; }
-.cs-combobox__opt { padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; font-size: 14px; }
+.cs-combobox__list { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; list-style: none; }
+.cs-combobox__opt { padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; font-size: var(--cs-font-size-sm); }
 .cs-combobox__opt[aria-selected="true"], .cs-combobox__opt.hl { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
 [data-theme="dark"] .cs-combobox__opt[aria-selected="true"], [data-theme="dark"] .cs-combobox__opt.hl { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
-.cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: 13.5px; }
+.cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
 .cs-igroup { display: inline-flex; align-items: stretch; min-inline-size: 260px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; }
-.cs-igroup:focus-within { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-igroup:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-igroup > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 10px 12px; min-block-size: 44px; box-sizing: border-box; }
 .cs-igroup > input:focus { outline: none; }
-.cs-igroup__fix { display: flex; align-items: center; padding: 0 10px; color: var(--cs-color-text-muted); background: var(--cs-color-surface-raised); border-inline-end: 1px solid var(--cs-color-border-default); font-size: 13.5px; }
+.cs-igroup__fix { display: flex; align-items: center; padding: 0 10px; color: var(--cs-color-text-muted); background: var(--cs-color-surface-raised); border-inline-end: 1px solid var(--cs-color-border-default); font-size: var(--cs-font-size-sm); }
 .cs-igroup__fix--suffix { border-inline-end: 0; border-inline-start: 1px solid var(--cs-color-border-default); }
 .cs-igroup__btn { border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0 10px; }
 .cs-igroup__btn:hover { color: var(--cs-color-text-primary); }
 .cs-taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 6px 8px; min-block-size: 44px; box-sizing: border-box; }
-.cs-taginput:focus-within { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-taginput:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-taginput > input { flex: 1; min-inline-size: 120px; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 6px 4px; }
 .cs-taginput > input:focus { outline: none; }
 
 /* ---- v3 Batch 3 (Jul 2026): Calendar · DatePicker · TimePicker ---- */
 .cs-cal { display: inline-block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 12px; min-inline-size: 272px; box-shadow: var(--cs-shadow-sm); }
 .cs-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 700 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
-.cs-cal__head button { 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-sm); inline-size: 30px; block-size: 30px; cursor: pointer; font-size: 16px; }
+.cs-cal__head button { 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-sm); inline-size: 30px; block-size: 30px; cursor: pointer; font-size: var(--cs-font-size-base); }
 .cs-cal__head button:hover { background: var(--cs-color-surface-raised); }
 .cs-cal__wd, .cs-cal__grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
 .cs-cal__wd span { text-align: center; font: 700 10.5px/2 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--cs-color-text-muted); }
@@ -105,20 +105,20 @@
 .cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }
 .cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-accent); }
 .cs-cal__grid button.sel { background: var(--cs-accent); color: var(--cs-accent-on); font-weight: 700; }
-.cs-cal__grid button:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-cal__grid button:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-datepicker { position: relative; display: inline-block; }
 .cs-datepicker__field { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }
-.cs-datepicker__field:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-datepicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-datepicker__field .ph { color: var(--cs-color-text-muted); }
 .cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; }
 .cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }
-.cs-timepicker:focus-within { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-timepicker:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-timepicker select { border: 0; background: transparent; color: var(--cs-color-text-primary); font: 600 14px var(--cs-font-family-mono); padding: 8px 2px; cursor: pointer; }
 .cs-timepicker select:focus { outline: none; }
 
 /* ---- v3 Batch 4 (Jul 2026): HoverCard · Popconfirm · ContextMenu · FAB · Result · InlineEdit ---- */
 .cs-hovercard { position: relative; display: inline-block; }
-.cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: 13.5px; line-height: 1.5; color: var(--cs-color-text-primary); }
+.cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-primary); }
 .cs-popconfirm { position: relative; display: inline-block; }
 .cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }
 .cs-popconfirm__title { display: block; font: 600 13.5px/1.45 var(--cs-font-family-ui); color: var(--cs-color-text-primary); margin-bottom: 10px; }
@@ -128,7 +128,7 @@
 .cs-fab--static { position: static; align-items: flex-start; }
 .cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent); color: var(--cs-accent-on); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }
 .cs-fab__main:hover { filter: brightness(1.05); }
-.cs-fab__main:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; }
+.cs-fab__main:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; }
 .cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }
 .cs-fab--static .cs-fab__dial { flex-direction: row; }
 .cs-fab__mini { inline-size: 42px; block-size: 42px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-sm); }
@@ -138,14 +138,14 @@
 .cs-result--error .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-danger) 12%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-danger); }
 .cs-result--warning .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-warning) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-warning); }
 .cs-result__title { margin: 0; font: 800 22px/1.3 var(--cs-heading-family, var(--cs-font-family-ui)); letter-spacing: var(--cs-heading-tracking, -0.01em); color: var(--cs-color-text-primary); }
-.cs-result__body { margin: 0; max-inline-size: 46ch; color: var(--cs-color-text-muted); font-size: 14.5px; line-height: 1.55; }
+.cs-result__body { margin: 0; max-inline-size: 46ch; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: 1.55; }
 .cs-result__actions { display: flex; gap: 10px; margin-top: 6px; }
 .cs-inline-edit__view { display: inline-flex; align-items: center; gap: 7px; border: 1px dashed transparent; background: none; font: inherit; color: var(--cs-color-text-primary); padding: 4px 8px; border-radius: var(--cs-radius-sm); cursor: pointer; }
 .cs-inline-edit__view:hover { border-color: var(--cs-color-border-default); background: var(--cs-color-surface-raised); }
 .cs-inline-edit__view svg { color: var(--cs-color-text-muted); }
 .cs-inline-edit__view .ph { color: var(--cs-color-text-muted); }
 .cs-inline-edit input { font: inherit; color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-accent); border-radius: var(--cs-radius-sm); padding: 4px 8px; }
-.cs-inline-edit input:focus { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-inline-edit input:focus { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 
 /* ---- v3 Batch 5 part 1 (Jul 2026): Link · Anchor · Image · Toolbar ---- */
 .cs-link { color: var(--cs-color-link); text-underline-offset: .15em; }
@@ -155,7 +155,7 @@
 .cs-link--standalone:hover { text-decoration: underline; }
 .cs-anchor { display: grid; gap: 2px; min-inline-size: 180px; border-inline-start: 2px solid var(--cs-color-border-default); }
 .cs-anchor__title { font: 700 10.5px/1.4 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-text-muted); padding: 2px 12px 6px; }
-.cs-anchor__item { display: block; padding: 5px 12px; font-size: 13.5px; color: var(--cs-color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }
+.cs-anchor__item { display: block; padding: 5px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }
 .cs-anchor__item:hover { color: var(--cs-color-text-primary); }
 .cs-anchor__item.is-active { color: var(--cs-accent-strong); border-inline-start-color: var(--cs-accent); font-weight: 600; }
 [data-theme="dark"] .cs-anchor__item.is-active { color: var(--cs-accent-bright); }
@@ -165,13 +165,13 @@
 @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, 90); 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: rgba(26, 17, 8, .82); 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; font-size: 16px; cursor: pointer; }
+.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; 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; }
 .cs-toolbar__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--cs-color-text-primary); font: 600 13px var(--cs-font-family-ui); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; min-block-size: 32px; }
 .cs-toolbar__btn:hover { background: var(--cs-color-surface-raised); }
-.cs-toolbar__btn:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-toolbar__btn:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-toolbar__sep { inline-size: 1px; block-size: 20px; background: var(--cs-color-border-default); margin: 0 4px; }
 .cs-toolbar__more { position: relative; }
 .cs-toolbar__more .cs-menu__list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); }
@@ -189,40 +189,41 @@
 .cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-inline-start: 0; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, 220px); gap: 6px; 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-md); padding: 10px; }
 .cs-navmenu__card { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }
 .cs-navmenu__card:hover { background: var(--cs-accent-tint); }
-.cs-navmenu__card b { font-size: 14px; }
-.cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: 12.5px; line-height: 1.45; }
+.cs-navmenu__card b { font-size: var(--cs-font-size-sm); }
+.cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); line-height: 1.45; }
 .cs-carousel { display: grid; gap: 10px; }
 .cs-carousel__view { position: relative; overflow: hidden; border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
 .cs-carousel__track { display: flex; transition: transform var(--cs-duration-base, 240ms) cubic-bezier(0.2, 0, 0, 1); }
 .cs-carousel__slide { flex: 0 0 100%; min-inline-size: 100%; }
-.cs-carousel__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 36px; block-size: 36px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); cursor: pointer; font-size: 18px; box-shadow: var(--cs-shadow-sm); }
+.cs-carousel__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 36px; block-size: 36px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); cursor: pointer; font-size: var(--cs-font-size-md); box-shadow: var(--cs-shadow-sm); }
 .cs-carousel__nav.prev { inset-inline-start: 10px; }
 .cs-carousel__nav.next { inset-inline-end: 10px; }
 .cs-carousel__dots { display: flex; gap: 6px; justify-content: center; }
-.cs-carousel__dots button { inline-size: 9px; block-size: 9px; border-radius: 999px; border: 0; background: var(--cs-color-border-default); cursor: pointer; padding: 0; }
+.cs-carousel__dots button { inline-size: 9px; block-size: 9px; border-radius: 999px; border: 0; background: var(--cs-color-border-default); cursor: pointer; padding: 0; position: relative; }
+.cs-carousel__dots button::before { content: ""; position: absolute; inset: -7.5px; /* expand hit area to ≥24×24 (WCAG 2.5.8) */ }
 .cs-carousel__dots button[aria-current="true"] { background: var(--cs-accent); }
 @media (prefers-reduced-motion: reduce) { .cs-carousel__track { transition: none; } }
 .cs-comment { display: flex; gap: 10px; }
 .cs-comment__main { flex: 1; min-inline-size: 0; }
-.cs-comment__head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--cs-color-text-primary); }
-.cs-comment__meta { color: var(--cs-color-text-muted); font-size: 12px; }
-.cs-comment__body { font-size: 14px; line-height: 1.55; color: var(--cs-color-text-primary); margin: 3px 0 6px; }
+.cs-comment__head { display: flex; align-items: baseline; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
+.cs-comment__meta { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); }
+.cs-comment__body { font-size: var(--cs-font-size-sm); line-height: 1.55; color: var(--cs-color-text-primary); margin: 3px 0 6px; }
 .cs-comment__actions { display: flex; gap: 12px; }
 .cs-comment__actions button { border: 0; background: none; padding: 0; font: 600 12.5px var(--cs-font-family-ui); color: var(--cs-color-text-accent); cursor: pointer; }
 .cs-comment__replies { margin-top: 12px; padding-inline-start: 14px; border-inline-start: 2px solid var(--cs-color-border-default); display: grid; gap: 12px; }
 
 /* ---- v3 Batch 6a (Jul 2026): Form · Tree · BackTop · Watermark ---- */
 .cs-form { display: grid; gap: 16px; }
-.cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: 12px 14px; font-size: 13.5px; }
+.cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: 12px 14px; font-size: var(--cs-font-size-sm); }
 .cs-form__summary b { color: var(--cs-color-semantic-danger); }
 .cs-form__summary ul { margin: 6px 0 0; padding-inline-start: 18px; }
 .cs-formfield { display: grid; gap: 6px; }
 .cs-formfield__label { font: 600 13px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
 .cs-formfield__label em { color: var(--cs-color-semantic-danger); font-style: normal; }
-.cs-formfield__hint { font-size: 12.5px; color: var(--cs-color-text-muted); }
-.cs-formfield__error { font-size: 12.5px; color: var(--cs-color-semantic-danger); font-weight: 600; }
+.cs-formfield__hint { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
+.cs-formfield__error { font-size: var(--cs-font-size-xs); color: var(--cs-color-semantic-danger); font-weight: 600; }
 .cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select { border-color: var(--cs-color-semantic-danger); }
-.cs-tree { list-style: none; margin: 0; padding: 0; font-size: 14px; }
+.cs-tree { list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); }
 .cs-tree ul { list-style: none; margin: 0; padding: 0; }
 .cs-tree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--cs-radius-sm); }
 .cs-tree__row:hover { background: var(--cs-color-surface-raised); }
@@ -237,7 +238,7 @@
 /* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */
 .cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }
 .cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
-.cs-treeselect__field:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-treeselect__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-treeselect__field .ph { color: var(--cs-color-text-muted); }
 .cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }
 .cs-cascader__pop { display: flex; padding: 0; overflow: hidden; }
@@ -251,7 +252,7 @@
 .cs-transfer__list { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); min-inline-size: 180px; }
 .cs-transfer__title { font: 700 12px var(--cs-font-family-ui); padding: 9px 12px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
 .cs-transfer__list ul { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 6px; max-block-size: 200px; overflow: auto; }
-.cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--cs-color-text-primary); cursor: pointer; }
+.cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; }
 .cs-transfer__ops { display: grid; gap: 6px; align-content: center; }
 .cs-mentions { position: relative; display: block; max-inline-size: 420px; }
 .cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 4px; }
@@ -262,17 +263,17 @@
 .cs-colorpicker { position: relative; display: inline-block; }
 .cs-colorpicker__field { display: inline-flex; align-items: center; gap: 9px; min-block-size: 44px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }
 .cs-colorpicker__field i { inline-size: 20px; block-size: 20px; border-radius: 6px; border: 1px solid var(--cs-color-border-default); }
-.cs-colorpicker__field:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-colorpicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px; }
 .cs-colorpicker__grid { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; }
 .cs-colorpicker__grid button { inline-size: 26px; block-size: 26px; border-radius: 7px; border: 1px solid var(--cs-color-border-default); cursor: pointer; }
-.cs-colorpicker__grid button.on { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 1px; }
+.cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .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, 90); background: rgba(26, 17, 8, .45); }
-.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 90) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: 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: rgba(26, 17, 8, .45); }
+.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 90) + 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__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 90) + 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: 14.5px; color: var(--cs-color-text-primary); }
-.cs-tour__pop p { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--cs-color-text-muted); }
+.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); }
 .cs-tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .cs-tour__count { font: 600 11px var(--cs-font-family-mono); color: var(--cs-color-text-muted); }
 .cs-tour__btns { display: flex; gap: 6px; }
@@ -284,12 +285,12 @@
 .cs-splitter__pane { overflow: auto; padding: 14px; min-inline-size: 0; }
 .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-accent-tint); outline: 2px solid var(--cs-color-accent-ochre); outline-offset: -2px; }
-.cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 90); background: rgba(26, 17, 8, .45); display: grid; place-items: center; }
+.cs-splitter__bar:focus-visible { background: var(--cs-accent-tint); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: -2px; }
+.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__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-xl); padding: 18px 20px; min-inline-size: 300px; }
-.cs-hotkeys__card b { font-size: 15px; color: var(--cs-color-text-primary); }
+.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; }
-.cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: 13.5px; color: var(--cs-color-text-primary); }
+.cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
 .cs-dock { display: inline-flex; align-items: flex-end; gap: 8px; background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); border: 1px solid var(--cs-color-border-default); border-radius: 18px; padding: 8px 12px; backdrop-filter: blur(10px); }
 .cs-dock__item { inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; transition: transform var(--cs-duration-fast, 120ms); position: relative; }
 .cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-accent); }
@@ -305,14 +306,14 @@
 [data-theme="dark"] .cs-datagrid tr.is-selected td { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
 .cs-treetable .cs-treetable__cell { display: inline-flex; align-items: center; gap: 2px; }
 .cs-sortable { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-inline-size: 380px; }
-.cs-sortable__item { display: flex; align-items: center; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 12px; font-size: 14px; color: var(--cs-color-text-primary); cursor: grab; }
+.cs-sortable__item { display: flex; align-items: center; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: grab; }
 .cs-sortable__item.is-dragging { opacity: .5; }
 .cs-sortable__item.is-over { border-color: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-accent); }
 .cs-sortable__grip { color: var(--cs-color-text-muted); }
 
 /* ---- v3 Batch 7c (Jul 2026): Chart · Editor · Terminal ---- */
 .cs-chart { margin: 0; display: grid; gap: 8px; max-inline-size: 420px; }
-.cs-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--cs-color-text-muted); }
+.cs-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
 .cs-chart__legend b { color: var(--cs-color-text-primary); }
 .cs-editor { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); max-inline-size: 460px; }
 .cs-editor__bar { display: flex; gap: 2px; padding: 6px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
@@ -327,3 +328,15 @@
 .cs-terminal__line .p { color: var(--cs-color-brand-ochre); }
 .cs-terminal__line input { flex: 1; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
 .cs-terminal__out { color: #c9b7a3; white-space: pre-wrap; }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-segmented button[aria-pressed="true"], [data-theme="system"] .cs-segmented button[aria-selected="true"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
+  [data-theme="system"] .cs-combobox__opt[aria-selected="true"], [data-theme="system"] .cs-combobox__opt.hl { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
+  [data-theme="system"] .cs-slider { accent-color: var(--cs-color-brand-ochre); }
+  [data-theme="system"] .cs-toggle[aria-pressed="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
+  [data-theme="system"] .cs-anchor__item.is-active { color: var(--cs-accent-bright); }
+  [data-theme="system"] .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-bright); }
+  [data-theme="system"] .cs-cascader__opt.on { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
+  [data-theme="system"] .cs-datagrid tr.is-selected td { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
+}

package/base/data.css

@@ -27,9 +27,9 @@
 /* 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 img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
-.cs-avatar--sm { inline-size: 28px; block-size: 28px; font-size: 12px; }
-.cs-avatar--md { inline-size: 40px; block-size: 40px; font-size: 15px; }
-.cs-avatar--lg { inline-size: 56px; block-size: 56px; font-size: 20px; }
+.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); }
+.cs-avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--cs-font-size-lg); }
 .cs-avatar--square { border-radius: var(--cs-radius-md); }
 .cs-avatar-group { display: inline-flex; }
 .cs-avatar-group > .cs-avatar { box-shadow: 0 0 0 2px var(--cs-color-surface-panel); }

package/base/feedback.css

@@ -58,3 +58,8 @@
 .cs-skeleton--circle { border-radius: 50%; }
 @keyframes cs-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
 @media (prefers-reduced-motion: reduce) { .cs-skeleton { animation: none; } }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-spinner { border-color: color-mix(in oklab, var(--cs-color-brand-ochre) 26%, transparent); border-top-color: var(--cs-color-brand-ochre); }
+}

package/base/forms.css

@@ -5,13 +5,13 @@
 .cs-select { position: relative; display: block; }
 .cs-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
 .cs-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
-.cs-select select.cs-field__control:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
+.cs-select select.cs-field__control:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
 
 /* NativeSelect — lean progressive-enhancement companion beside Select */
 .cs-native-select { position: relative; display: block; }
 .cs-native-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
 .cs-native-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
-.cs-native-select select.cs-field__control:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
+.cs-native-select select.cs-field__control:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
 .cs-native-select--sm select.cs-field__control { min-block-size: 36px; padding-block: 6px; font-size: var(--cs-font-size-sm); }
 .cs-native-select--md select.cs-field__control { min-block-size: 44px; }
 
@@ -33,8 +33,14 @@
 .cs-switch input:checked + .cs-switch__track { background: var(--cs-color-brand-umber); }
 [data-theme="dark"] .cs-switch input:checked + .cs-switch__track { background: var(--cs-color-brand-ochre); }
 .cs-switch input:checked + .cs-switch__track::after { transform: translateX(18px); }
-.cs-switch input:focus-visible + .cs-switch__track { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; }
+.cs-switch input:focus-visible + .cs-switch__track { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; }
 .cs-switch.is-disabled { opacity: 0.55; cursor: not-allowed; }
 
 /* Textarea reuses .cs-field; give it sane sizing */
 textarea.cs-field__control { min-height: 96px; resize: vertical; line-height: var(--cs-font-lineHeight-body); }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-check input, [data-theme="system"] .cs-radio input { accent-color: var(--cs-color-brand-ochre); }
+  [data-theme="system"] .cs-switch input:checked + .cs-switch__track { background: var(--cs-color-brand-ochre); }
+}

package/base/glass.css

@@ -117,3 +117,9 @@
   color: #fff;
 }
 .cs-aurora--photo { background-size: cover; background-position: center; }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  /* ---- 5. Dark-mode border tuning ---- */
+[data-theme="system"] { --cs-color-border-default: #4a3a2c; }
+}

package/base/navigation.css

@@ -6,7 +6,7 @@
 .cs-tab:hover { color: var(--cs-color-text-primary); }
 .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-umber); border-block-end-color: var(--cs-color-brand-ochre); }
 [data-theme="dark"] .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-ochre); }
-.cs-tab:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: -3px; border-radius: var(--cs-radius-sm); }
+.cs-tab:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: -3px; border-radius: var(--cs-radius-sm); }
 .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; }
 
 /* Breadcrumb */
@@ -32,8 +32,14 @@
 .cs-menu__list--end { inset-inline-start: auto; inset-inline-end: 0; }
 .cs-menu__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
 .cs-menu__item:hover { background: var(--cs-color-surface-raised); }
-.cs-menu__item:focus-visible { background: var(--cs-color-surface-raised); outline: 3px solid var(--cs-color-accent-ochre); outline-offset: -3px; }
+.cs-menu__item:focus-visible { background: var(--cs-color-surface-raised); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: -3px; }
 .cs-menu__item--danger { color: var(--cs-color-semantic-danger); }
 .cs-menu__item--danger:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger) 10%, transparent); }
 .cs-menu__sep { block-size: 1px; background: var(--cs-color-border-default); margin: 4px 2px; }
 .cs-menu__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 6px 10px 2px; }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-ochre); }
+  [data-theme="system"] .cs-pagination button[aria-current="page"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
+}

package/base/reset.css

@@ -14,4 +14,4 @@ body {
 :where(h1, h2, h3, h4, h5, h6) { line-height: var(--cs-font-lineHeight-heading, 1.35); text-wrap: balance; }
 :where(p) { text-wrap: pretty; }
 :where(code, pre, kbd, samp) { font-family: var(--cs-font-family-mono, ui-monospace, monospace); }
-:where(:focus-visible) { outline: 2px solid var(--cs-color-accent-ochre, #f4ba17); outline-offset: 2px; }
+:where(:focus-visible) { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre, #f4ba17); outline-offset: 2px; }