@devfellowship/components 1.5.0 → 3.0.0

package/dist/styles/tokens.css

@@ -316,7 +316,7 @@
   --c-input-border:        var(--s-border-subtle);
   --c-input-border-hover:  var(--s-border-strong);
   --c-input-border-focus:  var(--s-border-focus);
-  --c-input-ring-focus:    var(--s-brand-ring);
+  --c-input-ring-focus:    var(--s-border-focus);  /* solid amber — was --s-brand-ring (semi-transparent) */
   --c-input-border-error:  var(--s-danger-solid);
   --c-input-radius:        var(--p-radius-md);
 
@@ -358,10 +358,80 @@
   /* Avatar */
   --c-avatar-ring:         var(--s-surface-panel);
   --c-avatar-fallback-bg:  var(--s-surface-elevated);
+  --c-avatar-fallback-fg:  var(--s-ink-primary);
+  /* Brand (amber) fallback tone — the DFL-branded avatar. */
+  --c-avatar-brand-bg:     var(--s-brand-solid);      /* #E07A4A */
+  --c-avatar-brand-fg:     var(--s-ink-inverse);      /* dark ink on amber */
+  /* Group separator ring — page-coloured so overlapping avatars read as distinct. */
+  --c-avatar-group-ring:   var(--s-surface-page);     /* #0a0908 */
+  /* Status indicator dots (bottom-right), ringed in page bg. */
+  --c-avatar-status-online:  var(--s-success-solid);  /* green  */
+  --c-avatar-status-away:    var(--s-warning-solid);  /* amber  */
+  --c-avatar-status-offline: var(--s-ink-muted);      /* grey   */
+  --c-avatar-status-ring:    var(--s-surface-page);
+  /* Deterministic member palette (12 muted jewel tones on dark bg).
+   * Hashed from the member seed (initials/name) so a given person is always
+   * the same colour. Text stays --s-ink-primary (light) — all tones pass AA. */
+  --c-avatar-member-1:  #b4534b;  /* red     */
+  --c-avatar-member-2:  #c26a3b;  /* orange  */
+  --c-avatar-member-3:  #b8893f;  /* amber   */
+  --c-avatar-member-4:  #8a9a3f;  /* lime    */
+  --c-avatar-member-5:  #4f9a5e;  /* green   */
+  --c-avatar-member-6:  #3f9a86;  /* teal    */
+  --c-avatar-member-7:  #3f8f9a;  /* cyan    */
+  --c-avatar-member-8:  #4a7bb4;  /* blue    */
+  --c-avatar-member-9:  #5a5eb4;  /* indigo  */
+  --c-avatar-member-10: #8a53b4;  /* violet  */
+  --c-avatar-member-11: #b4539a;  /* pink    */
+  --c-avatar-member-12: #b4536a;  /* rose    */
 
   /* Badge / Pill */
   --c-badge-radius: var(--p-radius-sm);
   --c-pill-radius:  var(--p-radius-pill);
+  /* Solid-fill tone — count indicators / emphatic status. Solid intent bg +
+   * inverse ink (dark text on the bright fill). One per semantic intent. */
+  --c-badge-solid-fg:          var(--s-ink-inverse);
+  --c-badge-solid-default-bg:  var(--s-brand-solid);
+  --c-badge-solid-success-bg:  var(--s-success-solid);
+  --c-badge-solid-warning-bg:  var(--s-warning-solid);
+  --c-badge-solid-danger-bg:   var(--s-danger-solid);
+  --c-badge-solid-info-bg:     var(--s-info-solid);
+
+  /* Alert — neutral panel base + per-variant semantic skins.
+   * Default is a VISIBLE elevated panel (surface-panel), never page bg.
+   * Each variant maps to its --s-{intent}-{subtle,border,fg,solid} tokens. */
+  --c-alert-bg:              var(--s-surface-panel);
+  --c-alert-radius:          var(--p-radius-lg);
+  --c-alert-padding-y:       var(--p-space-4);
+  --c-alert-padding-x:       var(--p-space-4);
+  --c-alert-border:          var(--s-border-subtle);
+  --c-alert-fg:              var(--s-ink-primary);
+  --c-alert-desc-fg:         var(--s-ink-secondary);
+  --c-alert-icon-size:       18px;
+  --c-alert-accent-w:        3px;   /* left accent stripe */
+
+  --c-alert-default-icon:    var(--s-ink-muted);
+  --c-alert-default-accent:  var(--s-border-subtle);
+
+  --c-alert-info-bg:         var(--s-info-subtle);
+  --c-alert-info-border:     var(--s-info-border);
+  --c-alert-info-icon:       var(--s-info-fg);
+  --c-alert-info-accent:     var(--s-info-solid);
+
+  --c-alert-success-bg:      var(--s-success-subtle);
+  --c-alert-success-border:  var(--s-success-border);
+  --c-alert-success-icon:    var(--s-success-fg);
+  --c-alert-success-accent:  var(--s-success-solid);
+
+  --c-alert-warning-bg:      var(--s-warning-subtle);
+  --c-alert-warning-border:  var(--s-warning-border);
+  --c-alert-warning-icon:    var(--s-warning-fg);
+  --c-alert-warning-accent:  var(--s-warning-solid);
+
+  --c-alert-danger-bg:       var(--s-danger-subtle);
+  --c-alert-danger-border:   var(--s-danger-border);
+  --c-alert-danger-icon:     var(--s-danger-fg);
+  --c-alert-danger-accent:   var(--s-danger-solid);
 
   /* Layout chrome */
   --c-sidebar-w:           224px;
@@ -489,3 +559,1150 @@
   outline-offset: var(--ds-focus-ring-offset);
   transition: none;  /* instant — no animation on focus */
 }
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Button — semantic focus-ring knobs (atoms-button refactor, 2026-07-02)
+ *
+ *   Brand spec: double box-shadow — 2px bg-color gap + 1px solid accent.
+ *   Three accent colours; each resolves to an existing --s-* semantic token.
+ *
+ *     --c-button-focus-gap      the 2 px background-color separator
+ *     --c-button-focus-brand    amber  — primary / secondary / outline / ghost / link
+ *     --c-button-focus-danger   red    — destructive (semantic intent)
+ *     --c-button-focus-success  green  — success (semantic intent)
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  --c-button-focus-gap:     var(--s-surface-page);
+  --c-button-focus-brand:   var(--s-brand-solid);
+  --c-button-focus-danger:  var(--s-danger-solid);
+  --c-button-focus-success: var(--s-success-solid);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — ButtonLab playground (DesignPlayground experiment)
+ *
+ *   Consumed ONLY by src/design-playground/ButtonLab.stories.tsx.
+ *   NOT distributed via registry / npm. Delete this block once the
+ *   recording experiment graduates (or is retired) via the playground
+ *   → Components/Atoms/Button promotion flow.
+ *
+ *   All values resolve to existing --s-* semantic tokens.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Recording experiment — Active (pulsing amber dot, "Gravando…")
+   * Amber-brand treatment: signal ≠ error. NOT destructive/danger tokens. */
+  --c-buttonlab-recording-bg:           var(--s-brand-subtle);      /* rgba(224,122,74,.10) */
+  --c-buttonlab-recording-fg:           var(--s-brand-fg);           /* var(--p-amber-300)   */
+  --c-buttonlab-recording-border:       var(--s-brand-border);       /* rgba(224,122,74,.22) */
+
+  /* Recording experiment — Idle (static dimmed dot, "Parado")
+   * Neutral treatment — same layout, subdued palette. */
+  --c-buttonlab-recording-idle-bg:      var(--s-surface-page);       /* transparent on page  */
+  --c-buttonlab-recording-idle-fg:      var(--s-ink-muted);          /* var(--p-sand-400)    */
+  --c-buttonlab-recording-idle-border:  var(--s-border-subtle);      /* var(--p-sand-700)    */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — Component (--c-toggle-* / --c-toggle-group-*)
+ *   ToggleGroup / Toggle component-token knobs.
+ *   Resolves to existing --s-* semantic tokens; no --p-* or --s-* are added.
+ *   Consumers can override any --c-toggle-* to retheme without touching the
+ *   semantic layer.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Item backgrounds */
+  --c-toggle-bg:                    transparent;
+  --c-toggle-bg-hover:              var(--s-surface-raised);
+  --c-toggle-bg-active:             var(--s-brand-subtle);         /* amber wash */
+  --c-toggle-bg-active-hover:       rgba(224, 122, 74, 0.16);     /* stronger wash on hover */
+
+  /* Item foreground (icon / text) */
+  --c-toggle-fg:                    var(--s-ink-muted);
+  --c-toggle-fg-hover:              var(--s-ink-secondary);
+  --c-toggle-fg-active:             var(--s-brand-fg);             /* amber-300 */
+
+  /* Border — used by outline variant items and inter-item dividers */
+  --c-toggle-border:                var(--s-border-subtle);
+
+  /* Group container radius */
+  --c-toggle-group-radius:          var(--p-radius-md);            /* 6px */
+
+  /* Focus ring — THE uniform 2px-gap + 1px-amber spec (ch.5.2) */
+  --c-toggle-focus-ring:            0 0 0 2px var(--s-surface-page), 0 0 0 3px #E07A4A;
+
+  /* Outline variant: inset top-highlight on active items */
+  --c-toggle-outline-active-shadow: inset 0 1px 0 rgba(224, 122, 74, 0.3);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — Component (--c-alert-dialog-*)
+ *
+ *   AlertDialog organism: scrim overlay + dialog card surface + typography.
+ *   Resolves exclusively to --s-* semantic tokens and existing --c-dialog-*
+ *   knobs (reuses the Dialog overlay/surface contract — AlertDialog shares
+ *   the same visual elevation as Dialog).
+ *
+ *   Action button variants (default/destructive) are driven by existing
+ *   --c-button-* tokens via buttonVariants(). No new button knobs needed.
+ *
+ *   Focus ring: uniform 2 px page-bg gap + 1 px #E07A4A — applied inline in
+ *   the component via focus-visible: shadow override (see alert-dialog.tsx).
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* AlertDialog */
+  --c-alert-dialog-bg:       var(--c-dialog-bg);       /* dialog card surface   */
+  --c-alert-dialog-border:   var(--c-dialog-border);   /* card 1 px border      */
+  --c-alert-dialog-radius:   var(--c-dialog-radius);   /* 14 px (--p-radius-xl) */
+  --c-alert-dialog-shadow:   var(--c-dialog-shadow);   /* deep overlay shadow   */
+  --c-alert-dialog-scrim:    var(--c-dialog-scrim);    /* backdrop rgba scrim   */
+  --c-alert-dialog-title-fg: var(--s-ink-primary);     /* title text color      */
+  --c-alert-dialog-desc-fg:  var(--s-ink-muted);       /* description text      */
+
+  /* Checkbox — DFL Design System v0
+   * Two-layer amber focus ring: 0 0 0 2px page-bg gap + 0 0 0 3px amber ring.
+   * Error state keyed off aria-invalid (mirrors Input/Textarea pattern).
+   * Indeterminate state uses the Radix `checked="indeterminate"` prop + Minus icon. */
+  --c-checkbox-size:              16px;
+  --c-checkbox-radius:            var(--p-radius-sm);
+  --c-checkbox-border-width:      1.5px;
+  --c-checkbox-bg:                var(--s-surface-raised);
+  --c-checkbox-border:            var(--s-border-subtle);
+  --c-checkbox-border-hover:      var(--s-border-strong);
+  --c-checkbox-checked-bg:        var(--s-brand-solid);
+  --c-checkbox-checked-border:    var(--s-brand-solid);
+  --c-checkbox-checked-fg:        var(--s-ink-inverse);
+  --c-checkbox-focus-ring:        var(--s-border-focus);   /* amber #E07A4A */
+  --c-checkbox-disabled-opacity:  0.40;
+  --c-checkbox-danger-border:     var(--s-danger-solid);
+  --c-checkbox-danger-bg:         rgba(224, 122, 122, 0.06);  /* very subtle red tint */
+  --c-checkbox-danger-checked-bg: var(--s-danger-solid);
+
+  /* Kbd — single-key chip with physical-key depth shadow.
+   * Resolves: --c-kbd-* → --s-* → --p-* (3-layer contract).
+   * Override --c-kbd-* in isolation to retheme Kbd without touching shared semantics. */
+  --c-kbd-bg:        var(--s-surface-raised);      /* resting key surface #1a1714 */
+  --c-kbd-bg-depth:  var(--s-surface-panel);       /* bottom shadow ridge #141210 */
+  --c-kbd-border:    var(--s-border-subtle);       /* key border #2a2622 */
+  --c-kbd-fg:        var(--s-ink-primary);         /* label ink #f6f1e7 (↑ from ink-secondary for legibility) */
+  --c-kbd-shine:     rgba(255, 255, 255, 0.055);   /* top inset highlight — literal (no semantic equivalent) */
+  --c-kbd-radius:    var(--p-radius-sm);           /* 4px */
+
+  /* Label
+   * Layer 3 knobs that resolve into Layer 2 semantic tokens.
+   * Component code reaches for --c-label-* first; consuming apps may override
+   * just these vars without touching the shared --s-* semantic palette.
+   *
+   * Token chain:
+   *   --c-label-fg             → --s-ink-secondary   (default variant color)
+   *   --c-label-fg-muted       → --s-ink-muted        (mono variant color)
+   *   --c-label-fg-error       → --s-danger-fg        (error state color)
+   *   --c-label-fg-disabled    → --s-ink-disabled     (disabled state color)
+   *   --c-label-required-color → --s-brand-solid      (required asterisk)
+   *   --c-label-font-size      → --p-text-12          (default: 12px)
+   *   --c-label-mono-font-size → 10.5px               (mono: no exact primitive)
+   *   --c-label-mono-tracking  → 0.06em               (mono letter-spacing)
+   */
+  --c-label-font:           var(--p-font-sans);
+  --c-label-font-size:      var(--p-text-12);
+  --c-label-line-height:    var(--p-leading-snug);
+  --c-label-weight:         var(--p-weight-500);
+  --c-label-fg:             var(--s-ink-secondary);
+  --c-label-fg-muted:       var(--s-ink-muted);
+  --c-label-fg-error:       var(--s-danger-fg);
+  --c-label-fg-disabled:    var(--s-ink-disabled);
+  --c-label-required-color: var(--s-brand-solid);
+  --c-label-mono-font:      var(--p-font-mono);
+  --c-label-mono-font-size: 10.5px;   /* no --p-text-10-5 primitive exists */
+  --c-label-mono-tracking:  0.06em;
+}
+
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — Component (--c-progress-*)
+ *   Track background lifted to --s-surface-elevated so the empty bar is
+ *   legible against the page (#0a0908). Fill is brand amber by default;
+ *   semantic variants map to their --s-{intent}-solid tokens.
+ *   Height sizes: sm=4px / md=8px (default, replaces hardcoded h-4=16px) / lg=12px.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Track */
+  --c-progress-track-bg:      var(--s-surface-elevated);   /* #1f1c18 — visible on page bg */
+  --c-progress-radius:        var(--p-radius-pill);          /* 999px */
+
+  /* Heights (size variants) */
+  --c-progress-h-sm:          4px;
+  --c-progress-h-md:          8px;   /* default — replaces hardcoded h-4 (16px) */
+  --c-progress-h-lg:          12px;
+
+  /* Motion */
+  --c-progress-duration:      var(--p-duration-slow);        /* 280ms */
+  --c-progress-easing:        var(--p-ease-in-out);          /* cubic-bezier(0.4,0,0.2,1) */
+
+  /* Fill colors (variant layer) */
+  --c-progress-fill:          var(--s-brand-solid);          /* amber #E07A4A */
+  --c-progress-fill-success:  var(--s-success-solid);        /* green #5ec27e */
+  --c-progress-fill-danger:   var(--s-danger-solid);         /* red   #e07a7a */
+  --c-progress-fill-warning:  var(--s-warning-solid);        /* yellow #e0b04a */
+  --c-progress-fill-info:     var(--s-info-solid);           /* blue  #7aa2e0 */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — RadioGroup (--c-radio-*)
+ *
+ *   Resolves exclusively to existing --s-* semantic tokens (Layer 2).
+ *   Never modify --s-* or --p-* here — append --c-* only.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Geometry */
+  --c-radio-size:              16px;
+  --c-radio-indicator-size:    8px;
+  --c-radio-border-width:      1.5px;
+  --c-radio-radius:            var(--p-radius-pill);
+
+  /* Colors — unselected (neutral), hover, checked */
+  --c-radio-bg:                var(--s-surface-elevated);
+  --c-radio-border:            var(--s-border-strong);      /* neutral: #3a3530, NOT amber */
+  --c-radio-border-hover:      var(--s-ink-muted);          /* unchecked hover: #7d7568 */
+  --c-radio-border-checked:    var(--s-brand-solid);        /* checked / focus: #E07A4A */
+  --c-radio-indicator-color:   var(--s-brand-solid);        /* filled dot when checked */
+
+  /* Label */
+  --c-radio-label-fg:          var(--s-ink-secondary);
+  --c-radio-label-fg-disabled: var(--s-ink-disabled);
+
+  /* Spacing */
+  --c-radio-item-gap:          var(--p-space-3);            /* 12px between items */
+  --c-radio-label-gap:         var(--p-space-2);            /* 8px between circle + label */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — ScrollArea component tokens (--c-scroll-area-*)
+ *
+ *   Thumb state hierarchy + track reveal + sizing for the dark-warm palette.
+ *   Resolves entirely through --s-* semantic tokens; no raw primitives
+ *   are referenced directly.
+ *
+ *   Thumb:  ink-muted at rest → brand-solid on hover → brand-pressed active.
+ *   Track:  transparent at rest; sand-700@50% reveals the rail on hover.
+ *   Width:  8px (down from shadcn default 10px; slimmer = more content area).
+ *   Radius: pill (999px) matching existing thumb treatment.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Thumb state hierarchy */
+  --c-scroll-area-thumb:        var(--s-ink-muted);          /* #7d7568 — visible but recessive at rest */
+  --c-scroll-area-thumb-hover:  var(--s-brand-solid);        /* #E07A4A — amber brand accent on hover   */
+  --c-scroll-area-thumb-active: var(--s-brand-pressed);      /* #c2663b — pressed / dragging            */
+
+  /* Track */
+  --c-scroll-area-track:        transparent;                 /* track at rest: invisible                */
+  --c-scroll-area-track-hover:  rgba(42, 38, 34, 0.50);      /* sand-700 @ 50% — reveals rail on hover  */
+
+  /* Sizing */
+  --c-scroll-area-width:        8px;                         /* scrollbar rail + thumb width            */
+  --c-scroll-area-radius:       var(--p-radius-pill);        /* 999px pill thumb                        */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — Separator component tokens (--c-separator-*)
+ *
+ *   Resolves exclusively to existing --s-* semantic tokens. Gives consumers
+ *   a single override knob (--c-separator-color) instead of reaching into
+ *   the semantic layer directly.
+ *
+ *   Usage: override per-instance via inline style —
+ *     style={{ "--c-separator-color": "var(--s-border-strong)" } as React.CSSProperties}
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Line fill — subtle border for inline dividers (default) */
+  --c-separator-color:         var(--s-border-subtle);
+  /* Line fill — strong border for major section boundaries */
+  --c-separator-color-strong:  var(--s-border-strong);
+  /* Line fill — brand-border tint for accent/featured separators */
+  --c-separator-color-brand:   var(--s-brand-border);
+  /* Line weight (height for horizontal, width for vertical) */
+  --c-separator-thickness:     1px;
+
+  /* WithLabel composite — centered label typography */
+  --c-separator-label-fg:      var(--s-ink-muted);
+  --c-separator-label-size:    var(--p-text-11);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Skeleton component (--c-skeleton-*)
+ *   Warm directional shimmer (sand-800 base → sand-700 sweep → sand-800).
+ *   All colour tokens resolve to existing --s-* semantic tokens so the whole
+ *   skeleton can be re-themed by overriding a single --c-skeleton-bg /
+ *   --c-skeleton-shimmer pair in a scoped selector.
+ *   Radius tiers follow the DS --p-radius-* scale (no --s-radius-* exists).
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Base fill = deepest surface tier (sand-800 = --s-surface-elevated) */
+  --c-skeleton-bg:            var(--s-surface-elevated);
+  /* Shimmer highlight = one level warmer (sand-700 = --s-border-subtle) */
+  --c-skeleton-shimmer:       var(--s-border-subtle);
+  /* Radius tiers — map directly to DS primitive radius scale */
+  --c-skeleton-radius-sm:     var(--p-radius-sm);   /* 4px  — text lines, table cells */
+  --c-skeleton-radius-md:     var(--p-radius-md);   /* 6px  — title blocks           */
+  --c-skeleton-radius-lg:     var(--p-radius-lg);   /* 10px — hero / media blocks     */
+  --c-skeleton-radius-circle: 50%;                  /* avatars                        */
+  /* Animation */
+  --c-skeleton-duration:      1.8s;
+}
+
+@keyframes skeleton-shimmer {
+  0%   { background-position: -600px 0; }
+  100% { background-position:  600px 0; }
+}
+
+.dfl-skeleton {
+  display: block;
+  background: linear-gradient(
+    90deg,
+    var(--c-skeleton-bg)      0%,
+    var(--c-skeleton-bg)      30%,
+    var(--c-skeleton-shimmer) 50%,
+    var(--c-skeleton-bg)      70%,
+    var(--c-skeleton-bg)      100%
+  );
+  background-size: 1200px 100%;
+  animation: skeleton-shimmer var(--c-skeleton-duration) ease-in-out infinite;
+  border-radius: var(--c-skeleton-radius-sm);
+}
+
+/* WCAG 2.3.3 — stop animation for users who prefer reduced motion;
+ * keep the sand-800 static fill visible so placeholders remain legible. */
+@media (prefers-reduced-motion: reduce) {
+  .dfl-skeleton {
+    animation: none;
+    background: var(--c-skeleton-bg);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — Slider component tokens (--c-slider-*)
+ *
+ * Resolves to existing --s-* semantic tokens. Track height reduced from
+ * h-4 (16px) to 4px (sleek DS-aligned line with protruding thumb).
+ * Focus ring uses DS uniform double-shadow spec (ch.5.2).
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Track */
+  --c-slider-track-h:            4px;
+  --c-slider-track-bg:           var(--s-border-subtle);      /* #2a2622 — subtle track line */
+
+  /* Range fill */
+  --c-slider-range-bg:           var(--s-brand-solid);        /* #E07A4A amber */
+
+  /* Thumb */
+  --c-slider-thumb-size:         20px;
+  --c-slider-thumb-bg:           var(--s-surface-page);       /* #0a0908 page-bg — creates border contrast */
+  --c-slider-thumb-border:       var(--s-brand-solid);        /* #E07A4A amber border */
+
+  /* Shadows — composed per state (base, hover, focus) */
+  --c-slider-thumb-shadow:       0 1px 4px rgba(0, 0, 0, 0.55);
+  --c-slider-thumb-hover-shadow: 0 0 0 7px rgba(224, 122, 74, 0.18), 0 1px 4px rgba(0, 0, 0, 0.55);
+  /* DS uniform focus ring: 2px bg gap + 3px amber ring + base shadow */
+  --c-slider-thumb-focus-shadow: 0 0 0 2px var(--s-surface-page), 0 0 0 3px var(--s-brand-solid), 0 1px 4px rgba(0, 0, 0, 0.55);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — Sonner / Toast (--c-toast-*)
+ *   Thin adapter over the sonner library. Maps DFL semantic tokens onto
+ *   Sonner's CSS-variable API and defines per-type semantic surfaces.
+ *   Implementation: passed as Sonner CSS vars via the SonnerToaster wrapper.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Base surface — shared by Radix Toast (toast.tsx) AND Sonner (sonner.tsx).
+   * Single canonical --c-toast-* block (merged the former duplicate "Toast
+   * component tokens" block into here so both consumers resolve identically;
+   * eliminates the last-write-wins collision that made the semantic tints
+   * drift to the plain --s-*-subtle greens). */
+  --c-toast-bg:              var(--s-surface-elevated);    /* #1f1c18 */
+  --c-toast-border:          var(--s-border-subtle);       /* #2a2622 */
+  --c-toast-radius:          var(--p-radius-lg);           /* 10px */
+  --c-toast-shadow:          0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
+  --c-toast-accent-w:        3px;                          /* left accent stripe width (toast.tsx) */
+
+  /* Ink — both naming schemes: sonner reads title-fg/desc-fg; toast.tsx reads fg/fg-desc */
+  --c-toast-title-fg:        var(--s-ink-primary);
+  --c-toast-desc-fg:         var(--s-ink-secondary);
+  --c-toast-fg:              var(--s-ink-primary);
+  --c-toast-fg-desc:         var(--s-ink-secondary);
+  --c-toast-close-fg:        var(--s-ink-muted);
+  --c-toast-close-fg-hover:  var(--s-ink-primary);
+
+  /* Action button — amber DFL brand */
+  --c-toast-action-fg:       var(--s-brand-solid);         /* #E07A4A */
+  --c-toast-action-border:   var(--s-brand-border);        /* rgba(224,122,74,0.22) */
+  --c-toast-action-bg-hover: var(--s-brand-subtle);        /* rgba(224,122,74,0.10) */
+
+  /* Uniform focus ring (ch.5.2): 2px bg gap + 1px amber ring */
+  --c-toast-focus-ring: 0 0 0 2px var(--c-toast-bg), 0 0 0 3px #E07A4A;
+
+  /* Semantic type backgrounds — hand-tuned semi-transparent tints over page bg.
+   * These (NOT the flat --s-*-subtle) are the DS-approved toast surfaces. */
+  --c-toast-success-bg:     rgba(20, 59, 34, 0.45);    /* green-900 @ 45% */
+  --c-toast-success-border: rgba(94, 194, 126, 0.25);  /* green-500 @ 25% */
+  --c-toast-success-fg:     var(--s-success-fg);        /* #7ad79a */
+
+  /* danger (toast.tsx) + error (sonner) — same underlying values */
+  --c-toast-danger-bg:      rgba(76, 26, 26, 0.45);    /* red-900 @ 45% */
+  --c-toast-danger-border:  rgba(224, 122, 122, 0.25); /* red-500 @ 25% */
+  --c-toast-danger-fg:      var(--s-danger-fg);         /* #e89898 */
+  --c-toast-error-bg:       rgba(76, 26, 26, 0.45);
+  --c-toast-error-border:   rgba(224, 122, 122, 0.25);
+  --c-toast-error-fg:       var(--s-danger-fg);
+
+  --c-toast-info-bg:        rgba(26, 43, 76, 0.45);    /* blue-900 @ 45% */
+  --c-toast-info-border:    rgba(122, 162, 224, 0.25); /* blue-500 @ 25% */
+  --c-toast-info-fg:        var(--s-info-fg);           /* #9ab9e8 */
+
+  --c-toast-warning-bg:     rgba(74, 59, 18, 0.45);    /* yellow-900 @ 45% */
+  --c-toast-warning-border: rgba(224, 176, 74, 0.25);  /* yellow-500 @ 25% */
+  --c-toast-warning-fg:     var(--s-warning-fg);        /* #f0c875 */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Component: Switch (--c-switch-*)
+ *   Layer 3 knobs. All values resolve to existing --s-* semantic tokens
+ *   except --c-switch-thumb-bg which maps to --p-sand-50 (warm off-white
+ *   has no semantic alias — intentional; the thumb sits on both dark and
+ *   amber surfaces and must contrast with both).
+ *
+ *   Fixes two bugs in the original shadcn output:
+ *     1. Thumb was bg-background → #0a0908 (near-black, invisible on track)
+ *        → now --c-switch-thumb-bg (#f6f1e7, warm off-white).
+ *     2. Focus ring was ring-2/ring-ring/ring-offset (outline approach)
+ *        → now --c-switch-focus-ring (box-shadow only, uniform DS contract).
+ *
+ *   PR: claude-main/refactor/atoms-switch
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Switch */
+  --c-switch-track-off-bg:        var(--s-surface-elevated);  /* #1f1c18 — elevated dark surface */
+  --c-switch-track-off-border:    var(--s-border-subtle);     /* #2a2622 — inset ring (via CSS border) */
+  --c-switch-track-on-bg:         var(--s-brand-solid);       /* #E07A4A — amber checked track */
+  --c-switch-track-on-bg-hover:   var(--s-brand-hover);       /* #ea915a — lighter amber on hover */
+  --c-switch-track-on-bg-active:  var(--s-brand-pressed);     /* #c2663b — darker amber on press */
+  --c-switch-thumb-bg:            var(--p-sand-50);           /* #f6f1e7 — warm off-white (no s-* alias) */
+  --c-switch-focus-ring:          0 0 0 2px var(--s-surface-page), 0 0 0 3px var(--s-border-focus);
+  --c-switch-disabled-opacity:    0.40;
+}
+
+  /* Textarea — uniform focus rings (DS v0 ch.5.2)
+   * Structure: 2px page-bg gap + 1px solid outer ring.
+   * Kept separate from the shared --c-input-ring-focus (single translucent spread)
+   * to avoid cross-PR conflicts with Input/Select refactors. */
+:root {
+  --c-textarea-ring-focus:       0 0 0 2px var(--s-surface-page), 0 0 0 3px var(--s-border-focus);
+  --c-textarea-ring-focus-error: 0 0 0 2px var(--s-surface-page), 0 0 0 3px var(--s-danger-solid);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * (The former duplicate "LAYER 3 — Toast component tokens" block was merged
+ *  into the single canonical --c-toast-* block above. Both Radix Toast
+ *  (toast.tsx) and Sonner (sonner.tsx) now read one consistent definition —
+ *  no more last-write-wins collision on the semantic tint surfaces.)
+ * ─────────────────────────────────────────────────────────────────────── */
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Accordion component tokens (Layer 3 — appended, do not edit blocks above)
+ * All values resolve to existing --s-* / --p-* tokens; no raw colour literals.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Divider between items */
+  --c-accordion-border:                var(--s-border-subtle);
+
+  /* Trigger text */
+  --c-accordion-trigger-fg:            var(--s-ink-primary);
+  --c-accordion-trigger-weight:        var(--p-weight-500);
+
+  /* Trigger backgrounds (rest = transparent, applied inline) */
+  --c-accordion-trigger-bg-hover:      var(--s-surface-raised);   /* #1a1714 — bg lift, not underline */
+  --c-accordion-trigger-bg-active:     var(--s-surface-elevated); /* #1f1c18 — press */
+
+  /* Content area */
+  --c-accordion-content-fg:            var(--s-ink-secondary);    /* #c9c0b4 */
+  --c-accordion-content-size:          var(--p-text-14);          /* 14px */
+
+  /* Chevron indicator */
+  --c-accordion-indicator-color:       var(--s-ink-muted);        /* #7d7568 — muted at rest */
+  --c-accordion-indicator-color-open:  var(--s-brand-solid);      /* #E07A4A — amber when open */
+
+  /* Shape */
+  --c-accordion-item-radius:           var(--p-radius-sm);        /* 4px */
+
+  /* Spacing */
+  --c-accordion-padding-x:             var(--p-space-4);          /* 16px */
+  --c-accordion-padding-y:             14px;                      /* intentional: between --p-space-3 (12) and --p-space-4 (16) */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — Breadcrumb (--c-breadcrumb-*)
+ *
+ * Resolves exclusively to Layer-2 semantic tokens (--s-*) and safe literal
+ * values. Never reference --p-* primitives directly — use --s-* aliases so
+ * the component responds correctly to surface-level theme overrides.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Typography */
+  --c-breadcrumb-font-size:       13px;         /* slightly below body — secondary chrome */
+  --c-breadcrumb-font-weight:     400;
+  --c-breadcrumb-gap:             6px;
+
+  /* Link colors */
+  --c-breadcrumb-link-fg:         var(--s-ink-muted);       /* ancestor links — recede */
+  --c-breadcrumb-link-fg-hover:   var(--s-ink-secondary);   /* hover lift */
+  --c-breadcrumb-link-fg-active:  var(--s-brand-fg);        /* most-recent clickable crumb */
+
+  /* Current page */
+  --c-breadcrumb-page-fg:         var(--s-ink-primary);     /* highest contrast — "you are here" */
+  --c-breadcrumb-page-weight:     500;                      /* weight-500 distinguishes from links */
+
+  /* Separator */
+  --c-breadcrumb-separator-fg:    var(--s-ink-disabled);    /* lowest contrast — structural only */
+  --c-breadcrumb-separator-size:  12px;                     /* smaller than body — de-emphasised */
+
+  /* Ellipsis collapse button */
+  --c-breadcrumb-ellipsis-size:   28px;                     /* 28×28px touch target */
+  --c-breadcrumb-ellipsis-radius: 4px;                      /* radius-sm */
+
+  /* Shape */
+  --c-breadcrumb-radius:          4px;                      /* radius-sm — for focus ring clipping */
+}
+
+  /* Collapsible (Molecules) — panel with animated reveal + amber trigger affordance.
+   * Resolves to existing --s-* semantic tokens; never touches --p-* primitives.
+   * Ring: double-layer box-shadow — 2px page-bg gap + 1px amber outer ring. */
+:root {
+  --c-collapsible-bg:               var(--s-surface-panel);
+  --c-collapsible-bg-hover:         var(--s-surface-raised);
+  --c-collapsible-border:           var(--s-border-subtle);
+  --c-collapsible-border-hover:     var(--s-border-strong);
+  --c-collapsible-radius:           var(--p-radius-md);
+  --c-collapsible-header-fg:        var(--s-ink-primary);
+  --c-collapsible-content-bg:       var(--s-surface-raised);
+  --c-collapsible-content-border:   var(--s-border-subtle);
+  --c-collapsible-item-fg:          var(--s-ink-secondary);
+  --c-collapsible-trigger-fg:       var(--s-ink-muted);
+  --c-collapsible-trigger-fg-hover: var(--s-brand-solid);
+  --c-collapsible-trigger-ring:     0 0 0 2px var(--s-surface-page), 0 0 0 3px #E07A4A;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — HoverCard component tokens (--c-hovercard-*)
+ *
+ * Panel uses the card/overlay radius tier (--p-radius-lg = 10px), NOT the
+ * input/button tier (--p-radius-md = 6px). Focus ring is the DS uniform
+ * double box-shadow: 2px page-bg gap + 3px amber outline.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  --c-hovercard-bg:         var(--s-surface-raised);    /* #1a1714 raised overlay */
+  --c-hovercard-border:     var(--s-border-subtle);     /* #2a2622 */
+  --c-hovercard-radius:     var(--p-radius-lg);         /* 10px — overlay/card tier */
+  --c-hovercard-padding:    var(--p-space-4);           /* 16px */
+  --c-hovercard-shadow:     var(--p-shadow);            /* 0 4px 12px rgba(0,0,0,0.45) */
+  --c-hovercard-width:      288px;
+  /* DS uniform focus ring: inner gap in page-bg colour + outer amber ring */
+  --c-hovercard-focus-ring: 0 0 0 2px var(--s-surface-page), 0 0 0 3px var(--s-brand-solid);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * InputOTP — component tokens (--c-otp-*)
+ *
+ * Layer 3 block. All values resolve through existing --s-* / --p-* tokens.
+ * Consumers can override any knob to retheme the OTP widget in isolation.
+ *
+ * Active focus ring: box-shadow 0 0 0 2px var(--background), 0 0 0 3px #E07A4A
+ * (the ONE uniform DFL ring — 2px page-bg gap + 1px amber outline; see §Focus Ring above).
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Geometry */
+  --c-otp-slot-w:              48px;                   /* was 36px (shadcn baseline) */
+  --c-otp-slot-h:              56px;                   /* was 36px — enlarged for touch + legibility */
+  --c-otp-slot-radius:         var(--p-radius-md);     /* 6px */
+  --c-otp-group-gap:           14px;                   /* gap between groups (not within) */
+
+  /* Backgrounds */
+  --c-otp-slot-bg:             var(--s-surface-raised);    /* empty slot */
+  --c-otp-slot-bg-filled:      var(--s-surface-elevated);  /* slot with digit / active */
+
+  /* Borders */
+  --c-otp-slot-border:         var(--s-border-subtle);     /* idle */
+  --c-otp-slot-border-active:  var(--s-border-focus);      /* amber #E07A4A — active slot */
+  --c-otp-slot-border-error:   var(--s-danger-solid);      /* invalid code */
+  --c-otp-slot-border-success: var(--s-success-solid);     /* verified code */
+
+  /* Typography — JetBrains Mono for unambiguous digit rendering (0/O, 1/l) */
+  --c-otp-slot-fg:             var(--s-ink-primary);
+  --c-otp-font:                var(--p-font-mono);     /* JetBrains Mono */
+  --c-otp-font-size:           20px;
+  --c-otp-font-weight:         600;
+}
+  /* Pagination — compound nav (DS v0 amber active tile + DS focus ring).
+   * All values resolve to existing --s-* or --p-* tokens — never raw hex. */
+:root {
+  --c-pagination-item-size:          34px;
+  --c-pagination-item-radius:        var(--p-radius-sm);       /* 4px  — square-ish tiles */
+  --c-pagination-nav-radius:         var(--p-radius-md);       /* 6px  — nav controls */
+  --c-pagination-item-font:          var(--p-text-13);         /* 13px */
+  --c-pagination-item-weight:        var(--p-weight-500);
+  --c-pagination-item-fg:            var(--s-ink-muted);       /* inactive tile label */
+  --c-pagination-item-fg-hover:      var(--s-ink-primary);
+  --c-pagination-item-bg-hover:      var(--s-surface-raised);
+  --c-pagination-active-bg:          var(--s-brand-solid);     /* #E07A4A amber solid fill */
+  --c-pagination-active-fg:          var(--p-sand-950);        /* #0a0908 dark on amber */
+  --c-pagination-active-weight:      var(--p-weight-600);
+  --c-pagination-nav-fg:             var(--s-ink-secondary);
+  --c-pagination-nav-fg-hover:       var(--s-ink-primary);
+  --c-pagination-nav-bg-hover:       var(--s-surface-raised);
+  --c-pagination-ellipsis-fg:        var(--s-ink-muted);
+  --c-pagination-disabled-opacity:   0.35;
+  --c-pagination-gap:                var(--p-space-1);         /* 4px between tiles */
+}
+
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * COMPONENT — PasswordInput (--c-passwordinput-*)
+ *
+ *   Layer 3 knobs for the PasswordInput molecule (Input atom + reveal toggle).
+ *   Resolves Tailwind-utility leaks (text-muted-foreground / hover:text-foreground)
+ *   to explicit DS semantic tokens so the toggle responds to theme overrides.
+ *
+ *   Input border / error tokens are shared with --c-input-* (no duplication).
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Toggle button ink */
+  --c-passwordinput-toggle-fg:       var(--s-ink-muted);    /* idle — was text-muted-foreground */
+  --c-passwordinput-toggle-fg-hover: var(--s-ink-primary);  /* hover — was hover:text-foreground */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — Component: Popover (--c-popover-*)
+ *
+ *   Floating content surface anchored to a trigger.
+ *   Built on @radix-ui/react-popover.
+ *
+ *   All values resolve to existing --s-* semantic or --p-* primitive tokens.
+ *   Never edit --s-* / --p-* here; only --c-popover-* additions allowed.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Surface — one step above raised for strong float contrast */
+  --c-popover-bg:      var(--s-surface-elevated);   /* #1f1c18 */
+  /* Foreground */
+  --c-popover-fg:      var(--s-ink-primary);
+  --c-popover-fg-muted: var(--s-ink-muted);
+  /* Border */
+  --c-popover-border:  var(--s-border-subtle);       /* #2a2622 */
+  /* Radius — overlays use lg (10px), not md (6px) which reads as input-level */
+  --c-popover-radius:  var(--p-radius-lg);            /* 10px */
+  /* Shadow — DS token, not Tailwind shadow-md */
+  --c-popover-shadow:  var(--p-shadow);               /* 0 4px 12px rgba(0,0,0,.45) */
+  /* Padding knob */
+  --c-popover-padding: var(--p-space-4);              /* 16px */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — Component: Select (--c-select-*)
+ *
+ *   12 knobs covering trigger surface, dropdown menu, items and states.
+ *   All values resolve to existing --s-* semantic tokens (no new primitives).
+ *   Focus ring is handled by .ds-focus-ring (above) — no separate token needed.
+ *
+ *   Trigger states:
+ *     resting  → --c-select-border (sand-700)
+ *     hover    → --c-select-border-hover (sand-600)
+ *     focus/open → --c-select-border-focus (amber-500) + 1px outline at 3px offset
+ *     disabled → opacity 0.45 (no border change)
+ *     error    → --c-select-border-error (danger-solid)
+ *
+ *   Item states:
+ *     hover/kbd-focus → --c-select-item-bg-hover (sand-850) — amber NEVER as hover bg
+ *     selected        → --c-select-item-bg-selected (amber 10% alpha) + check icon amber
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Trigger surface */
+  --c-select-bg:                var(--s-surface-raised);       /* sand-850 */
+  --c-select-fg:                var(--s-ink-primary);          /* sand-50 */
+  --c-select-placeholder:       var(--s-ink-muted);            /* sand-400 */
+  --c-select-radius:            var(--p-radius-md);            /* 6px */
+
+  /* Trigger border states */
+  --c-select-border:            var(--s-border-subtle);        /* sand-700 */
+  --c-select-border-hover:      var(--s-border-strong);        /* sand-600 */
+  --c-select-border-focus:      var(--s-border-focus);         /* amber-500 */
+  --c-select-border-error:      var(--s-danger-solid);         /* red-500 */
+
+  /* Chevron icon */
+  --c-select-icon-color:        var(--s-ink-muted);            /* sand-400 */
+  --c-select-icon-color-hover:  var(--s-ink-secondary);        /* sand-200 */
+
+  /* Dropdown menu surface */
+  --c-select-menu-bg:           var(--s-surface-elevated);     /* sand-800 */
+  --c-select-menu-border:       var(--s-border-subtle);        /* sand-700 */
+  --c-select-menu-shadow:       var(--p-shadow-lg);            /* 0 12px 30px rgba(0,0,0,.6) */
+  --c-select-menu-radius:       var(--p-radius-lg);            /* 10px */
+
+  /* Menu items */
+  --c-select-item-fg:           var(--s-ink-secondary);        /* sand-200 */
+  --c-select-item-fg-hover:     var(--s-ink-primary);          /* sand-50 */
+  --c-select-item-bg-hover:     var(--s-surface-raised);       /* sand-850 — NOT amber */
+  --c-select-item-bg-selected:  var(--s-brand-subtle);         /* amber 10% alpha */
+  --c-select-item-check-color:  var(--s-brand-solid);          /* amber-500 */
+
+  /* Group label + separator */
+  --c-select-label-fg:          var(--s-ink-muted);            /* sand-400 */
+  --c-select-separator-color:   var(--s-border-subtle);        /* sand-700 */
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * AppNavbar component tokens (--c-navbar-*)
+ *
+ *   Resolves to existing --s-* semantic tokens — do NOT hardcode hex here.
+ *   The navbar surface is ALWAYS --s-surface-page (dark-first per DFL DS v0).
+ *   The `theme` prop on AppNavbar controls only the toggle icon (Moon ↔ Sun),
+ *   not the background. Per-component overrides: set --c-navbar-* on a parent.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Structure */
+  --c-navbar-bg:                    var(--s-surface-panel);   /* batch2 appshell: elevated topbar (was surface-page) */
+  --c-navbar-border:                var(--s-border-subtle);
+  --c-navbar-h:                     var(--c-header-h);   /* batch2 appshell: indirect ref ==56px */   /* matches --c-header-h */
+  --c-navbar-px:                    var(--p-space-4);
+
+  /* Breadcrumb ink */
+  --c-navbar-breadcrumb-fg:         var(--s-ink-muted);
+  --c-navbar-breadcrumb-fg-current: var(--s-ink-primary);
+  --c-navbar-breadcrumb-sep:        var(--s-ink-muted);
+
+  /* Actions slot gap (between last crumb and injected CTA) */
+  --c-navbar-action-gap:            var(--p-space-2);
+}
+
+  /* AppSidebar organism — Layer 3 component tokens.
+   * All values resolve to existing --s-* semantic tokens.
+   * Override these to retheme the AppSidebar without touching semantics. */
+:root {
+  --c-appsidebar-bg:                 var(--s-surface-page);   /* batch2 appshell: sidebar flush w/ page (was surface-panel) */       /* #141210 — panel depth, NOT page bg */
+  --c-appsidebar-item-active-bg:     var(--s-brand-subtle);        /* rgba(224,122,74,0.10) — brand tint */
+  --c-appsidebar-item-active-fg:     var(--s-brand-fg);            /* #f0a872 — amber-300 text */
+  --c-appsidebar-item-active-border: var(--s-brand-solid);         /* #E07A4A — 3px left indicator */
+  --c-appsidebar-focus-ring-gap:     var(--s-surface-panel);       /* 2px gap matches sidebar panel bg */
+  --c-appsidebar-focus-ring-color:   var(--s-brand-solid);         /* 1px amber ring */
+}
+
+  /* Calendar — DFL DS v0 component tokens.
+   * All knobs resolve to --s-* semantic tokens; none touch --p-* primitives
+   * directly (except rgba tints that reference the amber primitive colour).
+   *
+   * Layer layout:
+   *   Container    --c-cal-bg / --c-cal-border / --c-cal-radius / --c-cal-padding
+   *   Nav buttons  --c-cal-nav-btn-*
+   *   Caption/head --c-cal-caption-fg / --c-cal-head-fg
+   *   Day cells    --c-cal-day-{radius,fg,bg-hover,fg-outside}
+   *   Today state  --c-cal-day-today-{bg,fg,border}   ← tinted, NOT filled
+   *   Selected     --c-cal-day-selected-{bg,fg,bg-hover}  ← solid amber fill
+   *   Range mid    --c-cal-range-mid-{bg,fg}           ← amber 14% tint
+   *   Range end    --c-cal-range-end-{bg,fg}           ← same solid fill as selected
+   *   Disabled     --c-cal-day-disabled-fg
+   */
+:root {
+  --c-cal-bg:                     var(--s-surface-panel);
+  --c-cal-border:                 var(--s-border-subtle);
+  --c-cal-radius:                 var(--p-radius-lg);
+  --c-cal-padding:                var(--p-space-4);
+}
+
+:root {
+  --c-cal-nav-btn-bg:             transparent;
+  --c-cal-nav-btn-bg-hover:       var(--s-surface-elevated);
+  --c-cal-nav-btn-fg:             var(--s-ink-muted);
+  --c-cal-nav-btn-fg-hover:       var(--s-ink-primary);
+  --c-cal-nav-btn-border:         var(--s-border-subtle);
+  --c-cal-nav-btn-border-hover:   var(--s-border-strong);
+  --c-cal-nav-btn-radius:         var(--p-radius-md);
+}
+
+:root {
+  --c-cal-caption-fg:             var(--s-ink-primary);
+  --c-cal-head-fg:                var(--s-ink-muted);
+}
+
+:root {
+  --c-cal-day-radius:             var(--p-radius-md);
+  --c-cal-day-fg:                 var(--s-ink-primary);
+  --c-cal-day-bg-hover:           var(--s-surface-elevated);
+  --c-cal-day-fg-outside:         var(--s-ink-disabled);
+}
+
+  /* Today: amber 12%-opacity tinted bg + 30%-opacity amber border.
+   * Intentionally LIGHTER than the selected fill so the two states are visually
+   * distinct even when both land on the same day. */
+:root {
+  --c-cal-day-today-bg:           rgba(224, 122, 74, 0.12);
+  --c-cal-day-today-fg:           var(--s-brand-fg);
+  --c-cal-day-today-border:       rgba(224, 122, 74, 0.30);
+}
+
+  /* Selected: solid amber fill (same brand-solid as button primary). */
+:root {
+  --c-cal-day-selected-bg:        var(--s-brand-solid);
+  --c-cal-day-selected-fg:        var(--p-sand-950);
+  --c-cal-day-selected-bg-hover:  var(--s-brand-hover);
+}
+
+  /* Range mid: amber 14% tint spanning the interior of a range selection. */
+:root {
+  --c-cal-range-mid-bg:           rgba(224, 122, 74, 0.14);
+  --c-cal-range-mid-fg:           var(--s-brand-fg);
+}
+
+  /* Range start / end caps: same solid fill as selected day. */
+:root {
+  --c-cal-range-end-bg:           var(--s-brand-solid);
+  --c-cal-range-end-fg:           var(--p-sand-950);
+}
+
+  /* Disabled: use --s-ink-disabled at 0.45 opacity via the component class. */
+:root {
+  --c-cal-day-disabled-fg:        var(--s-ink-disabled);
+}
+
+  /* Carousel — nav buttons + dot indicators (Layer 3 component knobs).
+   * All values resolve to existing --s-* semantic tokens (or --p-* where no
+   * semantic alias exists, e.g. amber-400 hover ink via --s-brand-hover).
+   * Consumed by CarouselPrevious, CarouselNext, CarouselDots in carousel.tsx. */
+:root {
+  --c-carousel-nav-bg:           var(--s-surface-elevated);   /* default button bg */
+  --c-carousel-nav-border:       var(--s-border-subtle);      /* default button border */
+  --c-carousel-nav-fg:           var(--s-ink-secondary);      /* default arrow color */
+  --c-carousel-nav-bg-hover:     var(--s-brand-subtle);       /* hover/focus bg: amber 10% */
+  --c-carousel-nav-border-hover: var(--s-brand-border);       /* hover/focus border: amber 22% */
+  --c-carousel-nav-fg-hover:     var(--s-brand-hover);        /* hover/focus arrow: amber-400 */
+  --c-carousel-nav-fg-disabled:  var(--s-ink-disabled);       /* disabled arrow (no opacity hack) */
+  --c-carousel-dot-bg:           var(--s-border-strong);      /* inactive dot */
+  --c-carousel-dot-active:       var(--s-brand-solid);        /* active dot: amber-500 */
+  --c-carousel-dot-radius:       var(--p-radius-pill);        /* dot shape */
+  --c-carousel-radius:           var(--p-radius-lg);          /* track border-radius */
+}
+
+  /* Chart — tooltip + chrome component-token knobs.
+   * Series palette lives in the Compatibility aliases block as --chart-1…5.
+   * These knobs cover the tooltip surface and structural chrome only. */
+:root {
+  --c-chart-tooltip-bg:         var(--s-surface-elevated);
+  --c-chart-tooltip-border:     var(--s-border-strong);
+  --c-chart-tooltip-fg:         var(--s-ink-primary);
+  --c-chart-tooltip-muted-fg:   var(--s-ink-muted);
+  --c-chart-tooltip-radius:     var(--p-radius-md);
+  --c-chart-tooltip-shadow:     var(--p-shadow-lg);
+  --c-chart-grid:               var(--s-border-subtle);
+  --c-chart-axis-fg:            var(--s-ink-muted);
+}
+  /* Command palette — --c-command-*
+   * Layer 3 additions for Organisms/Command. All values resolve to existing
+   * --s-* semantic tokens (no new primitives added).
+   * Fix: bg-accent (#E07A4A) as item hover → surface-elevated + amber left-bar.
+   * Fix: outline-hidden on input → uniform DFL focus ring via box-shadow.
+   * Fix: shortcut font → --s-font-mono (JetBrains Mono). */
+:root {
+  --c-command-bg:               var(--s-surface-raised);     /* #1a1714 */
+  --c-command-border:           var(--s-border-subtle);      /* #2a2622 */
+  --c-command-radius:           var(--p-radius-lg);          /* 10px */
+  --c-command-shadow:           var(--p-shadow);             /* 0 4px 12px … */
+  --c-command-input-sep:        var(--s-border-subtle);      /* separator below input */
+  --c-command-group-fg:         var(--s-ink-muted);          /* headings + icons default */
+  --c-command-item-fg:          var(--s-ink-secondary);      /* item text default */
+  --c-command-item-hover-bg:    var(--s-surface-elevated);   /* #1f1c18 — replaces bg-accent */
+  --c-command-item-hover-fg:    var(--s-ink-primary);        /* #f6f1e7 on hover/selected */
+  --c-command-item-icon-hover-fg: var(--s-ink-secondary);    /* #c9c0b4 icon on hover */
+  --c-command-item-sel-bar:     var(--s-brand-solid);        /* amber 2px left indicator */
+  --c-command-shortcut-fg:      var(--s-ink-muted);          /* shortcut text */
+  --c-command-sep:              var(--s-border-subtle);      /* CommandSeparator line */
+  --c-command-empty-fg:         var(--s-ink-muted);          /* empty state text */
+  --c-command-focus-color:      var(--s-border-focus);       /* amber #E07A4A for focus ring */
+}
+
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * LAYER 3 — ContextMenu component tokens (--c-contextmenu-*)
+ *
+ * Resolves DS token hierarchy for right-click / context menus.
+ * All knobs reference existing --s-* / --p-* tokens.
+ * ─────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Panel */
+  --c-contextmenu-bg:              var(--s-surface-elevated);
+  --c-contextmenu-border:          var(--s-border-subtle);
+  --c-contextmenu-radius:          var(--p-radius-md);
+  --c-contextmenu-shadow:          var(--p-shadow-lg), 0 0 0 1px var(--s-border-subtle);
+
+  /* Items — default text */
+  --c-contextmenu-item-fg:         var(--s-ink-secondary);
+
+  /* Items — hover / keyboard-highlighted (Radix data-[highlighted]) */
+  --c-contextmenu-item-hover-bg:   var(--s-brand-subtle);
+  --c-contextmenu-item-hover-fg:   var(--s-brand-fg);
+
+  /* Items — keyboard-focus inset ring (layered on top of hover bg) */
+  --c-contextmenu-item-focus-ring: inset 0 0 0 1px rgba(224, 122, 74, 0.35);
+
+  /* Label / group heading */
+  --c-contextmenu-label-fg:        var(--s-ink-muted);
+
+  /* Separator */
+  --c-contextmenu-separator:       var(--s-border-subtle);
+
+  /* Shortcut badges — same muted hue as label */
+  --c-contextmenu-shortcut-fg:     var(--s-ink-muted);
+
+  /* Trigger focus ring (outer off-element DS spec ring) */
+  --c-contextmenu-trigger-ring: 0 0 0 2px var(--s-surface-page), 0 0 0 3px var(--s-border-focus);
+}
+  /* DropdownMenu — Organisms layer (DS v0 brand fixes)
+   *
+   * Fixes four critical brand failures vs vanilla shadcn:
+   *   1. Focus ring: 2px bg-gap + 1px amber ring (box-shadow), NOT amber bg-flood
+   *   2. Separator: --s-border-subtle (#2a2622) > popover bg (#1a1714) — now visible
+   *   3. Label: --s-ink-muted (#7d7568) + uppercase + tight tracking — visual hierarchy
+   *   4. Shortcut: --p-font-mono (JetBrains Mono) — brand-spec font for ⌘ keys
+   */
+:root {
+  --c-dropdownmenu-bg:                var(--s-surface-raised);
+  --c-dropdownmenu-border:            var(--s-border-subtle);
+  --c-dropdownmenu-radius:            var(--p-radius-md);
+  --c-dropdownmenu-item-radius:       var(--p-radius-sm);
+  --c-dropdownmenu-shadow:            0 4px 12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
+  --c-dropdownmenu-item-fg:           var(--s-ink-secondary);
+  --c-dropdownmenu-item-bg-hover:     var(--s-surface-elevated);
+  --c-dropdownmenu-item-fg-hover:     var(--s-ink-primary);
+  --c-dropdownmenu-label-fg:          var(--s-ink-muted);
+  --c-dropdownmenu-separator:         var(--s-border-subtle);
+  --c-dropdownmenu-shortcut-fg:       var(--s-ink-muted);
+  --c-dropdownmenu-check-color:       var(--s-brand-solid);
+  --c-dropdownmenu-destructive-fg:    var(--s-danger-fg);
+  --c-dropdownmenu-destructive-bghov: var(--s-danger-subtle);
+}
+  /* Focus ring: 2px gap (popover bg) + 1px amber — uniform DS ring spec.
+   * The gap colour matches the popover bg so the ring "floats" above the item. */
+:root {
+  --c-dropdownmenu-focus-ring:        0 0 0 2px var(--s-surface-raised), 0 0 0 3px var(--s-brand-solid);
+}
+
+
+  /* Form — component knobs for the React Hook Form wrapper */
+:root {
+  --c-form-gap:              var(--p-space-2);        /* 8px — gap between label / control / hint / message */
+  --c-form-section-gap:      var(--p-space-5);        /* 20px — gap between FormItems */
+  --c-form-label-fg:         var(--s-ink-secondary);
+  --c-form-label-error-fg:   var(--s-danger-fg);      /* softer #e89898 vs full-sat #e07a7a */
+  --c-form-description-fg:   var(--s-ink-muted);
+  --c-form-message-error-fg: var(--s-danger-fg);
+}
+
+
+/* ======================================================================
+ * DS-token redesign BATCH 2 — 29-component integration (new component tokens)
+ * ====================================================================== */
+:root {
+  /* -- organisms-gantt -- */
+  --c-gantt-bg:          var(--s-surface-panel);
+  --c-gantt-header-bg:   var(--s-surface-raised);
+  --c-gantt-border:      var(--s-border-subtle);
+  --c-gantt-bar-radius:  var(--p-radius-sm);
+  --c-gantt-dep-color:   var(--s-brand-solid);
+  --c-gantt-name-col:    320px;
+
+  /* -- organisms-loginpage -- */
+  --c-loginpage-card-bg:      var(--c-card-bg);        /* #141210 via --s-surface-panel */
+  --c-loginpage-card-border:  var(--c-card-border);    /* #2a2622 via --s-border-subtle  */
+  --c-loginpage-card-radius:  var(--c-card-radius);    /* 10px via --p-radius-lg         */
+  --c-loginpage-card-shadow:  var(--p-shadow-lg);      /* 0 12px 30px rgba(0,0,0,0.6)   */
+  --c-loginpage-error-bg:     var(--s-danger-subtle);  /* rgba(224,122,122,0.12) */
+  --c-loginpage-error-border: var(--s-danger-border);  /* rgba(224,122,122,0.40) */
+  --c-loginpage-error-fg:     var(--s-danger-fg);      /* #e89898 via --p-red-400 */
+  --c-loginpage-focus-ring:
+
+  /* -- organisms-loginscreen -- */
+  --c-loginscreen-bg:           var(--s-surface-page);
+  --c-loginscreen-title-font:   var(--s-font-display);
+  --c-loginscreen-title-size:   var(--p-text-24);
+  --c-loginscreen-error-fg:     var(--s-danger-fg);
+  --c-loginscreen-footer-fg:    var(--s-brand-fg);
+  --c-loginscreen-focus-gap:    var(--s-surface-page);
+  --c-loginscreen-focus-color:  var(--s-border-focus);
+
+  /* -- organisms-menubar -- */
+  --c-menubar-bar-bg:           var(--s-surface-panel);     /* #141210 — distinct from page bg */
+  --c-menubar-bar-border:       var(--s-border-subtle);     /* #2a2622 */
+  --c-menubar-bar-radius:       var(--p-radius-md);         /* 6px */
+  --c-menubar-trigger-fg:       var(--s-ink-secondary);     /* #c9c0b4 — idle */
+  --c-menubar-trigger-bg-hover: var(--s-surface-raised);    /* #1a1714 */
+  --c-menubar-trigger-bg-open:  var(--s-surface-elevated);  /* #1f1c18 */
+  --c-menubar-trigger-radius:   var(--p-radius-sm);         /* 4px */
+  --c-menubar-content-bg:       var(--s-surface-raised);    /* #1a1714 — dropdown panel */
+  --c-menubar-item-fg:          var(--s-ink-primary);       /* #f6f1e7 */
+  --c-menubar-item-bg-hover:    var(--s-brand-subtle);      /* rgba(224,122,74,0.10) — NOT solid amber */
+  --c-menubar-item-radius:      var(--p-radius-sm);         /* 4px */
+  --c-menubar-shortcut-font:    var(--p-font-mono);         /* JetBrains Mono — DS kbd rule */
+  --c-menubar-shortcut-fg:      var(--s-ink-muted);         /* #7d7568 */
+  --c-menubar-indicator-color:  var(--s-brand-solid);       /* #E07A4A — checkbox/radio checked mark */
+  --c-menubar-dest-fg:          var(--s-danger-fg);         /* #e89898 */
+  --c-menubar-dest-bg-hover:    var(--s-danger-subtle);     /* rgba(224,122,122,0.12) */
+  --c-menubar-ring-trigger:     0 0 0 2px var(--c-menubar-bar-bg), 0 0 0 3px var(--s-border-focus);
+  --c-menubar-ring-item:        0 0 0 2px var(--c-menubar-content-bg), 0 0 0 3px var(--s-border-focus);
+
+  /* -- organisms-navigationmenu -- */
+  --c-nav-bg:                  transparent;
+  --c-nav-fg:                  var(--s-ink-secondary);
+  --c-nav-trigger-radius:      var(--p-radius-md);      /* 6px */
+  --c-nav-trigger-h:           36px;
+  --c-nav-trigger-px:          14px;
+  --c-nav-trigger-hover-bg:    var(--s-surface-elevated);
+  --c-nav-trigger-hover-fg:    var(--s-ink-primary);
+  --c-nav-trigger-open-bg:     var(--s-brand-subtle);
+  --c-nav-trigger-open-fg:     var(--s-brand-fg);
+  --c-nav-trigger-open-border: var(--s-brand-border);
+  --c-nav-content-bg:          var(--s-surface-raised);
+  --c-nav-content-border:      var(--s-border-subtle);
+  --c-nav-content-radius:      8px;
+  --c-nav-content-shadow:      var(--p-shadow);
+  --c-nav-item-hover-bg:       var(--s-surface-elevated);
+  --c-nav-item-hover-fg:       var(--s-ink-primary);
+  --c-nav-item-active-bg:      var(--s-brand-subtle);
+  --c-nav-item-active-fg:      var(--s-brand-fg);
+  --c-nav-item-active-border:  var(--s-brand-solid);
+  --c-nav-indicator-color:     var(--s-border-subtle);
+
+  /* -- organisms-publishdrawer -- */
+  --c-publish-drawer-platform-fg: var(--s-danger-solid);
+  --c-publish-drawer-success-fg:  var(--s-success-solid);
+  --c-publish-drawer-footer-bg:   var(--s-surface-raised);
+  --c-publish-drawer-header-sep:  var(--s-border-subtle);
+  --c-publish-drawer-postid-font: var(--p-font-mono);
+
+  /* -- organisms-resizable -- */
+  --c-resizable-handle-track:           var(--s-border-subtle);   /* idle         */
+  --c-resizable-handle-track-hover:     var(--s-border-strong);   /* pointer-over */
+  --c-resizable-handle-track-focus:     var(--s-brand-solid);     /* :focus-visible */
+  --c-resizable-handle-track-drag:      var(--s-brand-solid);     /* dragging     */
+  --c-resizable-grip-bg:                var(--s-surface-elevated); /* idle bg      */
+  --c-resizable-grip-border:            var(--s-border-subtle);    /* idle border  */
+  --c-resizable-grip-border-hover:      var(--s-border-strong);    /* hover border */
+  --c-resizable-grip-border-focus:      var(--s-brand-solid);      /* focus border */
+  --c-resizable-grip-border-drag:       var(--s-brand-solid);      /* drag border  */
+  --c-resizable-grip-icon:              var(--s-ink-muted);        /* idle dots    */
+  --c-resizable-grip-icon-drag:         var(--s-brand-solid);      /* drag dots    */
+
+  /* -- organisms-sheet -- */
+  --c-sheet-bg:            var(--c-dialog-bg);      /* --s-surface-raised = #1a1714  */
+  --c-sheet-border:        var(--c-dialog-border);  /* --s-border-subtle  = #2a2622  */
+  --c-sheet-shadow:        var(--c-dialog-shadow);  /* 0 24px 60px rgba(0,0,0,0.7)  */
+  --c-sheet-scrim:         var(--c-dialog-scrim);   /* rgba(10,9,8,0.76) — token-native */
+  --c-sheet-radius-bottom: var(--p-radius-xl);      /* 14px                           */
+  --c-sheet-close-ring:    0 0 0 2px var(--c-sheet-bg), 0 0 0 3px #E07A4A;
+
+  /* -- organisms-sidebar -- */
+  --c-sidebar-bg:                var(--s-surface-page);
+  --c-sidebar-item-fg:           var(--s-ink-secondary);
+  --c-sidebar-item-hover-bg:     var(--s-surface-raised);
+  --c-sidebar-item-active-bg:    var(--s-brand-subtle);     /* rgba(224,122,74,.10) amber tint */
+  --c-sidebar-item-active-fg:    var(--s-brand-solid);      /* #E07A4A amber text + icon */
+  --c-sidebar-item-active-bar-w: 2px;                       /* left-edge indicator width */
+  --c-sidebar-group-label-fg:    var(--s-ink-muted);        /* #7d7568 muted, Barlow Condensed */
+  --c-sidebar-ring:              var(--s-border-focus);     /* #E07A4A */
+  --c-sidebar-border:            var(--s-border-subtle);
+
+  /* -- organisms-table -- */
+  --c-table-row-selected-bg:     var(--s-brand-subtle);  /* rgba(224,122,74,0.10) */
+  --c-table-row-selected-border: var(--s-brand-border);  /* rgba(224,122,74,0.22) */
+  --c-table-caption-fg:          var(--s-ink-muted);     /* #7d7568 */
+
+  /* -- organisms-usermenu -- */
+  --c-usermenu-trigger-hover-bg:           rgba(246, 241, 231, 0.06);
+  --c-usermenu-trigger-open-bg:            rgba(246, 241, 231, 0.08);
+  --c-usermenu-panel-bg:                   var(--s-surface-elevated);   /* #1f1c18 */
+  --c-usermenu-panel-width:                208px;    /* replaces hardcoded w-52 */
+  --c-usermenu-item-hover-bg:              var(--s-border-subtle);
+  --c-usermenu-danger-fg:                  var(--s-danger-fg);          /* #e89898 */
+  --c-usermenu-danger-hover-bg:            var(--s-danger-subtle);      /* rgba(224,122,122,0.12) */
+  --c-usermenu-item-focus-ring:            0 0 0 2px var(--s-surface-elevated), 0 0 0 3px var(--s-border-focus);
+  --c-usermenu-item-danger-focus-ring:     0 0 0 2px var(--s-surface-elevated), 0 0 0 3px var(--s-danger-fg);
+
+  /* -- templates-dashboard -- */
+  --c-dashboard-stat-font:       var(--s-font-mono);
+  --c-dashboard-stat-focus-ring: 0 0 0 2px var(--s-surface-page), 0 0 0 3px var(--s-brand-solid);
+
+  /* -- templates-kanban -- */
+  --c-kanban-col-bg:              var(--s-surface-panel);        /* #141210 */
+  --c-kanban-col-border:          var(--s-border-subtle);        /* #2a2622 */
+  --c-kanban-col-radius:          var(--p-radius-lg);            /* 10px */
+  --c-kanban-accent-todo:         var(--s-border-strong);        /* neutral #3a3530 */
+  --c-kanban-accent-doing:        var(--s-brand-solid);          /* amber  #E07A4A */
+  --c-kanban-accent-review:       var(--s-info-solid);           /* blue   #7aa2e0 */
+  --c-kanban-accent-done:         var(--s-success-solid);        /* green  #5ec27e */
+  --c-kanban-count-bg:            var(--s-surface-elevated);     /* #1f1c18 */
+  --c-kanban-count-border:        var(--s-border-subtle);        /* #2a2622 */
+  --c-kanban-card-bg:             var(--s-surface-raised);       /* #1a1714 — floats above column */
+  --c-kanban-card-bg-hover:       var(--s-surface-elevated);     /* #1f1c18 — hover lift */
+  --c-kanban-card-border:         var(--s-border-subtle);        /* #2a2622 */
+  --c-kanban-card-border-hover:   var(--s-border-strong);        /* #3a3530 */
+  --c-kanban-card-radius:         var(--p-radius-md);            /* 6px */
+  --c-kanban-card-drag-border:    var(--s-brand-border);         /* rgba(224,122,74,0.22) */
+  --c-kanban-card-drag-bg:        var(--s-surface-elevated);     /* #1f1c18 */
+  --c-kanban-card-drag-shadow:    var(--p-shadow-lg);            /* 0 12px 30px rgba(0,0,0,0.6) */
+  --c-kanban-card-focus-ring:     0 0 0 2px var(--s-surface-page), 0 0 0 3px #E07A4A;
+  --c-kanban-card-done-opacity:   0.6;
+  --c-kanban-dropzone-border:     var(--s-border-strong);        /* 1.5px dashed #3a3530 */
+  --c-kanban-dropzone-fg:         var(--s-ink-muted);            /* #7d7568 */
+  --c-kanban-id-font:             var(--s-font-mono);            /* JetBrains Mono */
+  --c-kanban-id-fg:               var(--s-ink-muted);            /* #7d7568 */
+
+  /* -- templates-listpage -- */
+  --c-listpage-pagination-active-bg:     var(--s-brand-subtle);   /* rgba(224,122,74,0.10) */
+  --c-listpage-pagination-active-border: var(--s-brand-border);   /* rgba(224,122,74,0.22) */
+  --c-listpage-pagination-active-fg:     var(--s-brand-solid);    /* #E07A4A amber text     */
+  --c-listpage-cell-id-fg:     var(--s-ink-secondary);  /* #c9c0b4 — ID is metadata, not primary data  */
+  --c-listpage-cell-amount-fg: var(--s-ink-primary);    /* #f6f1e7 — amount is salient, full contrast  */
+  --c-listpage-empty-icon-bg:     var(--s-surface-elevated); /* #1f1c18 — raised container              */
+  --c-listpage-empty-icon-border: var(--s-border-subtle);    /* #2a2622 — container stroke               */
+  --c-listpage-empty-icon-fg:     var(--s-ink-muted);        /* #7d7568 — icon recedes, not accent       */
+  --c-listpage-empty-title-fg:    var(--s-ink-secondary);    /* #c9c0b4 — bold title, not primary ink    */
+  --c-listpage-empty-sub-fg:      var(--s-ink-muted);        /* #7d7568 — supporting copy, fully muted   */
+
+  /* -- templates-appshell -- */
+  --c-appshell-nav-active-bg:     var(--s-brand-subtle);    /* amber 10% fill on active item */
+  --c-appshell-nav-active-fg:     var(--s-brand-solid);     /* #E07A4A text on active item */
+  --c-appshell-nav-active-border: var(--s-brand-border);    /* amber 22% border on active item */
+  --c-appshell-nav-hover-bg:      var(--s-surface-raised);  /* #1a1714 hover surface */
+  --c-appshell-nav-hover-fg:      var(--s-ink-primary);     /* #f6f1e7 hover text */
+  --c-appshell-focus-ring: 0 0 0 2px var(--s-surface-page), 0 0 0 3px var(--s-brand-solid);
+}
+
+/* AppShell interactive focus ring (box-shadow, not outline — survives sidebar overflow:hidden). */
+.c-appshell-focus:focus-visible {
+  outline: none;
+  box-shadow: var(--c-appshell-focus-ring);
+  transition: none;
+}