@keenmate/pure-css 1.0.0-rc07 → 1.0.0-rc09

package/src/scss/_base-css-variables.scss

@@ -1,655 +1,429 @@
-// ============================================================================
-// BASE CSS VARIABLES OUTPUT MIXIN
-// ============================================================================
-// This mixin outputs all $base-* SCSS variables as --base-* CSS custom properties.
-// Include this in themes to enable web component theming.
-//
-// Usage in theme file:
-//   @import '../base-css-variables';
-//   :root {
-//     @include output-base-css-variables;
-//   }
-//
-// Web components consume these via fallback chains:
-//   --ms-accent-color: var(--base-accent-color, #3b82f6);
-// ============================================================================
-
-// Make variables resolvable when this file is loaded as a @use module
-// (e.g. from main.scss). Legacy @import callers (themes) are unaffected —
-// Sass places @use'd members into the importing file's global scope, where
-// theme-set overrides already live.
-@use 'variables/index' as *;
-
-@mixin output-base-css-variables {
-  // === Accent Colors ===
-  --base-accent-color: #{$base-accent-color};
-  --base-accent-color-hover: #{$base-accent-color-hover};
-  --base-accent-color-active: #{$base-accent-color-active};
-  --base-accent-color-light: #{$base-accent-color-light};
-  --base-accent-color-light-hover: #{$base-accent-color-light-hover};
-
-  // === Text Colors ===
-  --base-text-color-1: #{$base-text-color-1};
-  --base-text-color-2: #{$base-text-color-2};
-  --base-text-color-3: #{$base-text-color-3};
-  --base-text-color-4: #{$base-text-color-4};
-  --base-text-color-on-accent: #{$base-text-color-on-accent};
-
-  // === Background Colors (semantic) ===
-  --base-main-bg: #{$base-main-bg};
-  --base-page-bg: #{$base-page-bg};
-  --base-subtle-bg: #{$base-subtle-bg};
-  --base-inverse-bg: #{$base-inverse-bg};
-  --base-overlay-bg: #{$base-overlay-bg};
-  --base-shadow-color: #{$base-shadow-color};
-  --base-hover-bg: #{$base-hover-bg};
-  --base-active-bg: #{$base-active-bg};
-  --base-disabled-bg: #{$base-disabled-bg};
-  --base-elevated-bg: #{$base-elevated-bg};
-
-  // === Text on inverse surfaces ===
-  --base-text-inverted: #{$base-text-inverted};
-
-  // === Border Colors ===
-  --base-border-color: #{$base-border-color};
-  --base-border: #{$base-border};
-  --base-checkbox-border-color: #{$base-checkbox-border-color};
-
-  // === Input Fields ===
-  --base-input-bg: #{$base-input-bg};
-  --base-input-color: #{$base-input-color};
-  --base-input-border: #{$base-input-border};
-  --base-input-border-color: #{$base-input-border-color};
-  --base-input-border-hover: #{$base-input-border-hover};
-  --base-input-border-focus: #{$base-input-border-focus};
-  --base-input-placeholder-color: #{$base-input-placeholder-color};
-  --base-input-bg-disabled: #{$base-input-bg-disabled};
-  --base-input-clear-color: #{$base-input-clear-color};
-  --base-input-clear-bg-hover: #{$base-input-clear-bg-hover};
-
-  // === Input Size Heights ===
-  --base-input-size-xs-height: #{$base-input-size-xs-height};
-  --base-input-size-sm-height: #{$base-input-size-sm-height};
-  --base-input-size-md-height: #{$base-input-size-md-height};
-  --base-input-size-lg-height: #{$base-input-size-lg-height};
-  --base-input-size-xl-height: #{$base-input-size-xl-height};
-
-  // === Dropdown/Popover ===
-  --base-dropdown-bg: #{$base-dropdown-bg};
-  --base-dropdown-border: #{$base-dropdown-border};
-  --base-dropdown-box-shadow: #{$base-dropdown-box-shadow};
-
-  // === Tooltip ===
-  --base-tooltip-bg: #{$base-tooltip-bg};
-  --base-tooltip-text-color: #{$base-tooltip-text-color};
-  --base-tooltip-color: #{$base-tooltip-text-color};  // alias consumed by web-grid
-
-  // === Contextual Colors - Success ===
-  --base-success-color: #{$base-success-color};
-  --base-success-bg: #{$base-success-bg};
-  --base-success-color-hover: #{$base-success-color-hover};
-  --base-success-bg-light: #{$base-success-bg-light};
-  --base-success-bg-subtle: #{$base-success-bg-subtle};
-  --base-success-border: #{$base-success-border};
-  --base-success-text: #{$base-success-text};
-  --base-success-text-light: #{$base-success-text-light};
-  --base-text-on-success: #{$base-text-on-success};
-
-  // === Contextual Colors - Danger ===
-  --base-danger-color: #{$base-danger-color};
-  --base-danger-bg: #{$base-danger-bg};
-  --base-danger-color-hover: #{$base-danger-color-hover};
-  --base-danger-bg-light: #{$base-danger-bg-light};
-  --base-danger-bg-subtle: #{$base-danger-bg-subtle};
-  --base-danger-border: #{$base-danger-border};
-  --base-danger-text: #{$base-danger-text};
-  --base-danger-text-light: #{$base-danger-text-light};
-  --base-text-on-danger: #{$base-text-on-danger};
-
-  // === Contextual Colors - Warning ===
-  --base-warning-color: #{$base-warning-color};
-  --base-warning-bg: #{$base-warning-bg};
-  --base-warning-color-hover: #{$base-warning-color-hover};
-  --base-warning-bg-light: #{$base-warning-bg-light};
-  --base-warning-bg-subtle: #{$base-warning-bg-subtle};
-  --base-warning-border: #{$base-warning-border};
-  --base-warning-text: #{$base-warning-text};
-  --base-warning-text-light: #{$base-warning-text-light};
-  --base-text-on-warning: #{$base-text-on-warning};
-
-  // === Contextual Colors - Info ===
-  --base-info-color: #{$base-info-color};
-  --base-info-color-hover: #{$base-info-color-hover};
-  --base-info-bg-light: #{$base-info-bg-light};
-  --base-info-bg-subtle: #{$base-info-bg-subtle};
-  --base-info-border: #{$base-info-border};
-  --base-info-text: #{$base-info-text};
-  --base-info-text-light: #{$base-info-text-light};
-  --base-text-on-info: #{$base-text-on-info};
-
-  // === Interactive States ===
-  --base-hover-overlay: #{$base-hover-overlay};
-  --base-active-overlay: #{$base-active-overlay};
-  --base-focus-ring-color: #{$base-focus-ring-color};
-  --base-focus-ring-width: #{$base-focus-ring-width};
-
-  // === Typography ===
-  --base-font-family: #{$base-font-family};
-  --base-font-family-mono: #{$base-font-family-mono};
-  --base-font-size-2xs: #{$base-font-size-2xs};
-  --base-font-size-xs: #{$base-font-size-xs};
-  --base-font-size-sm: #{$base-font-size-sm};
-  --base-font-size-base: #{$base-font-size-base};
-  --base-font-size-lg: #{$base-font-size-lg};
-  --base-font-size-xl: #{$base-font-size-xl};
-  --base-font-size-2xl: #{$base-font-size-2xl};
-  --base-font-weight-normal: #{$base-font-weight-normal};
-  --base-font-weight-medium: #{$base-font-weight-medium};
-  --base-font-weight-semibold: #{$base-font-weight-semibold};
-  --base-font-weight-bold: #{$base-font-weight-bold};
-  --base-line-height-tight: #{$base-line-height-tight};
-  --base-line-height-normal: #{$base-line-height-normal};
-  --base-line-height-relaxed: #{$base-line-height-relaxed};
-
-  // === Border Radius ===
-  --base-border-radius-sm: #{$base-border-radius-sm};
-  --base-border-radius-md: #{$base-border-radius-md};
-  --base-border-radius-lg: #{$base-border-radius-lg};
-
-  // === Rem base for web components ===
-  --base-rem: #{$base-rem};
-}
-
-// ============================================================================
-// DERIVED TOKENS — TEXT CONTRAST TIERS + SURFACE TINTS
-// ============================================================================
-// These tokens use `color-mix(... var(--pc-text-color-1) ...)` to derive
-// theme-aware contrast levels. They MUST be emitted at every selector that
-// could carry an override of --pc-text-color-1, because CSS custom property
-// substitution bakes nested var() references at the *defining element*, not
-// the using element. If we only defined these at `:root, .pc-mode-light`,
-// the light-mode text colour would be frozen into the value, and elements
-// inside `.pc-mode-dark` (which overrides --pc-text-color-1 at body) would
-// inherit the light-mode-baked tier values → low contrast on dark surfaces.
-//
-// Emitting at all three selectors causes each scope to recompute the tiers
-// against its own --pc-text-color-1. The selector list `:root, .pc-mode-light,
-// .pc-mode-dark` covers html, body in light mode, and body in dark mode —
-// regardless of which class layout each theme uses for mode switching.
-//
-// This is a TOP-LEVEL rule (not inside the mixin) because themes only call
-// the mixin from their light-mode block; they don't call it again in the
-// dark-mode block. Emitting at framework level means themes get correct
-// dark-mode tiers without changing any theme code.
-//
-// Override these per-theme by redefining them in the same scope you
-// override --pc-text-color-1.
-// ============================================================================
-
-:root,
-.pc-mode-light,
-.pc-mode-dark {
-  --pc-text-strong:    color-mix(in srgb, var(--pc-text-color-1) 85%, transparent);
-  --pc-text-secondary: color-mix(in srgb, var(--pc-text-color-1) 70%, transparent);
-  --pc-text-tertiary:  color-mix(in srgb, var(--pc-text-color-1) 55%, transparent);
-  --pc-surface-hover:  color-mix(in srgb, var(--pc-text-color-1) 4%, transparent);
-  --pc-surface-track:  color-mix(in srgb, var(--pc-text-color-1) 12%, transparent);
-}
-
-// ============================================================================
-// PURE-CSS FOUNDATION TOKENS — the base runtime custom-property contract
-// ============================================================================
-// pure-css is a *foundation*: it ships only the BASE token contract — the
-// tokens its own CSS (grid / utilities / reboot / scrollbars) consumes, plus
-// the universal theming primitives (surfaces, text, accent, links, border,
-// the semantic role identities + their utility text colours, the theme
-// palette slots, and the border-radius scale).
-//
-// COMPONENT tokens (buttons, cards, tables, modals, badges, tooltips, panels,
-// command palette, multiselect, sentiment scale, form spacing, the derived
-// contextual/alert surfaces, admin layout chrome, …) are NOT emitted here —
-// they are pure-admin's contract, emitted by pure-admin's
-// `output-pc-component-variables` + `output-pc-alert-variables-{light,dark}`.
-// Those mixins read the same shared $-variable vocabulary defined in
-// `variables/*`, so themes still override one place; only the *emission* of
-// component custom properties lives with the components that use them.
-// ============================================================================
-
-@mixin output-pc-css-variables {
-  // Tells the browser whether this scope is light or dark so native UA
-  // elements (scrollbars, form controls) and `light-dark()` resolve correctly.
-  // Override $theme-color-scheme before importing variables for always-dark
-  // themes; for dual-mode themes leave `light` and add `color-scheme: dark;`
-  // to the `.pc-mode-dark` block.
-  color-scheme: #{$theme-color-scheme};
-
-  // Surfaces. NOTE: pure-admin's --pc-main-bg is the *page* surface and
-  // --pc-subtle-bg the *card* surface — a legacy naming inversion vs the
-  // --base-* model (--base-main-bg = card), so those two stay compile-time to
-  // avoid a value flip. --pc-page-bg maps cleanly and is relinked.
-  --pc-main-bg: #{$main-bg};
-  --pc-page-bg: var(--base-page-bg, #{$page-bg});
-  --pc-subtle-bg: #{$subtle-bg};
-
-  // Text — follow the shared --base-* tokens at runtime.
-  --pc-text-color-1: var(--base-text-color-1, #{$text-color-1});
-  --pc-text-color-2: var(--base-text-color-2, #{$text-color-2});
-
-  // Accent — -light derives from --pc-accent at runtime so theme overrides cascade.
-  --pc-accent: var(--base-accent-color, #{$accent-color});
-  --pc-accent-hover: #{$accent-hover};
-  --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
-
-  // Links — derive from accent so theme overrides cascade automatically.
-  // Hover mixes 50% toward currentColor (inherited text colour at the use site),
-  // so it auto-darkens on light themes and auto-lightens on dark themes.
-  --pc-link-color: var(--pc-accent);
-  --pc-link-color-hover: color-mix(in srgb, var(--pc-link-color), currentColor 50%);
-  --pc-link-color-visited: var(--pc-link-color);
-
-  // Border — a live reference to --base-border-color (so a runtime --base-*
-  // override cascades), with the build-time value as the literal fallback.
-  --pc-border-color: var(--base-border-color, #{$border-color});
-
-  // Semantic role identities — the single source for the four roles. Component
-  // surfaces (--pc-*-bg, alerts, buttons) derive from these via var() in
-  // pure-admin, so retuning a role here cascades everywhere.
-  --pc-success: #{$base-success-color};
-  --pc-warning: #{$base-warning-color};
-  --pc-danger:  #{$base-danger-color};
-  --pc-info:    #{$base-info-color};
-
-  // Role text colours — consumed by the .text-{success,danger,warning,info}
-  // utilities (utilities.scss). Kept in the base contract for that reason.
-  --pc-success-text: #{$success-text};
-  --pc-danger-text:  #{$danger-text};
-  --pc-warning-text: #{$warning-text};
-  --pc-info-text:    #{$info-text};
-
-  // Theme palette slots (1–9) + paired contrast text. Consumed by the
-  // .text-color-* utilities; themes override $color-N for branded palettes.
-  --pc-color-1: #{$color-1};
-  --pc-color-2: #{$color-2};
-  --pc-color-3: #{$color-3};
-  --pc-color-4: #{$color-4};
-  --pc-color-5: #{$color-5};
-  --pc-color-6: #{$color-6};
-  --pc-color-7: #{$color-7};
-  --pc-color-8: #{$color-8};
-  --pc-color-9: #{$color-9};
-  --pc-color-1-text: #{$color-1-text};
-  --pc-color-2-text: #{$color-2-text};
-  --pc-color-3-text: #{$color-3-text};
-  --pc-color-4-text: #{$color-4-text};
-  --pc-color-5-text: #{$color-5-text};
-  --pc-color-6-text: #{$color-6-text};
-  --pc-color-7-text: #{$color-7-text};
-  --pc-color-8-text: #{$color-8-text};
-  --pc-color-9-text: #{$color-9-text};
-
-  // Border-radius scale — derived from the --base-border-radius-* contract (the
-  // same unitless rem-multipliers the web/svelte components read; e.g.
-  // web-multiselect: `calc(var(--base-border-radius-md) * --ms-rem)`). Multiplying
-  // by 1rem yields px at pure-css's 10px rem base (0.6 → 0.6rem → 6px) and keeps
-  // the scale live: overriding --base-border-radius-* at runtime re-rounds
-  // pure-css's own elements and the components together, instead of the old baked
-  // 2/4/8px literals that ignored the base contract. The $base-* multipliers are
-  // the fallbacks. NOTE: --pc-border-radius (unsuffixed) is the MID (-md) step.
-  --pc-border-radius-sm: calc(var(--base-border-radius-sm, #{$base-border-radius-sm}) * 1rem);
-  --pc-border-radius: calc(var(--base-border-radius-md, #{$base-border-radius-md}) * 1rem);
-  --pc-border-radius-lg: calc(var(--base-border-radius-lg, #{$base-border-radius-lg}) * 1rem);
-}
-
-// ============================================================================
-// COMPONENT CSS VARIABLES — pure-admin's contract (DEFINED here, EMITTED there)
-// ============================================================================
-// These emit the component-scoped --pc-* tokens (buttons, cards, tables,
-// panels, badges, tooltips, command palette, multiselect, sentiment scale,
-// form spacing, the derived contextual/alert surfaces, admin layout chrome).
-//
-// They are DEFINED in pure-css only because they read the shared $-variable
-// vocabulary that lives in `variables/*` (in scope here via `@use variables/
-// index as *`); a Sass mixin resolves those globals from its definition site,
-// so it must be authored where the vocabulary is visible.
-//
-// They are NOT part of pure-css's shipped output: base.scss / pure-css.scss do
-// NOT call them, so the foundation bundle emits base tokens only. Consumers
-// that ship the components (pure-admin core, themes) opt in by calling
-// output-pc-component-variables + output-pc-alert-variables-{light,dark}
-// alongside output-pc-css-variables. This keeps the EMISSION with the
-// components while the shared token vocabulary stays single-sourced.
-// ============================================================================
-
-@mixin output-pc-component-variables {
-  // =========================================================================
-  // SENTIMENT SCALE — 5-step direction-of-change (KPI / data-display).
-  // Middle three alias the role colours so retuning --pc-success / --pc-danger
-  // retunes the matching sentiment positions; outliers are explicit shades.
-  // =========================================================================
-  --pc-very-positive: #{$base-very-positive};
-  --pc-positive:      var(--pc-success);
-  --pc-neutral:       #{$base-neutral};
-  --pc-negative:      var(--pc-danger);
-  --pc-very-negative: #{$base-very-negative};
-
-  // =========================================================================
-  // CHART / SPARKLINE — shared trendline sizing.
-  // =========================================================================
-  --pc-chart-trendline-height: 3rem;
-  --pc-chart-trendline-stroke: 2.1;     // SVG user-space units (viewBox-relative)
-
-  // =========================================================================
-  // DETAIL POPOVER — Bloomberg-dark by default regardless of host theme.
-  // Override the five tokens to adopt a theme-aware popover instead.
-  // =========================================================================
-  --pc-detail-bg:        rgba(15, 17, 21, 0.97);
-  --pc-detail-text:      #ffffff;
-  --pc-detail-row-label: rgba(255, 255, 255, 0.75);
-  --pc-detail-title:     rgba(255, 255, 255, 0.55);
-  --pc-detail-shadow:    0 1.4rem 3.6rem rgba(0, 0, 0, 0.55);
-
-  // =========================================================================
-  // LAYOUT COLORS
-  // =========================================================================
-
-  // The app shell (navbar / sidebar / footer) is a DISTINCT brand surface: a
-  // theme sets its own $navbar-bg / $sidebar-bg / $footer-bg (e.g. Express's
-  // yellow bar), independent of the --base-* card/page palette. So emit these
-  // compile-time — NOT `var(--base-main-bg, …)`, which would let the always-set
-  // --base-main-bg win and erase the brand colour. The standalone (base.css
-  // only) fallback lives where it belongs: the shell CSS itself resolves
-  // `var(--pc-navbar-bg, var(--base-main-bg))` when no --pc-* is emitted.
-
-  // Navbar
-  --pc-navbar-bg: #{$navbar-bg};
-  --pc-navbar-border-color: #{$navbar-border-color};
-  --pc-navbar-text: #{$navbar-text};
-  --pc-navbar-text-secondary: #{$navbar-text-secondary};
-  --pc-navbar-profile-name-color: #{$navbar-profile-name-color};
-
-  // Sidebar
-  --pc-sidebar-bg: #{$sidebar-bg};
-  --pc-sidebar-text: #{$sidebar-text};
-  --pc-sidebar-text-secondary: #{$sidebar-text-secondary};
-  --pc-sidebar-submenu-bg: #{$sidebar-submenu-bg};
-  --pc-sidebar-submenu-hover-bg: #{$sidebar-submenu-hover-bg};
-  --pc-sidebar-submenu-active-bg: #{$sidebar-submenu-active-bg};
-  --pc-sidebar-submenu-active-text: #{$sidebar-submenu-active-text};
-
-  // Footer
-  --pc-footer-bg: #{$footer-bg};
-  --pc-footer-border-color: #{$footer-border-color};
-
-  // =========================================================================
-  // BUTTON COLORS
-  // =========================================================================
-
-  // Primary (uses accent color)
-  --pc-btn-primary-bg: var(--base-accent-color, #{$btn-primary-bg});
-  --pc-btn-primary-bg-hover: var(--base-accent-color-hover, #{$btn-primary-bg-hover});
-  --pc-btn-primary-bg-light: color-mix(in srgb, var(--pc-btn-primary-bg) 5%, transparent);
-  --pc-btn-primary-text: var(--base-text-color-on-accent, #{$btn-primary-text});
-
-  // Secondary
-  --pc-btn-secondary-bg: #{$btn-secondary-bg};
-  --pc-btn-secondary-bg-hover: #{$btn-secondary-bg-hover};
-  --pc-btn-secondary-text: #{$btn-secondary-text};
-  --pc-btn-secondary-outline-color: var(--pc-btn-secondary-bg);
-
-  // Success — bg references role colour for runtime cascade
-  --pc-btn-success-bg: var(--pc-success);
-  --pc-btn-success-bg-hover: var(--base-success-color-hover, #{$btn-success-bg-hover});
-  --pc-btn-success-text: var(--base-text-on-success, #{$btn-success-text});
-
-  // Danger — bg references role colour for runtime cascade
-  --pc-btn-danger-bg: var(--pc-danger);
-  --pc-btn-danger-bg-hover: var(--base-danger-color-hover, #{$btn-danger-bg-hover});
-  --pc-btn-danger-text: var(--base-text-on-danger, #{$btn-danger-text});
-
-  // Warning — bg references role colour for runtime cascade
-  --pc-btn-warning-bg: var(--pc-warning);
-  --pc-btn-warning-bg-hover: var(--base-warning-color-hover, #{$btn-warning-bg-hover});
-  --pc-btn-warning-text: var(--base-text-on-warning, #{$btn-warning-text});
-
-  // Info — bg references role colour for runtime cascade
-  --pc-btn-info-bg: var(--pc-info);
-  --pc-btn-info-bg-hover: var(--base-info-color-hover, #{$btn-info-bg-hover});
-  --pc-btn-info-text: var(--base-text-on-info, #{$btn-info-text});
-
-  // Light
-  --pc-btn-light-bg: var(--base-page-bg, #{$btn-light-bg});
-  --pc-btn-light-bg-hover: var(--base-subtle-bg, #{$btn-light-bg-hover});
-  --pc-btn-light-text: var(--base-text-color-1, #{$btn-light-text});
-
-  // Dark
-  --pc-btn-dark-bg: #{$btn-dark-bg};
-  --pc-btn-dark-bg-hover: #{$btn-dark-bg-hover};
-  --pc-btn-dark-text: #{$btn-dark-text};
-
-  // =========================================================================
-  // CONTEXTUAL/SEMANTIC SURFACES — derive from the base role identities.
-  // -bg/-light/-subtle/-border derive at runtime so theme overrides cascade;
-  // -bg-hover / -text-light stay compile-time. (The role text colours
-  // --pc-{success,danger,warning,info}-text live in the base contract.)
-  // =========================================================================
-  --pc-success-bg: var(--pc-success);
-  --pc-success-bg-hover: var(--base-success-color-hover, #{$success-bg-hover});
-  --pc-success-bg-light: color-mix(in srgb, var(--pc-success) 10%, transparent);
-  --pc-success-bg-subtle: color-mix(in srgb, var(--pc-success) 8%, transparent);
-  --pc-success-border: color-mix(in srgb, var(--pc-success) 20%, transparent);
-  --pc-success-text-light: var(--base-success-text-light, #{$success-text-light});
-
-  --pc-danger-bg: var(--pc-danger);
-  --pc-danger-bg-hover: var(--base-danger-color-hover, #{$danger-bg-hover});
-  --pc-danger-bg-light: color-mix(in srgb, var(--pc-danger) 10%, transparent);
-  --pc-danger-bg-subtle: color-mix(in srgb, var(--pc-danger) 8%, transparent);
-  --pc-danger-border: color-mix(in srgb, var(--pc-danger) 20%, transparent);
-  --pc-danger-text-light: var(--base-danger-text-light, #{$danger-text-light});
-
-  --pc-warning-bg: var(--pc-warning);
-  --pc-warning-bg-hover: var(--base-warning-color-hover, #{$warning-bg-hover});
-  --pc-warning-bg-light: color-mix(in srgb, var(--pc-warning) 10%, transparent);
-  --pc-warning-bg-subtle: color-mix(in srgb, var(--pc-warning) 8%, transparent);
-  --pc-warning-border: color-mix(in srgb, var(--pc-warning) 20%, transparent);
-  --pc-warning-text-light: var(--base-warning-text-light, #{$warning-text-light});
-
-  --pc-info-bg: var(--pc-info);
-  --pc-info-bg-hover: var(--base-info-color-hover, #{$info-bg-hover});
-  --pc-info-bg-light: color-mix(in srgb, var(--pc-info) 10%, transparent);
-  --pc-info-bg-subtle: color-mix(in srgb, var(--pc-info) 8%, transparent);
-  --pc-info-border: color-mix(in srgb, var(--pc-info) 20%, transparent);
-  --pc-info-text-light: var(--base-info-text-light, #{$info-text-light});
-
-  // =========================================================================
-  // CARD COLORS
-  // =========================================================================
-  --pc-card-bg: var(--base-main-bg, #{$card-bg});
-  --pc-card-header-bg: var(--base-elevated-bg, #{$card-header-bg});
-  --pc-card-footer-bg: var(--base-main-bg, #{$card-footer-bg});
-  --pc-card-tabs-bg: var(--base-elevated-bg, #{$card-tabs-bg});
-
-  // =========================================================================
-  // INPUT/FORM COLORS
-  // =========================================================================
-  --pc-input-bg: var(--base-input-bg, #{$input-bg});
-  --pc-input-border: var(--base-input-border-color, #{$input-border});
-  --pc-input-text: var(--base-input-color, #{$input-text});
-  --pc-input-focus-border-color: var(--base-accent-color, #{$input-focus-border-color});
-  --pc-select-focus-border-color: var(--base-accent-color, #{$select-focus-border-color});
-  --pc-textarea-focus-border-color: var(--base-accent-color, #{$textarea-focus-border-color});
-
-  // Checkbox (checkmark colour + focus shadow stay compile-time)
-  --pc-checkbox-border-color: var(--base-checkbox-border-color, #{$checkbox-border-color});
-  --pc-checkbox-border-color-hover: var(--base-accent-color, #{$checkbox-border-color-hover});
-  --pc-checkbox-border-color-checked: var(--base-accent-color, #{$checkbox-border-color-checked});
-  --pc-checkbox-bg: var(--base-input-bg, #{$checkbox-bg});
-  --pc-checkbox-bg-checked: var(--base-accent-color, #{$checkbox-bg-checked});
-  --pc-checkbox-bg-indeterminate: var(--base-accent-color, #{$checkbox-bg-indeterminate});
-  --pc-checkbox-checkmark-color: #{$checkbox-checkmark-color};
-  --pc-checkbox-focus-shadow: #{$checkbox-focus-shadow};
-
-  // Input group (prepend/append bg are the secondary grey — compile-time)
-  --pc-input-group-prepend-bg: #{$input-group-prepend-bg};
-  --pc-input-group-prepend-text: var(--base-text-color-2, #{$input-group-prepend-text});
-  --pc-input-group-append-bg: #{$input-group-append-bg};
-  --pc-input-group-append-text: var(--base-text-color-2, #{$input-group-append-text});
-
-  // =========================================================================
-  // TABLE COLORS
-  // =========================================================================
-  --pc-table-bg: var(--base-main-bg, #{$table-bg});
-  --pc-table-header-bg: var(--base-elevated-bg, #{$table-header-bg});
-  --pc-table-stripe: var(--base-elevated-bg, #{$table-stripe});
-  --pc-table-hover-bg: var(--base-hover-bg, #{$table-hover-bg});
-  --pc-table-hover-accent-color: var(--base-accent-color, #{$table-hover-accent-color});
-
-  // =========================================================================
-  // MODAL COLORS
-  // =========================================================================
-  --pc-modal-overlay-bg: var(--base-overlay-bg, #{$modal-overlay-bg});
-  --pc-modal-content-bg: var(--base-main-bg, #{$modal-content-bg});
-
-  // =========================================================================
-  // BADGE COLORS
-  // =========================================================================
-  --pc-badge-success-bg: #{$badge-success-bg};
-  --pc-badge-success-text: #{$badge-success-text};
-  --pc-badge-warning-bg: #{$badge-warning-bg};
-  --pc-badge-warning-text: #{$badge-warning-text};
-  --pc-badge-info-bg: #{$badge-info-bg};
-  --pc-badge-info-text: #{$badge-info-text};
-  --pc-badge-danger-bg: #{$badge-danger-bg};
-  --pc-badge-danger-text: #{$badge-danger-text};
-
-  // Composite badge
-  --pc-composite-badge-icon-bg: #{$composite-badge-icon-bg};
-  --pc-composite-badge-label-bg: #{$composite-badge-label-bg};
-  --pc-composite-badge-label-text: #{$composite-badge-label-text};
-  --pc-composite-badge-label-hover-bg: #{$composite-badge-label-hover-bg};
-
-  // =========================================================================
-  // TOOLTIP & POPOVER COLORS
-  // =========================================================================
-  --pc-tooltip-bg: var(--base-tooltip-bg, #{$tooltip-bg});
-  --pc-tooltip-text: var(--base-tooltip-text-color, #{$tooltip-text});
-  --pc-popover-content-bg: var(--base-dropdown-bg, #{$popover-content-bg});
-  --pc-popover-text-light: #{$popover-text-light};
-  --pc-popover-text-dark: #{$popover-text-dark};
-
-  // =========================================================================
-  // LOADER COLORS
-  // =========================================================================
-  --pc-loader-overlay-bg: #{$loader-overlay-bg};
-
-  // =========================================================================
-  // PROFILE PANEL COLORS
-  // =========================================================================
-  --pc-profile-overlay-bg: #{$profile-overlay-bg};
-
-  // =========================================================================
-  // DETAIL PANEL COLORS
-  // =========================================================================
-  --pc-detail-panel-overlay-bg: #{$detail-panel-overlay-bg};
-  --pc-detail-panel-selected-bg: #{$detail-panel-selected-bg};
-  --pc-detail-panel-z-index: #{$detail-panel-z-index};
-
-  // =========================================================================
-  // COMMAND PALETTE COLORS
-  // =========================================================================
-  --pc-command-palette-backdrop-bg: #{$command-palette-backdrop-bg};
-  --pc-command-palette-item-hover-bg: #{$command-palette-item-hover-bg};
-  --pc-command-palette-item-active-bg: #{$command-palette-item-active-bg};
-  --pc-command-palette-highlight-bg: #{$command-palette-highlight-bg};
-  --pc-command-palette-highlight-text: #{$command-palette-highlight-text};
-  --pc-command-palette-key-bg: var(--base-subtle-bg, #{$subtle-bg});
-  --pc-command-palette-key-text: var(--base-text-color-1, #{$text-color-1});
-  --pc-command-palette-key-font-size: #{$font-size-xs};
-  --pc-command-palette-key-font-weight: #{$font-weight-semibold};
-
-  // =========================================================================
-  // MULTISELECT COLORS
-  // =========================================================================
-  --pc-multiselect-dropdown-bg: var(--base-dropdown-bg, #{$multiselect-dropdown-bg});
-  --pc-multiselect-dropdown-border: var(--base-border-color, #{$multiselect-dropdown-border});
-  --pc-multiselect-dropdown-text: var(--base-text-color-1, #{$multiselect-dropdown-text});
-  --pc-multiselect-hint-bg: var(--base-page-bg, #{$multiselect-hint-bg});
-  --pc-multiselect-hint-border: var(--base-border-color, #{$multiselect-hint-border});
-  --pc-multiselect-option-hover-bg: var(--base-hover-bg, #{$multiselect-option-hover-bg});
-  --pc-multiselect-pill-bg: var(--base-accent-color-light, #{$multiselect-pill-bg});
-  --pc-multiselect-pill-border: var(--base-accent-color, #{$multiselect-pill-border});
-
-  // =========================================================================
-  // FORM SPACING — the complete anatomy of a form's spacing. Runtime-tunable;
-  // the inline "gap" family chains to --pc-form-gap so one knob moves them all.
-  //   VERTICAL RHYTHM: --pc-label-gap (label→control), --pc-help-gap
-  //     (control→help), --pc-field-gap (field→field), --pc-form-actions-offset
-  //     (last field→actions row).
-  //   INLINE: --pc-form-gap (shared + label↔icon), --pc-choice-gap (between
-  //     options), --pc-choice-inner-gap (control↔label), --pc-form-actions-gap
-  //     (between buttons), --pc-field-horizontal-gap (label col↔input col).
-  // =========================================================================
-  --pc-form-gap: #{$form-gap};
-  --pc-choice-gap: var(--pc-form-gap);
-  --pc-choice-inner-gap: #{$spacing-sm};
-  --pc-form-actions-gap: var(--pc-form-gap);
-  --pc-field-horizontal-gap: #{$spacing-base};
-  --pc-label-gap: #{$form-label-margin-bottom};
-  --pc-help-gap: #{$form-help-margin-top};
-  --pc-field-gap: #{$form-group-margin-bottom};
-  --pc-form-actions-offset: #{$spacing-base};
-}
-
-// ============================================================================
-// ALERT COLOR DERIVATION MIXINS — also pure-admin's contract (see above).
-// ============================================================================
-// Derive alert colours from the semantic role surfaces (--pc-success-bg, etc.)
-// via color-mix(). Consumers call the light or dark variant after
-// output-pc-component-variables. Light: dark text on subtle backgrounds.
-// Dark: white text on tinted backgrounds. Not emitted by pure-css's own bundle.
-// ============================================================================
-
-// Light mode: dark text on subtle backgrounds
-@mixin output-pc-alert-variables-light {
-  // Success
-  --pc-alert-success-text: color-mix(in srgb, var(--pc-success-bg) #{$alert-text-mix-light}, black);
-  --pc-alert-success-bg: color-mix(in srgb, var(--pc-success-bg) #{$alert-bg-opacity-light}%, transparent);
-  --pc-alert-success-border: color-mix(in srgb, var(--pc-success-bg) #{$alert-border-opacity-light}%, transparent);
-
-  // Danger
-  --pc-alert-danger-text: color-mix(in srgb, var(--pc-danger-bg) #{$alert-text-mix-light}, black);
-  --pc-alert-danger-bg: color-mix(in srgb, var(--pc-danger-bg) #{$alert-bg-opacity-light}%, transparent);
-  --pc-alert-danger-border: color-mix(in srgb, var(--pc-danger-bg) #{$alert-border-opacity-light}%, transparent);
-
-  // Warning
-  --pc-alert-warning-text: color-mix(in srgb, var(--pc-warning-bg) #{$alert-text-mix-light}, black);
-  --pc-alert-warning-bg: color-mix(in srgb, var(--pc-warning-bg) #{$alert-bg-opacity-light}%, transparent);
-  --pc-alert-warning-border: color-mix(in srgb, var(--pc-warning-bg) #{$alert-border-opacity-light}%, transparent);
-
-  // Info
-  --pc-alert-info-text: color-mix(in srgb, var(--pc-info-bg) #{$alert-text-mix-light}, black);
-  --pc-alert-info-bg: color-mix(in srgb, var(--pc-info-bg) #{$alert-bg-opacity-light}%, transparent);
-  --pc-alert-info-border: color-mix(in srgb, var(--pc-info-bg) #{$alert-border-opacity-light}%, transparent);
-}
-
-// Dark mode: white text on tinted backgrounds (white text is always readable)
-@mixin output-pc-alert-variables-dark {
-  // Success
-  --pc-alert-success-text: #ffffff;
-  --pc-alert-success-bg: color-mix(in srgb, var(--pc-success-bg) #{$alert-bg-opacity-dark}%, transparent);
-  --pc-alert-success-border: color-mix(in srgb, var(--pc-success-bg) #{$alert-border-opacity-dark}%, transparent);
-
-  // Danger
-  --pc-alert-danger-text: #ffffff;
-  --pc-alert-danger-bg: color-mix(in srgb, var(--pc-danger-bg) #{$alert-bg-opacity-dark}%, transparent);
-  --pc-alert-danger-border: color-mix(in srgb, var(--pc-danger-bg) #{$alert-border-opacity-dark}%, transparent);
-
-  // Warning
-  --pc-alert-warning-text: #ffffff;
-  --pc-alert-warning-bg: color-mix(in srgb, var(--pc-warning-bg) #{$alert-bg-opacity-dark}%, transparent);
-  --pc-alert-warning-border: color-mix(in srgb, var(--pc-warning-bg) #{$alert-border-opacity-dark}%, transparent);
-
-  // Info
-  --pc-alert-info-text: #ffffff;
-  --pc-alert-info-bg: color-mix(in srgb, var(--pc-info-bg) #{$alert-bg-opacity-dark}%, transparent);
-  --pc-alert-info-border: color-mix(in srgb, var(--pc-info-bg) #{$alert-border-opacity-dark}%, transparent);
-}
+// ============================================================================
+// BASE CSS VARIABLES OUTPUT MIXIN
+// ============================================================================
+// This mixin outputs all $base-* SCSS variables as --base-* CSS custom properties.
+// Include this in themes to enable web component theming.
+//
+// Usage in theme file:
+//   @import '../base-css-variables';
+//   :root {
+//     @include output-base-css-variables;
+//   }
+//
+// Web components consume these via fallback chains:
+//   --ms-accent-color: var(--base-accent-color, #3b82f6);
+// ============================================================================
+
+// Make variables resolvable when this file is loaded as a @use module
+// (e.g. from main.scss). Legacy @import callers (themes) are unaffected —
+// Sass places @use'd members into the importing file's global scope, where
+// theme-set overrides already live.
+@use 'variables/index' as *;
+
+@mixin output-base-css-variables {
+  // === Accent Colors ===
+  --base-accent-color: #{$base-accent-color};
+  --base-accent-color-hover: #{$base-accent-color-hover};
+  --base-accent-color-active: #{$base-accent-color-active};
+  --base-accent-color-light: #{$base-accent-color-light};
+  --base-accent-color-light-hover: #{$base-accent-color-light-hover};
+
+  // === Primary role — canonical name for accent (WS7.5) ===
+  // Accent stays the SOURCE themes override (including runtime .pc-mode-dark /
+  // colour-variant overrides), so primary tracks it live in every scope. New
+  // consumers should read --base-primary-*; --base-accent-* is the legacy name.
+  --base-primary-color: var(--base-accent-color, #{$base-accent-color});
+  --base-primary-color-hover: var(--base-accent-color-hover, #{$base-accent-color-hover});
+  --base-primary-color-active: var(--base-accent-color-active, #{$base-accent-color-active});
+  --base-primary-color-light: var(--base-accent-color-light, #{$base-accent-color-light});
+  --base-primary-color-light-hover: var(--base-accent-color-light-hover, #{$base-accent-color-light-hover});
+
+  // === Secondary role (promoted into the contract, WS7.5) ===
+  --base-secondary-color: #{$base-secondary-color};
+  --base-secondary-color-hover: #{$base-secondary-color-hover};
+
+  // === Text Colors ===
+  --base-text-color-1: #{$base-text-color-1};
+  --base-text-color-2: #{$base-text-color-2};
+  --base-text-color-3: #{$base-text-color-3};
+  --base-text-color-4: #{$base-text-color-4};
+  --base-text-color-on-accent: #{$base-text-color-on-accent};
+  // "foreground on a role" convention = --base-text-on-<role> (WS7.7). on-primary
+  // aliases the legacy on-accent; on-secondary is new; on-{success,danger,warning,
+  // info} are emitted in their role sections below.
+  --base-text-on-primary: var(--base-text-color-on-accent, #{$base-text-color-on-accent});
+  --base-text-on-secondary: #{$base-text-on-secondary};
+
+  // === Background Colors (semantic) ===
+  --base-main-bg: #{$base-main-bg};
+  --base-page-bg: #{$base-page-bg};
+  --base-subtle-bg: #{$base-subtle-bg};
+  --base-inverse-bg: #{$base-inverse-bg};
+  --base-overlay-bg: #{$base-overlay-bg};
+  --base-shadow-color: #{$base-shadow-color};
+  --base-hover-bg: #{$base-hover-bg};
+  --base-active-bg: #{$base-active-bg};
+  --base-disabled-bg: #{$base-disabled-bg};
+  --base-elevated-bg: #{$base-elevated-bg};
+
+  // === Text on inverse surfaces ===
+  --base-text-inverted: #{$base-text-inverted};
+
+  // === Border Colors ===
+  // --base-border-width is a new additive knob for consumers composing their own
+  // borders. The shorthands stay emitted from their $var so themes that override
+  // the whole shorthand (e.g. an accent-coloured input border) keep winning —
+  // recomposing them from the -color tokens would silently drop those overrides. (WS7.1)
+  --base-border-width: #{$base-border-width};
+  --base-border-color: #{$base-border-color};
+  --base-border: #{$base-border};
+  --base-checkbox-border-color: #{$base-checkbox-border-color};
+
+  // === Input Fields ===
+  --base-input-bg: #{$base-input-bg};
+  --base-input-color: #{$base-input-color};
+  --base-input-border: #{$base-input-border};
+  --base-input-border-color: #{$base-input-border-color};
+  --base-input-border-hover: #{$base-input-border-hover};
+  --base-input-border-focus: #{$base-input-border-focus};
+  --base-input-placeholder-color: #{$base-input-placeholder-color};
+  --base-input-bg-disabled: #{$base-input-bg-disabled};
+  --base-input-clear-color: #{$base-input-clear-color};
+  --base-input-clear-bg-hover: #{$base-input-clear-bg-hover};
+
+  // === Input Size Heights ===
+  --base-input-size-xs-height: #{$base-input-size-xs-height};
+  --base-input-size-sm-height: #{$base-input-size-sm-height};
+  --base-input-size-md-height: #{$base-input-size-md-height};
+  --base-input-size-lg-height: #{$base-input-size-lg-height};
+  --base-input-size-xl-height: #{$base-input-size-xl-height};
+
+  // === Dropdown/Popover ===
+  --base-dropdown-bg: #{$base-dropdown-bg};
+  --base-dropdown-border: #{$base-dropdown-border};
+  --base-dropdown-box-shadow: #{$base-dropdown-box-shadow};
+
+  // === Tooltip ===
+  --base-tooltip-bg: #{$base-tooltip-bg};
+  --base-tooltip-text-color: #{$base-tooltip-text-color};
+  --base-tooltip-color: #{$base-tooltip-text-color};  // alias consumed by web-grid
+
+  // === Contextual Colors - Success ===
+  --base-success-color: #{$base-success-color};
+  --base-success-bg: #{$base-success-bg};
+  --base-success-color-hover: #{$base-success-color-hover};
+  --base-success-bg-light: #{$base-success-bg-light};
+  --base-success-bg-subtle: #{$base-success-bg-subtle};
+  --base-success-border: #{$base-success-border};
+  --base-success-text: #{$base-success-text};
+  --base-success-text-light: #{$base-success-text-light};
+  --base-text-on-success: #{$base-text-on-success};
+
+  // === Contextual Colors - Danger ===
+  --base-danger-color: #{$base-danger-color};
+  --base-danger-bg: #{$base-danger-bg};
+  --base-danger-color-hover: #{$base-danger-color-hover};
+  --base-danger-bg-light: #{$base-danger-bg-light};
+  --base-danger-bg-subtle: #{$base-danger-bg-subtle};
+  --base-danger-border: #{$base-danger-border};
+  --base-danger-text: #{$base-danger-text};
+  --base-danger-text-light: #{$base-danger-text-light};
+  --base-text-on-danger: #{$base-text-on-danger};
+
+  // === Contextual Colors - Warning ===
+  --base-warning-color: #{$base-warning-color};
+  --base-warning-bg: #{$base-warning-bg};
+  --base-warning-color-hover: #{$base-warning-color-hover};
+  --base-warning-bg-light: #{$base-warning-bg-light};
+  --base-warning-bg-subtle: #{$base-warning-bg-subtle};
+  --base-warning-border: #{$base-warning-border};
+  --base-warning-text: #{$base-warning-text};
+  --base-warning-text-light: #{$base-warning-text-light};
+  --base-text-on-warning: #{$base-text-on-warning};
+
+  // === Contextual Colors - Info ===
+  --base-info-color: #{$base-info-color};
+  --base-info-bg: #{$base-info-bg};  // solid role fill — role symmetry (WS7.4)
+  --base-info-color-hover: #{$base-info-color-hover};
+  --base-info-bg-light: #{$base-info-bg-light};
+  --base-info-bg-subtle: #{$base-info-bg-subtle};
+  --base-info-border: #{$base-info-border};
+  --base-info-text: #{$base-info-text};
+  --base-info-text-light: #{$base-info-text-light};
+  --base-text-on-info: #{$base-text-on-info};
+
+  // === Interactive States ===
+  --base-hover-overlay: #{$base-hover-overlay};
+  --base-active-overlay: #{$base-active-overlay};
+  --base-focus-ring-color: #{$base-focus-ring-color};
+  --base-focus-ring-width: #{$base-focus-ring-width};
+
+  // === Typography ===
+  --base-font-family: #{$base-font-family};
+  --base-font-family-mono: #{$base-font-family-mono};
+  --base-font-size-2xs: #{$base-font-size-2xs};
+  --base-font-size-xs: #{$base-font-size-xs};
+  --base-font-size-sm: #{$base-font-size-sm};
+  --base-font-size-base: #{$base-font-size-base};
+  --base-font-size-lg: #{$base-font-size-lg};
+  --base-font-size-xl: #{$base-font-size-xl};
+  --base-font-size-2xl: #{$base-font-size-2xl};
+  --base-font-weight-normal: #{$base-font-weight-normal};
+  --base-font-weight-medium: #{$base-font-weight-medium};
+  --base-font-weight-semibold: #{$base-font-weight-semibold};
+  --base-font-weight-bold: #{$base-font-weight-bold};
+  --base-line-height-tight: #{$base-line-height-tight};
+  --base-line-height-normal: #{$base-line-height-normal};
+  --base-line-height-relaxed: #{$base-line-height-relaxed};
+
+  // === Border Radius ===
+  --base-border-radius-sm: #{$base-border-radius-sm};
+  --base-border-radius-md: #{$base-border-radius-md};
+  --base-border-radius-lg: #{$base-border-radius-lg};
+
+  // === Rem base for web components ===
+  --base-rem: #{$base-rem};
+
+  // === Icons — shared mask-friendly SVG glyphs (theme swap point) ===
+  // Consumed via `mask: var(--base-icon-*); background: currentColor`. chevron =
+  // directional stroked angle (expanders/nav); caret-down = static solid triangle
+  // (dropdown affordance); close = the ✕ (close/clear/remove). Override any of the
+  // three to re-skin every consumer's affordance at once.
+  --base-icon-chevron: #{$base-icon-chevron};
+  --base-icon-caret-down: #{$base-icon-caret-down};
+  --base-icon-caret-up: #{$base-icon-caret-up};
+  --base-icon-close: #{$base-icon-close};
+  // clear (field-clear ✕) = distinct purpose from close, same default glyph: it
+  // FOLLOWS --base-icon-close at runtime, so overriding close moves clear too —
+  // override --base-icon-clear alone to diverge field-clear from close/remove.
+  --base-icon-clear: var(--base-icon-close, #{$base-icon-close});
+  // remove (take an ITEM out of a collection: chip/tag/row) = non-destructive,
+  // own purpose, same ✕ default; follows close at runtime like clear. NOT delete
+  // (which is the destructive trash glyph in the action group below).
+  --base-icon-remove: var(--base-icon-close, #{$base-icon-close});
+  // expand/collapse = the +/− swap-glyph disclosure pair (trees, accordions),
+  // distinct from the rotating chevron.
+  --base-icon-expand: #{$base-icon-expand};
+  --base-icon-collapse: #{$base-icon-collapse};
+
+  // === Action icons — CRUD verbs (distinct glyphs; read as actions) ===
+  // add = + (create/insert; independent knob from expand), edit = pencil,
+  // delete = trash (DESTRUCTIVE — a bin, deliberately not an ✕, so it never
+  // reads like close/remove).
+  --base-icon-add: #{$base-icon-add};
+  --base-icon-edit: #{$base-icon-edit};
+  --base-icon-delete: #{$base-icon-delete};
+
+  // === Utility icons ===
+  --base-icon-search: #{$base-icon-search};
+
+  // === Theme palette slots (1–9) + paired contrast text (WS7.6) ===
+  // Promoted into the --base-* contract so the branded/data-viz palette is
+  // themeable through the same namespace; --pc-color-N aliases these.
+  --base-color-1: #{$color-1};
+  --base-color-2: #{$color-2};
+  --base-color-3: #{$color-3};
+  --base-color-4: #{$color-4};
+  --base-color-5: #{$color-5};
+  --base-color-6: #{$color-6};
+  --base-color-7: #{$color-7};
+  --base-color-8: #{$color-8};
+  --base-color-9: #{$color-9};
+  --base-color-1-text: #{$color-1-text};
+  --base-color-2-text: #{$color-2-text};
+  --base-color-3-text: #{$color-3-text};
+  --base-color-4-text: #{$color-4-text};
+  --base-color-5-text: #{$color-5-text};
+  --base-color-6-text: #{$color-6-text};
+  --base-color-7-text: #{$color-7-text};
+  --base-color-8-text: #{$color-8-text};
+  --base-color-9-text: #{$color-9-text};
+
+  // === Spacing scale (WS7.9) ===
+  // Unitless multipliers (same convention as font-size/radius); consume as
+  // calc(var(--base-space-*) * var(--base-rem)). Mirrors $semantic-spacers.
+  --base-space-xs: 0.4;
+  --base-space-sm: 0.8;
+  --base-space-md: 1.2;
+  --base-space-base: 1.6;
+  --base-space-lg: 2.4;
+  --base-space-xl: 3.2;
+  --base-space-2xl: 4.8;
+
+  // === Elevation / shadow scale (WS7.10) ===
+  // Offsets fixed; colour referenced from --base-shadow-color so shadows theme
+  // with the surface. New scale (no prior consumer), so the unified shadow-colour
+  // is intentional.
+  --base-shadow-sm: 0 1px 3px var(--base-shadow-color);
+  --base-shadow-md: 0 2px 8px var(--base-shadow-color);
+  --base-shadow-lg: 0 4px 12px var(--base-shadow-color);
+
+  // === Motion — durations + easings (WS7.11) ===
+  --base-duration-fast: 0.1s;
+  --base-duration-normal: 0.15s;
+  --base-duration-medium: 0.25s;
+  --base-duration-slow: 0.3s;
+  --base-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --base-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --base-ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+  // === Z-index scale — generic stacking tiers (WS7.12) ===
+  // The shared contract the shell + overlays coordinate against. App-specific
+  // panel tiers live in pure-admin-core, not here.
+  --base-z-dropdown: #{$z-index-dropdown};
+  --base-z-modal-backdrop: #{$z-index-modal-backdrop};
+  --base-z-modal: #{$z-index-modal};
+  --base-z-popover: #{$z-index-popover};
+  --base-z-toast: #{$z-index-toast};
+  --base-z-tooltip: #{$z-index-tooltip};
+}
+
+// ============================================================================
+// DERIVED TOKENS — TEXT CONTRAST TIERS + SURFACE TINTS
+// ============================================================================
+// These tokens use `color-mix(... var(--pc-text-color-1) ...)` to derive
+// theme-aware contrast levels. They MUST be emitted at every selector that
+// could carry an override of --pc-text-color-1, because CSS custom property
+// substitution bakes nested var() references at the *defining element*, not
+// the using element. If we only defined these at `:root, .pc-mode-light`,
+// the light-mode text colour would be frozen into the value, and elements
+// inside `.pc-mode-dark` (which overrides --pc-text-color-1 at body) would
+// inherit the light-mode-baked tier values → low contrast on dark surfaces.
+//
+// Emitting at all three selectors causes each scope to recompute the tiers
+// against its own --pc-text-color-1. The selector list `:root, .pc-mode-light,
+// .pc-mode-dark` covers html, body in light mode, and body in dark mode —
+// regardless of which class layout each theme uses for mode switching.
+//
+// This is a TOP-LEVEL rule (not inside the mixin) because themes only call
+// the mixin from their light-mode block; they don't call it again in the
+// dark-mode block. Emitting at framework level means themes get correct
+// dark-mode tiers without changing any theme code.
+//
+// Override these per-theme by redefining them in the same scope you
+// override --pc-text-color-1.
+// ============================================================================
+
+:root,
+.pc-mode-light,
+.pc-mode-dark {
+  --pc-text-strong:    color-mix(in srgb, var(--pc-text-color-1) 85%, transparent);
+  --pc-text-secondary: color-mix(in srgb, var(--pc-text-color-1) 70%, transparent);
+  --pc-text-tertiary:  color-mix(in srgb, var(--pc-text-color-1) 55%, transparent);
+  --pc-surface-hover:  color-mix(in srgb, var(--pc-text-color-1) 4%, transparent);
+  --pc-surface-track:  color-mix(in srgb, var(--pc-text-color-1) 12%, transparent);
+}
+
+// ============================================================================
+// PURE-CSS FOUNDATION TOKENS — the base runtime custom-property contract
+// ============================================================================
+// pure-css is a *foundation*: it ships only the BASE token contract — the
+// tokens its own CSS (grid / utilities / reboot / scrollbars) consumes, plus
+// the universal theming primitives (surfaces, text, accent, links, border,
+// the semantic role identities + their utility text colours, the theme
+// palette slots, and the border-radius scale).
+//
+// COMPONENT tokens (buttons, cards, tables, modals, badges, tooltips, panels,
+// command palette, sentiment scale, form spacing, the derived contextual/alert
+// surfaces, admin layout chrome, …) live entirely in pure-admin-core now —
+// both the `$`-vocabulary (core's `variables/_components.scss`) and the emit
+// mixins (`output-pc-component-variables` / `-mode-variables` /
+// `output-pc-alert-variables-{light,dark}`). They derive from the same $base-*
+// source of truth defined here, so a theme still overrides one place; only the
+// component layer itself lives next to the component CSS that consumes it.
+// ============================================================================
+
+@mixin output-pc-css-variables {
+  // Tells the browser whether this scope is light or dark so native UA
+  // elements (scrollbars, form controls) and `light-dark()` resolve correctly.
+  // Override $theme-color-scheme before importing variables for always-dark
+  // themes; for dual-mode themes leave `light` and add `color-scheme: dark;`
+  // to the `.pc-mode-dark` block.
+  color-scheme: #{$theme-color-scheme};
+
+  // Surfaces. NOTE: pure-admin's --pc-main-bg is the *page* surface and
+  // --pc-subtle-bg the *card* surface — a legacy naming inversion vs the
+  // --base-* model (--base-main-bg = card), so those two stay compile-time to
+  // avoid a value flip. --pc-page-bg maps cleanly and is relinked.
+  --pc-main-bg: #{$main-bg};
+  --pc-page-bg: var(--base-page-bg, #{$page-bg});
+  --pc-subtle-bg: #{$subtle-bg};
+
+  // Interaction-STATE surfaces — a distinct axis from the elevation ladder
+  // above (page/main/subtle). Track --base-hover/active-bg live so they follow
+  // a theme's per-mode overrides; equal to --pc-subtle-bg by default but
+  // overridable independently. Components must use these for :hover/:active
+  // fills — never a surface token like --pc-subtle-bg. (subtle de-conflation)
+  --pc-hover-bg: var(--base-hover-bg, #{$base-hover-bg});
+  --pc-active-bg: var(--base-active-bg, #{$base-active-bg});
+
+  // Text — follow the shared --base-* tokens at runtime.
+  --pc-text-color-1: var(--base-text-color-1, #{$text-color-1});
+  --pc-text-color-2: var(--base-text-color-2, #{$text-color-2});
+
+  // Accent — -light derives from --pc-accent at runtime so theme overrides cascade.
+  --pc-accent: var(--base-accent-color, #{$accent-color});
+  --pc-accent-hover: #{$accent-hover};
+  --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
+
+  // Links — derive from accent so theme overrides cascade automatically.
+  // Hover mixes 50% toward currentColor (inherited text colour at the use site),
+  // so it auto-darkens on light themes and auto-lightens on dark themes.
+  --pc-link-color: var(--pc-accent);
+  --pc-link-color-hover: color-mix(in srgb, var(--pc-link-color), currentColor 50%);
+  --pc-link-color-visited: var(--pc-link-color);
+
+  // Border — a live reference to --base-border-color (so a runtime --base-*
+  // override cascades), with the build-time value as the literal fallback.
+  --pc-border-color: var(--base-border-color, #{$border-color});
+
+  // Semantic role identities — the single source for the four roles. Component
+  // surfaces (--pc-*-bg, alerts, buttons) derive from these via var() in
+  // pure-admin, so retuning a role here cascades everywhere.
+  --pc-success: #{$base-success-color};
+  --pc-warning: #{$base-warning-color};
+  --pc-danger:  #{$base-danger-color};
+  --pc-info:    #{$base-info-color};
+
+  // Role text colours — consumed by the .text-{success,danger,warning,info}
+  // utilities (utilities.scss). Kept in the base contract for that reason.
+  --pc-success-text: #{$success-text};
+  --pc-danger-text:  #{$danger-text};
+  --pc-warning-text: #{$warning-text};
+  --pc-info-text:    #{$info-text};
+
+  // Theme palette slots (1–9) + paired contrast text. Consumed by the
+  // .text-color-* utilities; themes override $color-N for branded palettes.
+  // Alias the promoted --base-color-* palette (WS7.6) so overriding a slot in
+  // either namespace cascades; the $literal is the build-time fallback.
+  --pc-color-1: var(--base-color-1, #{$color-1});
+  --pc-color-2: var(--base-color-2, #{$color-2});
+  --pc-color-3: var(--base-color-3, #{$color-3});
+  --pc-color-4: var(--base-color-4, #{$color-4});
+  --pc-color-5: var(--base-color-5, #{$color-5});
+  --pc-color-6: var(--base-color-6, #{$color-6});
+  --pc-color-7: var(--base-color-7, #{$color-7});
+  --pc-color-8: var(--base-color-8, #{$color-8});
+  --pc-color-9: var(--base-color-9, #{$color-9});
+  --pc-color-1-text: var(--base-color-1-text, #{$color-1-text});
+  --pc-color-2-text: var(--base-color-2-text, #{$color-2-text});
+  --pc-color-3-text: var(--base-color-3-text, #{$color-3-text});
+  --pc-color-4-text: var(--base-color-4-text, #{$color-4-text});
+  --pc-color-5-text: var(--base-color-5-text, #{$color-5-text});
+  --pc-color-6-text: var(--base-color-6-text, #{$color-6-text});
+  --pc-color-7-text: var(--base-color-7-text, #{$color-7-text});
+  --pc-color-8-text: var(--base-color-8-text, #{$color-8-text});
+  --pc-color-9-text: var(--base-color-9-text, #{$color-9-text});
+
+  // Border-radius scale — derived from the --base-border-radius-* contract (the
+  // same unitless rem-multipliers the web/svelte components read; e.g.
+  // web-multiselect: `calc(var(--base-border-radius-md) * --ms-rem)`). Multiplying
+  // by 1rem yields px at pure-css's 10px rem base (0.6 → 0.6rem → 6px) and keeps
+  // the scale live: overriding --base-border-radius-* at runtime re-rounds
+  // pure-css's own elements and the components together, instead of the old baked
+  // 2/4/8px literals that ignored the base contract. The $base-* multipliers are
+  // the fallbacks. NOTE: --pc-border-radius (unsuffixed) is the MID (-md) step.
+  --pc-border-radius-sm: calc(var(--base-border-radius-sm, #{$base-border-radius-sm}) * 1rem);
+  --pc-border-radius: calc(var(--base-border-radius-md, #{$base-border-radius-md}) * 1rem);
+  --pc-border-radius-lg: calc(var(--base-border-radius-lg, #{$base-border-radius-lg}) * 1rem);
+}