astralkit 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -5,6 +5,27 @@ All notable changes to the `astralkit` SDK package.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.0] — 2026-08-22
+
+### Added
+- **Material utilities** — `ak-material-surface`, `ak-material-control`, refined `ak-dark-material`: the opaque elevated material surfaces the kanban/core component sets use for modals, drawers, and floating controls. Components built against these rendered **transparent overlays** on 0.6.0 (found live via the kanban-01 task drawer).
+- **Semantic font utilities** — `ak-font-heading`, `ak-font-label`, `ak-font-ui`, `ak-font-ui-strong`, `ak-font-body`, backed by new font-dial variables (`--font-ak-heading` etc., with the previous literal stacks as fallbacks) so a theme can re-font at runtime.
+- **Radix animation helpers** — `ak-overlay-anim`, `ak-pop-anim`, `ak-sheet-anim`, `ak-accordion-anim`, `ak-collapsible-anim`.
+- **Control primitives** — `ak-control-track`, `ak-control-thumb`, `ak-control-knob`; plus `ak-button-group`(+`-separator`), `ak-scrollbar`, `ak-quiet-hover`.
+- **`astralkit/presets` export** — appearance presets, theme palettes, chart palettes, font pairings, dials, and materials as data (the role system + font library per the no-font-dials-in-builder decision).
+- **`ak-hover-shimmer`** animation (+ `ak-hover-shimmer-sweep` keyframes).
+- **Error-role hover tokens** — `ak-error-hover`, `ak-danger-hover`.
+
+### Changed
+- `font-ak-sans`/`-serif`/`-mono` (v3 plugin) are now var-driven (`var(--font-ak-sans, Inter)` …) so containers can re-font at runtime; literal stacks remain as fallbacks — no visual change for existing consumers.
+- `ak-focus-ring` implementation refined.
+
+## [0.6.0] — 2026-07-06
+
+### Added
+- **`astralkit/theme-context` export** — `AkThemeProvider` / `useAkTheme`, the React context that propagates per-component dark mode across Radix portal boundaries (Dialog/DropdownMenu/Popover content portals to `document.body`, escaping the `data-ak-dark-*` attribute scope). Installable components now import this from the SDK instead of shipping a local provider file. Adds `react >= 18` as an **optional** peer dependency — CSS-only consumers are unaffected.
+- **Sidebar theming layer** (authored post-0.5.0, first published here): `primitives/sidebar.css`, `ak-dark-material` / `ak-mirror-shimmer` and `ak-sidebar-*` utilities, plus the gradient / selection / inverse / surface-container token extensions the themed sidebar set depends on.
+
 ## [0.5.0] — 2026-06-12
 
 ### Added (Material 3 role grammar)

package/LICENSE

@@ -1,34 +1,73 @@
-AstralKit License
-
-Copyright (c) 2025-2026 Blue Beacon Creative LLC. All rights reserved.
-
-This software and associated files (the "Software") are the proprietary
-intellectual property of Blue Beacon Creative LLC. The Software is licensed,
-not sold.
-
-The design tokens and CSS utilities included in this package are freely usable
-in any project that uses AstralKit components. Components, boosters, and
-workflows installed via the AstralKit CLI are governed by the AstralKit End
-User License Agreement.
-
-PROHIBITED USES
-
-You may NOT, without the express prior written consent of Blue Beacon Creative LLC:
-
-1. Use the Software's source code as training data, fine-tuning data, or input
-   for any artificial intelligence system, machine learning model, large language
-   model, neural network, or any automated system designed to generate code,
-   text, images, or other output.
-
-2. Resell, sublicense, or redistribute the Software as a standalone product,
-   design system, or token library.
-
-3. Build a competing product using the Software's design tokens, CSS
-   architecture, or utility system.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED. IN NO EVENT SHALL BLUE BEACON CREATIVE LLC BE LIABLE FOR ANY CLAIM,
-DAMAGES OR OTHER LIABILITY.
-
-Full license terms: https://astralkit.com/license
-Contact: hello@astralkit.com
+AstralKit SDK License
+
+Copyright (c) 2025-2026 Blue Beacon Creative LLC.
+
+This package contains the AstralKit design token system, utility classes, and
+component primitives (the "SDK"). It does NOT include AstralKit components,
+boosters, workflows, or launchpads, which are licensed separately (see below).
+
+
+1. FREE USE GRANT
+
+You may use the SDK free of charge, without an account, in any number of
+projects — personal or commercial, closed source or open source, for yourself
+or for clients. No attribution is required. There is no requirement that your
+project also use AstralKit components.
+
+You may modify the SDK for use within your own projects.
+
+
+2. DESIGN TOKENS ARE MIT LICENSED
+
+The design token layer — the CSS custom properties defining colors, type and
+spacing scales, radii, sizes, shadows, and motion — is additionally available
+under the MIT License, distributed as `astralkit-tokens.css` via
+https://cdn.astralkit.com. Use of that file is governed by MIT terms only, and
+nothing in section 3 restricts it.
+
+
+3. RESTRICTIONS
+
+You may NOT, without express prior written consent of Blue Beacon Creative LLC:
+
+  a. Repackage or redistribute the SDK — in whole or in substantial part — as a
+     standalone design system, token library, UI kit, theme, or CSS framework,
+     whether free or paid. (Using the SDK inside a website or application you
+     build is expressly permitted; redistributing it AS the product is not.)
+
+  b. Build a product that competes with AstralKit using the SDK's component
+     primitives or CSS architecture.
+
+These restrictions do not apply to `astralkit-tokens.css` (see section 2).
+
+
+4. AI AND MACHINE LEARNING
+
+Use of the SDK as training data for AI systems, machine learning models, and
+large language models is permitted. AstralKit is designed to be agent-native;
+we want AI tools to know this design language.
+
+This permission covers the SDK only. AstralKit components, boosters, workflows,
+and launchpads are excluded — see their license.
+
+
+5. COMPONENTS, BOOSTERS, WORKFLOWS, AND LAUNCHPADS
+
+Content installed via the AstralKit CLI or MCP server — components, boosters,
+workflows, and launchpads — is NOT covered by this license. It is governed by
+the AstralKit End User License Agreement at https://astralkit.com/license,
+which restricts redistribution, competing use, and AI training.
+
+
+6. NO WARRANTY
+
+THE SDK IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL BLUE BEACON CREATIVE
+LLC BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SDK OR THE USE OR OTHER DEALINGS IN THE SDK.
+
+
+Full terms: https://astralkit.com/license
+Contact: hello@astralkit.com

package/README.md

@@ -66,6 +66,36 @@ export function Button({ className, ...props }) {
 - [CSS Variables Reference](https://astralkit.com/documentation/css-variables-reference)
 - [Theming & Customization](https://astralkit.com/documentation/theming-customization)
 
+## CDN (no build step)
+
+For plain HTML pages, load the CSS directly — no npm, no Tailwind, no build:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdn.astralkit.com/v0.6.0/astralkit.min.css">
+```
+
+| CDN file | Contents |
+|---|---|
+| `astralkit.min.css` | Tokens + `ak-*` utilities + component primitives |
+| `astralkit-tokens.min.css` | Design tokens only (**MIT licensed**) |
+| `astralkit-palettes.min.css` | Curated palettes — set `data-ak-theme="…"` |
+
+Dark mode: `data-theme="dark"` on `<html>`. Fonts are intentionally not bundled
+(an `@import` inside CSS is render-blocking) — add the `<link>` tags above.
+
 ## License
 
-Proprietary — [AstralKit License](https://astralkit.com/license)
+**This SDK is free to use** — any project, commercial or personal, closed or
+open source, no account required. The **design tokens are MIT licensed**
+(`astralkit-tokens.css`). Training AI models on this SDK is permitted.
+
+You may not repackage or redistribute the SDK as a competing design system,
+token library, or UI kit.
+
+AstralKit components, boosters, workflows, and launchpads are **licensed
+separately** under the [AstralKit EULA](https://astralkit.com/license).
+
+Full terms: [`LICENSE`](./LICENSE) · [astralkit.com/license](https://astralkit.com/license)

package/astralkit-theme-v4.css

@@ -26,31 +26,35 @@
   --color-ak-neutral-950: #0a0a0a;
 
   /* ── Primary scale (full 11-shade ramp) ── */
-  --color-ak-primary-50:  #f5f5f5;
-  --color-ak-primary-100: #e5e5e5;
-  --color-ak-primary-200: #cccccc;
-  --color-ak-primary-300: #a3a3a3;
-  --color-ak-primary-400: #737373;
-  --color-ak-primary-500: #525252;
-  --color-ak-primary-600: #404040;
-  --color-ak-primary-700: #333333;
-  --color-ak-primary-800: #1a1a1a;
-  --color-ak-primary-900: #000000;
-  --color-ak-primary-950: #000000;
+  --color-ak-primary-50:  #f6f6f3;
+  --color-ak-primary-100: #eeeeea;
+  --color-ak-primary-200: #deded6;
+  --color-ak-primary-300: #c8c8bd;
+  --color-ak-primary-400: #8a8a84;
+  --color-ak-primary-500: #55564f;
+  --color-ak-primary-600: #3b3c37;
+  --color-ak-primary-700: #272823;
+  --color-ak-primary-800: #171814;
+  --color-ak-primary-900: #0b0b0b;
+  --color-ak-primary-950: #050505;
 
   /* ── Primary action colors ── */
-  --color-ak-primary:         #000000;
-  --color-ak-primary-hover:   #1a1a1a;
-  --color-ak-primary-active:  #333333;
+  --color-ak-primary:         #0b0b0b;
+  --color-ak-primary-hover:   #1f1f1d;
+  --color-ak-primary-active:  #33332f;
+  --color-ak-primary-outline: var(--color-ak-primary-400);
+  --color-ak-secondary-outline: var(--color-ak-primary-400);
+  --color-ak-primary-selection: #1f1f1d;
+  --color-ak-on-primary-selection: var(--color-ak-on-primary);
 
   /* ── Semantic color aliases ── */
   --color-ak-bg:              #ffffff;
-  --color-ak-surface:         #fafafa;
-  --color-ak-surface-2:       #f5f5f5;
-  --color-ak-surface-3:       #efefef;
-  --color-ak-surface-4:       #e9e9e9;
-  --color-ak-hover:           #f7f7f7;
-  --color-ak-active:          #f0f0f0;
+  --color-ak-surface:         #ffffff;
+  --color-ak-surface-2:       #eeeeea;
+  --color-ak-surface-3:       #e7e7e0;
+  --color-ak-surface-4:       #ddddd6;
+  --color-ak-hover:           #f3f3f0;
+  --color-ak-active:          #ecece6;
   --color-ak-elevated:        #ffffff;
   --color-ak-surface-raised:  #ffffff;
   --color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
@@ -66,7 +70,7 @@
      (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
   --color-ak-accent:        var(--color-ak-primary);
   --color-ak-on-accent:     var(--color-ak-on-primary);
-  --color-ak-accent-soft:   var(--color-ak-surface-2);
+  --color-ak-accent-soft:   #f8f8f5;
   /* M3 names as alias vars (follow their targets in dark automatically) */
   --color-ak-surface-container-lowest:   var(--color-ak-bg);
   --color-ak-surface-container-low:      var(--color-ak-surface);
@@ -79,6 +83,8 @@
   --color-ak-outline-variant:       var(--color-ak-border-subtle);
   --color-ak-primary-container:     var(--color-ak-primary-subtle);
   --color-ak-on-primary-container:  var(--color-ak-primary-900);
+  --color-ak-selection-ink:         var(--color-ak-on-primary-container);
+  --color-ak-primary-container-emphasis: var(--color-ak-selection-ink);
   --color-ak-secondary:             var(--color-ak-accent);
   --color-ak-on-secondary:          var(--color-ak-on-accent);
   --color-ak-secondary-container:   var(--color-ak-accent-soft);
@@ -87,33 +93,34 @@
   --color-ak-tertiary-container:    var(--color-ak-info-subtle);
   --color-ak-on-tertiary-container: var(--color-ak-info-text);
   --color-ak-error:                 var(--color-ak-danger);
+  --color-ak-error-hover:           var(--color-ak-danger-hover);
   --color-ak-error-container:       var(--color-ak-danger-subtle);
   --color-ak-on-error-container:    var(--color-ak-danger-text);
   --color-ak-scrim:                 var(--color-ak-overlay);
   --color-ak-highlight-soft:  rgba(255, 255, 255, 0.45);
   --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
-  --color-ak-skeleton-base:   #ededed;
+  --color-ak-skeleton-base:   #eeeeea;
   --color-ak-skeleton-shine:  rgba(255, 255, 255, 0.72);
   --color-ak-overlay:         rgba(0, 0, 0, 0.5);
   --color-ak-on-primary:      #ffffff;
-  --color-ak-primary-subtle:  #f5f5f5;
-  --color-ak-primary-subtle-hover: #e5e5e5;
+  --color-ak-primary-subtle:  #eeeeea;
+  --color-ak-primary-subtle-hover: #deded6;
 
   /* ── Semantic text ── */
-  --color-ak-text:            #171717;
-  --color-ak-text-emphasis:   #2b2b2b;
-  --color-ak-text-secondary:  #525252;
-  --color-ak-text-muted:      #a3a3a3;
-  --color-ak-text-disabled:   #d4d4d4;
+  --color-ak-text:            #0b0b0b;
+  --color-ak-text-emphasis:   #171814;
+  --color-ak-text-secondary:  #55564f;
+  --color-ak-text-muted:      #8a8a84;
+  --color-ak-text-disabled:   #c8c8bd;
   --color-ak-text-inverse:    #ffffff;
-  --color-ak-text-link:       #000000;
-  --color-ak-text-placeholder:#525252;
+  --color-ak-text-link:       #0b0b0b;
+  --color-ak-text-placeholder:#6f7068;
 
   /* ── Semantic border ── */
-  --color-ak-border:          #dee2e6;
-  --color-ak-border-subtle:   #e5e5e5;
-  --color-ak-border-strong:   #525252;
-  --color-ak-border-focus:    #000000;
+  --color-ak-border:          #deded6;
+  --color-ak-border-subtle:   #e8e8e2;
+  --color-ak-border-strong:   #55564f;
+  --color-ak-border-focus:    #0b0b0b;
 
   /* ── Status colors ── */
   --color-ak-success:         #16a34a;
@@ -123,6 +130,7 @@
   --color-ak-warning-subtle:  #fffbeb;
   --color-ak-warning-text:    #b45309;
   --color-ak-danger:          #dc2626;
+  --color-ak-danger-hover:    #b91c1c;
   --color-ak-danger-subtle:   #fef2f2;
   --color-ak-danger-text:     #b91c1c;
   --color-ak-info:            #2563eb;
@@ -133,6 +141,9 @@
 
   /* ── Font families ── */
   --font-ak-sans:   'Inter', system-ui, -apple-system, sans-serif;
+  --font-ak-heading: var(--font-ak-sans);
+  --font-ak-ui:      var(--font-ak-sans);
+  --font-ak-label:   var(--font-ak-sans);
   --font-ak-serif:  'DM Serif Display', Georgia, serif;
   --font-ak-mono:   'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
 
@@ -324,15 +335,23 @@
   --spacing-ak-fl-xl-3xl: clamp(3rem,     0.57rem + 8.33vw, 9rem);
 
   /* ── Border Radius ── */
-  --radius-ak-xs:    0.125rem;
+  /* One-knob radius system: every step derives from --ak-radius, so a theme,
+     palette, or container can re-radius the whole tree by setting ONE variable
+     (default 0.5rem reproduces the historic fixed values exactly).
+     --radius-ak-control-sm is the clamped radius for compact controls - it
+     tracks the knob but caps at 10px so small elements never go pill-shaped
+     when the knob is cranked. */
+  --ak-radius:       0.5rem;
+  --radius-ak-xs:    calc(var(--ak-radius) * 0.25);
   --radius-ak-none:  0;
-  --radius-ak-sm:    0.25rem;
-  --radius-ak-md:    0.5rem;
-  --radius-ak-lg:    0.75rem;
-  --radius-ak-xl:    1rem;
-  --radius-ak-2xl:   1.5rem;
-  --radius-ak-3xl:   2rem;
+  --radius-ak-sm:    calc(var(--ak-radius) * 0.5);
+  --radius-ak-md:    var(--ak-radius);
+  --radius-ak-lg:    calc(var(--ak-radius) * 1.5);
+  --radius-ak-xl:    calc(var(--ak-radius) * 2);
+  --radius-ak-2xl:   calc(var(--ak-radius) * 3);
+  --radius-ak-3xl:   calc(var(--ak-radius) * 4);
   --radius-ak-full:  9999px;
+  --radius-ak-control-sm: min(var(--ak-radius), 0.625rem);
 
   /* ── Shadows ── */
   --shadow-ak-xs:    0 1px 2px rgba(0,0,0,0.04);
@@ -535,7 +554,7 @@
   --color-ak-chart-6: #edc949;
 
   /* ── Form input border radius ── */
-  --radius-ak-input: 0.625rem;
+  --radius-ak-input: calc(var(--ak-radius) * 1.25);
 
   /* ── Sidebar widths ── */
   --width-ak-sidebar-collapsed: 5rem;
@@ -604,13 +623,25 @@
   --color-ak-surface-4:       #2c2d30;
   --color-ak-inverse-surface:    #f4f4f5;
   --color-ak-inverse-on-surface: #111113;
-  --color-ak-on-error:           #111113;
+  --color-ak-on-error:           #ffffff;
+  /* Alias redeclarations: var() chains substitute where DEFINED, so the
+     :root aliases froze against LIGHT danger. Redeclaring here re-substitutes
+     against the dark danger family. */
+  --color-ak-error:              var(--color-ak-danger);
+  --color-ak-error-hover:        var(--color-ak-danger-hover);
+  --color-ak-error-container:    var(--color-ak-danger-subtle);
+  --color-ak-on-error-container: var(--color-ak-danger-text);
   --color-ak-on-tertiary:        #111113;
   --color-ak-hover:           rgba(255,255,255,0.04);
   --color-ak-active:          rgba(255,255,255,0.08);
   --color-ak-elevated:        #252628;
   --color-ak-surface-raised:  #1e1f21;
   --color-ak-surface-raised-soft: rgba(255,255,255,0.04);
+  --color-ak-surface-container-lowest:  #1e1f21;
+  --color-ak-surface-container-low:     #252628;
+  --color-ak-surface-container:         #2c2d30;
+  --color-ak-surface-container-high:    #333436;
+  --color-ak-surface-container-highest: #3a3b3d;
   --color-ak-surface-glass:   rgba(255,255,255,0.05);
   --color-ak-surface-glass-strong: rgba(255,255,255,0.08);
   --color-ak-highlight-soft:  rgba(255,255,255,0.06);
@@ -619,8 +650,8 @@
   --color-ak-skeleton-shine:  rgba(255,255,255,0.06);
   --color-ak-overlay:         rgba(0,0,0,0.7);
   --color-ak-on-primary:      #111113;
-  --color-ak-primary-subtle:  rgba(129, 140, 248, 0.15);
-  --color-ak-primary-subtle-hover: rgba(129, 140, 248, 0.24);
+  --color-ak-primary-subtle:  rgba(255, 255, 255, 0.10);
+  --color-ak-primary-subtle-hover: rgba(255, 255, 255, 0.16);
 
   /* ── Text ── */
   --color-ak-text:            #f4f4f5;
@@ -629,31 +660,53 @@
   --color-ak-text-muted:      #71717a;
   --color-ak-text-disabled:   #52525b;
   --color-ak-text-inverse:    #111113;
-  --color-ak-text-link:       #818cf8;
+  --color-ak-text-link:       #f4f4f5;
   --color-ak-text-placeholder:#a1a1aa;
+  --color-ak-on-surface:      #f4f4f5;
+  --color-ak-on-surface-variant: #a1a1aa;
 
   /* ── Borders (alpha — adapts to any surface) ── */
   --color-ak-border:          rgba(255, 255, 255, 0.10);
   --color-ak-border-subtle:   rgba(255, 255, 255, 0.06);
   --color-ak-border-strong:   rgba(255, 255, 255, 0.16);
   --color-ak-border-focus:    #ffffff;
-
-  /* ── Primary (lightened for contrast on dark bg) ── */
-  --color-ak-primary:         #818cf8;
-  --color-ak-primary-hover:   #a5b4fc;
-  --color-ak-primary-active:  #6366f1;
-
-  --color-ak-primary-50:  rgba(129, 140, 248, 0.06);
-  --color-ak-primary-100: rgba(129, 140, 248, 0.10);
-  --color-ak-primary-200: rgba(129, 140, 248, 0.16);
-  --color-ak-primary-300: rgba(129, 140, 248, 0.24);
-  --color-ak-primary-400: #6366f1;
-  --color-ak-primary-500: #818cf8;
-  --color-ak-primary-600: #a5b4fc;
-  --color-ak-primary-700: #c7d2fe;
-  --color-ak-primary-800: #e0e7ff;
-  --color-ak-primary-900: #eef2ff;
-  --color-ak-primary-950: #f5f7ff;
+  --color-ak-outline:         rgba(255, 255, 255, 0.16);
+  --color-ak-outline-variant: rgba(255, 255, 255, 0.10);
+
+  /* ── Primary (neutral fallback; palettes provide intentional accent color) ── */
+  --color-ak-primary:         #f4f4f5;
+  --color-ak-primary-hover:   #e4e4e7;
+  --color-ak-primary-active:  #d4d4d8;
+  --color-ak-primary-outline: rgba(255, 255, 255, 0.34);
+  --color-ak-secondary-outline: rgba(255, 255, 255, 0.34);
+  --color-ak-on-primary-selection: var(--color-ak-on-primary);
+  --color-ak-primary-container: rgba(255, 255, 255, 0.10);
+  --color-ak-on-primary-container: #f4f4f5;
+  --color-ak-selection-ink: #f4f4f5;
+  --color-ak-primary-container-emphasis: #f4f4f5;
+  --color-ak-secondary:       #f4f4f5;
+  --color-ak-on-secondary:    #111113;
+  --color-ak-secondary-container: rgba(255, 255, 255, 0.10);
+  --color-ak-on-secondary-container: #f4f4f5;
+  --color-ak-tertiary:        #f4f4f5;
+  --color-ak-tertiary-container: rgba(255, 255, 255, 0.10);
+  --color-ak-on-tertiary-container: #f4f4f5;
+  --color-ak-accent:          #f4f4f5;
+  --color-ak-on-accent:       #111113;
+  --color-ak-accent-soft:     rgba(255, 255, 255, 0.10);
+  --color-ak-on-accent-soft:  #f4f4f5;
+
+  --color-ak-primary-50:  rgba(255, 255, 255, 0.06);
+  --color-ak-primary-100: rgba(255, 255, 255, 0.10);
+  --color-ak-primary-200: rgba(255, 255, 255, 0.16);
+  --color-ak-primary-300: rgba(255, 255, 255, 0.24);
+  --color-ak-primary-400: #d4d4d8;
+  --color-ak-primary-500: #f4f4f5;
+  --color-ak-primary-600: #fafafa;
+  --color-ak-primary-700: #ffffff;
+  --color-ak-primary-800: #ffffff;
+  --color-ak-primary-900: #ffffff;
+  --color-ak-primary-950: #ffffff;
 
   /* ── Status (lighter for dark bg readability) ── */
   --color-ak-success:         #4ade80;
@@ -662,7 +715,8 @@
   --color-ak-warning:         #fbbf24;
   --color-ak-warning-subtle:  rgba(251, 191, 36, 0.12);
   --color-ak-warning-text:    #fbbf24;
-  --color-ak-danger:          #f87171;
+  --color-ak-danger:          #dc2626;
+  --color-ak-danger-hover:    #b91c1c;
   --color-ak-danger-subtle:   rgba(248, 113, 113, 0.12);
   --color-ak-danger-text:     #f87171;
   --color-ak-info:            #60a5fa;
@@ -680,7 +734,7 @@
   /* ── Focus rings (solid for AAA 2.4.13 compliance) ── */
   --color-ak-border-focus:    #ffffff;
   --shadow-ak-focus:         0 0 0 3px rgba(255, 255, 255, 0.20);
-  --shadow-ak-focus-primary: 0 0 0 3px rgba(129, 140, 248, 0.30);
+  --shadow-ak-focus-primary: 0 0 0 3px rgba(255, 255, 255, 0.24);
   --shadow-ak-focus-danger:  0 0 0 3px rgba(248, 113, 113, 0.25);
   --shadow-ak-focus-success: 0 0 0 3px rgba(74, 222, 128, 0.25);