astralkit 0.2.0 → 0.3.1

package/astralkit-utilities.css

@@ -1,567 +1,543 @@
 /* ══════════════════════════════════════════════════════════
-   AstralKit Component Primitives
-   Only things Tailwind classes can't express:
-   - Pseudo-elements (tooltips)
-   - Parent-state child selectors ([data-expanded] children)
-   - Transitions on width (not supported by Tailwind)
-
-   IMPORTANT: All rules MUST be inside @layer so they don't
-   become unlayered CSS. Unlayered styles override ALL layered
-   utility classes (text-white, text-[#fff], etc.) regardless
-   of specificity — this is how CSS cascade layers work.
-   ══════════════════════════════════════════════════════════ */
-
-@layer base {
-  /* Tailwind v4 preflight already sets a { color: inherit },
-     so we only add text-decoration: none here. */
-  a { text-decoration: none; }
-}
+   AstralKit — Component CSS & Primitives
 
-@layer components {
+   Tokens live in astralkit-theme.css (v3/:root) or
+   astralkit-theme-v4.css (v4/@theme). This file contains
+   only base resets, component primitives, and utility classes.
 
-/* Focus ring — Tailwind v4 has no --focus-* namespace, so this must be a utility class */
-.ak-focus-ring {
-  outline: none;
-}
-.ak-focus-ring:focus-visible {
-  outline: 2px solid var(--color-ak-border-focus);
-  outline-offset: 2px;
-}
-/* Inset variant for menu items inside panels */
-.ak-focus-ring-inset {
-  outline: none;
-}
-.ak-focus-ring-inset:focus-visible {
-  outline: 2px solid var(--color-ak-border-focus);
-  outline-offset: -2px;
-}
-
-/* ── Heading Presets ──
-   Composite heading styles. Usage: <h1 class="ak-h1">
-   Combine font-size, line-height, letter-spacing, weight. */
-.ak-h1 {
-  font-size: var(--text-ak-5xl);
-  line-height: var(--leading-ak-tight);
-  letter-spacing: var(--tracking-ak-tighter);
-  font-weight: 700;
-  color: var(--color-ak-text);
-}
-.ak-h2 {
-  font-size: var(--text-ak-4xl);
-  line-height: var(--leading-ak-tight);
-  letter-spacing: var(--tracking-ak-tight);
-  font-weight: 700;
-  color: var(--color-ak-text);
-}
-.ak-h3 {
-  font-size: var(--text-ak-3xl);
-  line-height: var(--leading-ak-snug);
-  letter-spacing: var(--tracking-ak-tight);
-  font-weight: 600;
-  color: var(--color-ak-text);
-}
-.ak-h4 {
-  font-size: var(--text-ak-2xl);
-  line-height: var(--leading-ak-snug);
-  letter-spacing: var(--tracking-ak-normal);
-  font-weight: 600;
-  color: var(--color-ak-text);
-}
-.ak-h5 {
-  font-size: var(--text-ak-xl);
-  line-height: var(--leading-ak-snug);
-  letter-spacing: var(--tracking-ak-normal);
-  font-weight: 600;
-  color: var(--color-ak-text);
-}
-.ak-h6 {
-  font-size: var(--text-ak-lg);
-  line-height: var(--leading-ak-snug);
-  letter-spacing: var(--tracking-ak-normal);
-  font-weight: 500;
-  color: var(--color-ak-text);
-}
-
-/* ── Body / Caption Presets ── */
-.ak-body {
-  font-size: var(--text-ak-base);
-  line-height: var(--leading-ak-normal);
-  color: var(--color-ak-text);
-}
-.ak-body-secondary {
-  font-size: var(--text-ak-base);
-  line-height: var(--leading-ak-normal);
-  color: var(--color-ak-text-secondary);
-}
-.ak-small {
-  font-size: var(--text-ak-sm);
-  line-height: var(--leading-ak-normal);
-  color: var(--color-ak-text-secondary);
-}
-.ak-caption {
-  font-size: var(--text-ak-xs);
-  line-height: var(--leading-ak-normal);
-  color: var(--color-ak-text-muted);
-}
-.ak-label {
-  font-size: var(--text-ak-xs);
-  line-height: var(--leading-ak-normal);
-  font-weight: 600;
-  letter-spacing: var(--tracking-ak-wider);
-  text-transform: uppercase;
-  color: var(--color-ak-text-muted);
-}
-
-/* ── UI Chrome Typography Presets ──
-   For shell, nav, panels, forms — NOT document content.
-   Each bundles size + weight + line-height + tracking + color. */
-.ak-overline    { font-size: var(--text-ak-xs);   font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ak-text-muted); }
-.ak-form-label  { font-size: var(--text-ak-sm);   font-weight: 500; line-height: 1; color: var(--color-ak-text); }
-.ak-helper      { font-size: var(--text-ak-xs);   font-weight: 400; line-height: 1.3; color: var(--color-ak-text-muted); }
-.ak-ui-body     { font-size: var(--text-ak-sm);   font-weight: 400; line-height: 1.5; color: var(--color-ak-text-secondary); }
-.ak-nav-label-text { font-size: var(--text-ak-base);  font-weight: 500; line-height: 1; color: var(--color-ak-text); }
-.ak-card-title  { font-size: var(--text-ak-base);  font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ak-text); }
-.ak-panel-title { font-size: var(--text-ak-lg);    font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ak-text); }
-.ak-page-title  { font-size: var(--text-ak-xl);    font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-ak-text); }
-
-/* Icon sizes (referenced by theme, will move to @theme when Tailwind supports --size-*) */
-.ak-icon-xs  { font-size: var(--size-ak-icon-xs);  line-height: 1; }
-.ak-icon-sm  { font-size: var(--size-ak-icon-sm);  line-height: 1; }
-.ak-icon-md  { font-size: var(--size-ak-icon-md);  line-height: 1; }
-.ak-icon-lg  { font-size: var(--size-ak-icon-lg);  line-height: 1; }
-.ak-icon-xl  { font-size: var(--size-ak-icon-xl);  line-height: 1; }
-.ak-icon-2xl { font-size: var(--size-ak-icon-2xl); line-height: 1; }
-.ak-icon-3xl { font-size: var(--size-ak-icon-3xl); line-height: 1; }
-
-/* Sidebar: width transition (Tailwind can't transition between two width values) */
-[data-ak-sidebar] {
-  width: 5rem;
-  transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-[data-ak-sidebar][data-expanded] {
-  width: 18rem;
-  align-items: stretch;
-}
-
-/* Expanded: nav items go full-width left-aligned */
-[data-expanded] .ak-nav-item {
-  width: 100%;
-  justify-content: flex-start;
-  padding-left: 1rem;
-  padding-right: 0.75rem;
-  gap: 0.75rem;
-}
-[data-expanded] .ak-nav-item.ak-logo-item {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  gap: 0.5rem;
-}
-
-/* Mobile bar labels */
-.ak-mobile-label { font-size: var(--size-ak-icon-sm); font-weight: 500; line-height: 1.25; }
-
-/* Nav labels: hidden collapsed, shown expanded */
-.ak-nav-label {
-  display: none;
-  font-size: 1rem;
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  min-width: 0;
-  text-align: left;
-}
-[data-expanded] .ak-nav-label { display: block; }
-
-/* Tooltips (CSS pseudo-elements — can't do in Tailwind) */
-[data-ak-tooltip] { position: relative; }
-[data-ak-tooltip]::before {
-  content: '';
-  position: absolute;
-  left: 100%; top: 50%; transform: translateY(-50%);
-  width: 0.75rem; height: 100%;
-  pointer-events: none;
-}
-[data-ak-tooltip]::after {
-  content: attr(data-ak-tooltip);
-  position: absolute;
-  left: calc(100% + 0.5rem); top: 50%;
-  transform: translateY(-50%);
-  background: var(--color-ak-text);
-  color: var(--color-ak-text-inverse);
-  font-size: var(--size-ak-icon-sm);
-  line-height: 1.25;
-  padding: 0.375rem 0.75rem;
-  border-radius: var(--radius-ak-md);
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: var(--z-ak-modal);
-}
-[data-ak-tooltip]:hover::after,
-[data-ak-tooltip]:focus-visible::after { opacity: 1; }
-[data-ak-tooltip]:hover::before { pointer-events: auto; }
-[data-expanded] [data-ak-tooltip]::after,
-[data-expanded] [data-ak-tooltip]::before { display: none; }
-@media (max-width: 767px) {
-  [data-ak-tooltip]::before,
-  [data-ak-tooltip]::after { display: none; }
-}
-
-/* Account switcher: collapsed vs expanded (complex child selectors) */
-[data-expanded] .ak-profile-info { display: flex; }
-[data-expanded] .ak-account-chevron { display: flex; }
-[data-expanded] .ak-account-trigger {
-  justify-content: space-between;
-  border: 1px solid var(--color-ak-border);
-  border-radius: var(--radius-ak-lg);
-  padding: 0.625rem 0.75rem;
-  gap: 0.625rem;
-  min-height: auto;
-}
-[data-expanded] .ak-account-left { gap: 0.625rem; }
-
-/* Mobile overlay transition */
-.ak-mobile-overlay {
-  position: fixed; inset: 0;
-  z-index: var(--z-ak-overlay);
-  background: var(--color-ak-overlay);
-  opacity: 0; visibility: hidden;
-  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
-              visibility 240ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.ak-mobile-overlay-open { opacity: 1; visibility: visible; }
-
-/* Mobile sheet transition */
-.ak-mobile-sheet {
-  position: fixed;
-  bottom: 0; left: 0; right: 0;
-  z-index: var(--z-ak-modal);
-  max-height: 85vh;
-  overflow-y: auto;
-  border-radius: var(--radius-ak-lg) var(--radius-ak-lg) 0 0;
-  transform: translateY(100%);
-  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.ak-mobile-sheet-open { transform: translateY(0); }
-.ak-mobile-sheet-handle {
-  display: flex;
-  justify-content: center;
-  padding-top: var(--spacing-ak-1);
-  touch-action: none;
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: grab;
-}
-.ak-mobile-sheet-handle:active { cursor: grabbing; }
-.ak-mobile-sheet-handle::before {
-  content: "";
-  display: block;
-  width: var(--size-ak-sheet-handle-width);
-  height: var(--size-ak-sheet-handle-height);
-  background: var(--color-ak-sheet-handle);
-  border-radius: var(--radius-ak-full);
-}
-
-/* Profile panel */
-.ak-profile-panel {
-  position: fixed;
-  width: 16rem;
-  background: var(--color-ak-bg);
-  border: 1px solid var(--color-ak-border);
-  border-radius: var(--radius-ak-lg);
-  box-shadow: var(--shadow-ak-lg);
-  opacity: 0; visibility: hidden;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
-              visibility 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: var(--z-ak-modal);
-}
-.ak-profile-panel-open { opacity: 1; visibility: visible; }
+   All CSS is UNLAYERED. No @layer declarations.
+   Compatible with Tailwind v3 and v4.
+   ══════════════════════════════════════════════════════════ */
 
-/* Scrollbar — thin styled scrollbar for any scrollable AstralKit container */
-.ak-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-ak-border-strong) transparent;
-}
-.ak-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.ak-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-.ak-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--color-ak-border-strong);
-  border-radius: var(--radius-ak-full);
-}
-
-/* Raised card / panel surface */
-.ak-surface-raised {
-  background: var(--ak-surface-raised-bg, var(--color-ak-surface-raised));
-  border: 1px solid var(--ak-surface-raised-border, var(--color-ak-border));
-  box-shadow: var(--ak-surface-raised-shadow, var(--shadow-ak-md));
-}
-/* Glass-like elevated surface */
-.ak-surface-glass {
-  background: var(--ak-surface-glass-bg, var(--color-ak-surface-glass));
-  border: 1px solid var(--ak-surface-glass-border, var(--color-ak-border-subtle));
-  backdrop-filter: blur(var(--ak-surface-glass-blur, 12px));
-}
-/* Optional highlight overlay for premium / elevated surfaces */
-.ak-sheen {
-  position: relative;
-}
-.ak-sheen::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: linear-gradient(
-    145deg,
-    var(--ak-sheen-highlight, var(--color-ak-highlight-soft)),
-    rgba(255, 255, 255, 0) 65%
-  );
-  opacity: var(--ak-sheen-opacity, 1);
-  pointer-events: none;
-}
-.ak-sheen-strong {
-  --ak-sheen-highlight: var(--color-ak-highlight-strong);
-}
-/* Standard skeleton block */
-.ak-skeleton {
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(
-    180deg,
-    var(--ak-skeleton-base, var(--color-ak-skeleton-base)),
-    var(--ak-skeleton-base-end, var(--color-ak-surface-2))
-  );
-  border-radius: var(--ak-skeleton-radius, var(--radius-ak-md));
-  color: transparent !important;
-  user-select: none;
-}
-.ak-skeleton::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  transform: translateX(-100%);
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0),
-    var(--ak-skeleton-shine, var(--color-ak-skeleton-shine)),
-    rgba(255, 255, 255, 0)
-  );
-  animation: ak-skeleton-shimmer var(--duration-ak-skeleton) ease-in-out infinite;
-}
-.ak-skeleton-pill {
-  border-radius: var(--radius-ak-full);
-}
-.ak-skeleton-circle {
-  border-radius: var(--radius-ak-full);
-}
-
-/* Shared card shell scaffold */
-.ak-card-shell {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--ak-card-shell-border, var(--color-ak-border));
-  border-radius: var(--ak-card-shell-radius, var(--radius-ak-lg));
-  background: var(--ak-card-shell-bg, var(--color-ak-surface-raised));
-  box-shadow: var(--ak-card-shell-shadow, var(--shadow-ak-md));
-  transition:
-    transform var(--duration-ak-base) var(--ease-ak-default),
-    box-shadow var(--duration-ak-base) var(--ease-ak-default),
-    border-color var(--duration-ak-base) var(--ease-ak-default);
-}
-.ak-card-shell-interactive:hover,
-.ak-card-shell-interactive:focus-within {
-  transform: translateY(var(--ak-card-shell-lift, -2px));
-  border-color: var(--ak-card-shell-border-hover, var(--color-ak-border-strong));
-  box-shadow: var(--ak-card-shell-shadow-hover, var(--shadow-ak-lg));
-}
-.ak-card-shell-inner {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ak-card-shell-gap, var(--spacing-ak-3));
-}
-.ak-card-shell-header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  gap: var(--ak-card-shell-header-gap, var(--spacing-ak-2));
+/* ── Base resets (unlayered — always applies) ── */
+a { text-decoration: none; }
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scroll-padding-top: var(--height-ak-nav, 4.5rem);
+  scroll-padding-bottom: var(--spacing-ak-mobile-bar, 4.5rem);
 }
 
 /* ══════════════════════════════════════════════════════════
-   Layout Primitives
-   Breakpoint-free, intrinsic responsive patterns.
-   Based on Every Layout (Heydon Pickering & Andy Bell).
-   Customize via CSS custom properties on the element.
+   TOKENS are now in astralkit-theme.css (v3) or astralkit-theme-v4.css (v4).
+   This file contains only component CSS, primitives, and base resets.
+   ══════════════════════════════════════════════════════════ */
+/* ══════════════════════════════════════════════════════════
+   COMPONENT PRIMITIVES
+   Unlayered — source order determines cascade priority.
+   Component dark modifiers (e.g. .ak-sidebar-panel--dark) beat
+   [data-theme="dark"] because they come later in the file.
    ══════════════════════════════════════════════════════════ */
+@import "./primitives/focus.css";
+@import "./primitives/typography.css";
+@import "./primitives/icons.css";
+@import "./primitives/sidebar.css";
+@import "./primitives/avatar.css";
+@import "./primitives/navigation.css";
+@import "./primitives/badges.css";
+@import "./primitives/mobile.css";
+@import "./primitives/animations.css";
+@import "./primitives/layout.css";
+@import "./primitives/accounts.css";
+@import "./primitives/forms.css";
+@import "./primitives/effects.css";
 
-/* Stack — vertical spacing between children.
-   Usage: <div class="ak-stack"> or style="--ak-stack-gap: 2rem"
-   Default gap: --spacing-ak-fl-sm (fluid 1rem → 1.5rem) */
-.ak-stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ak-stack-gap, var(--spacing-ak-fl-sm));
-}
-
-/* Cluster — horizontal wrapping group (tags, nav links, badges).
-   Usage: <div class="ak-cluster">
-   Default gap: --spacing-ak-fl-xs */
-.ak-cluster {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ak-cluster-gap, var(--spacing-ak-fl-xs));
-  align-items: var(--ak-cluster-align, center);
-}
-
-/* Center — horizontally centered content with max-width.
-   Usage: <div class="ak-center">
-   Default max-width: 75rem (1200px), with fluid side padding */
-.ak-center {
-  box-sizing: content-box;
-  max-inline-size: var(--ak-center-max, 75rem);
-  margin-inline: auto;
-  padding-inline: var(--ak-center-gutter, var(--spacing-ak-fl-sm));
-}
-
-/* Sidebar — two-panel: one fixed-width sidebar + one flexible main.
-   Auto-stacks vertically when content would overflow.
-   Usage: <div class="ak-sidebar"><aside>Sidebar</aside><main>Content</main></div>
-   Default sidebar width: 18rem, switch point: 50% */
-.ak-sidebar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ak-sidebar-gap, var(--spacing-ak-fl-md));
-}
-.ak-sidebar > :first-child {
-  flex-basis: var(--ak-sidebar-width, 18rem);
-  flex-grow: 1;
-}
-.ak-sidebar > :last-child {
-  flex-basis: 0;
-  flex-grow: 999;
-  min-inline-size: var(--ak-sidebar-threshold, 50%);
-}
-
-/* Switcher — horizontal layout that flips to vertical at a threshold.
-   Usage: <div class="ak-switcher">
-   Default threshold: 30rem (480px container width) */
-.ak-switcher {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ak-switcher-gap, var(--spacing-ak-fl-sm));
-}
-.ak-switcher > * {
-  flex-basis: calc((var(--ak-switcher-threshold, 30rem) - 100%) * 999);
-  flex-grow: 1;
-}
-
-/* Cover — fills viewport height, vertically centers primary content.
-   Usage: <div class="ak-cover"><header/><div class="ak-cover-center">Hero</div><footer/></div>
-   The .ak-cover-center child gets vertically centered. */
-.ak-cover {
-  display: flex;
-  flex-direction: column;
-  min-block-size: var(--ak-cover-min, 100dvh);
-  padding: var(--ak-cover-padding, var(--spacing-ak-fl-md));
-}
-.ak-cover > * { margin-block: auto; }
-.ak-cover > :first-child:not(.ak-cover-center) { margin-block-start: 0; }
-.ak-cover > :last-child:not(.ak-cover-center)  { margin-block-end: 0; }
+@keyframes ak-skeleton-shimmer {
+  100% { transform: translateX(100%); }
+}
+
+/* Note: The unlayered override block that was here (170 lines) has been
+   removed. With @layer gone, all primitive declarations are unlayered and
+   compete with Tailwind preflight via specificity (.class > *). */
 
 /* ══════════════════════════════════════════════════════════
-   Auto-Responsive Grid
-   The RAM pattern (Repeat, Auto-fit, Minmax).
-   Columns reflow automatically — zero breakpoints needed.
-   Usage: <div class="ak-grid"> or style="--ak-grid-min: 320px"
-   Default min column width: 280px, fluid gap.
+   Neobrutalist interaction helper
+   Apply `.ak-brutal-press` to any element that has a brutal shadow
+   to get the signature "push into shadow" press effect:
+     - default:  4px 4px shadow + translate(0,0)
+     - hover:    2px 2px shadow + translate(2px,2px)
+     - active:   0px 0px shadow + translate(4px,4px) — fully pressed
+   Works with any --shadow-ak-brutal-* size.
+   Respects prefers-reduced-motion via the rule below.
    ══════════════════════════════════════════════════════════ */
-.ak-grid {
-  display: grid;
-  gap: var(--ak-grid-gap, var(--spacing-ak-fl-sm));
-  grid-template-columns: repeat(
-    auto-fill,
-    minmax(min(var(--ak-grid-min, 280px), 100%), 1fr)
-  );
+.ak-brutal-press {
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.ak-brutal-press:hover {
+  transform: translate(2px, 2px);
+  box-shadow: var(--shadow-ak-brutal-sm);
+}
+.ak-brutal-press:active {
+  transform: translate(4px, 4px);
+  box-shadow: 0 0 0 0 var(--color-ak-brutal-ink);
 }
 
 /* ══════════════════════════════════════════════════════════
-   Container Query Helper
-   Mark any element as a query container, then use
-   Tailwind v4's native @sm:, @md:, @lg: prefixes on children.
-   Usage: <div class="ak-container"><div class="@md:flex-row">...</div></div>
+   Form Primitives — Checkbox, Radio, Switch, Range, OTP
+   Styles that require pseudo-elements, attribute selectors,
+   vendor prefixes, or keyframes — things Tailwind can't do.
+   Components use Tailwind for everything else (layout, spacing,
+   colors, fonts). These are the minimal CSS escape hatches.
    ══════════════════════════════════════════════════════════ */
-.ak-container {
-  container-type: inline-size;
+
+/* ── Checkbox ── */
+.ak-check {
+  appearance: none;
+  width: 22px; height: 22px;
+  border: 2px solid var(--color-ak-border-strong);
+  border-radius: 6px;
+  cursor: pointer; position: relative;
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  flex-shrink: 0;
+}
+.ak-check:hover { border-color: var(--color-ak-primary); }
+.ak-check:checked {
+  background: var(--color-ak-primary);
+  border-color: var(--color-ak-primary);
+}
+.ak-check:checked::after {
+  content: '';
+  position: absolute; left: 6px; top: 2px;
+  width: 6px; height: 11px;
+  border: solid var(--color-ak-on-primary);
+  border-width: 0 2.5px 2.5px 0;
+  transform: rotate(45deg);
+}
+.ak-check:focus-visible {
+  outline: 2px solid var(--color-ak-primary);
+  outline-offset: 2px;
+}
+.ak-check:disabled { cursor: not-allowed; opacity: 0.5; }
+
+/* ── Radio ── */
+.ak-radio {
+  appearance: none;
+  width: 22px; height: 22px;
+  border: 2px solid var(--color-ak-border-strong);
+  border-radius: 50%;
+  cursor: pointer; position: relative;
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  flex-shrink: 0;
+  background: var(--color-ak-bg);
 }
-/* Named container variant for nesting */
-.ak-container-named {
-  container-type: inline-size;
-  container-name: var(--ak-container-name, content);
+.ak-radio:hover { border-color: var(--color-ak-primary); }
+.ak-radio:checked {
+  border-color: var(--color-ak-primary);
+  background: var(--color-ak-primary);
 }
+.ak-radio:checked::after {
+  content: '';
+  position: absolute; top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--color-ak-on-primary);
+}
+.ak-radio:focus-visible {
+  outline: 2px solid var(--color-ak-primary);
+  outline-offset: 2px;
+}
+.ak-radio:disabled { cursor: not-allowed; opacity: 0.5; }
 
-} /* end @layer components */
-
-@keyframes ak-skeleton-shimmer {
-  100% { transform: translateX(100%); }
+/* ── Switch ── */
+.ak-switch-track {
+  position: relative; width: 52px; height: 28px;
+  background: var(--color-ak-border-strong);
+  border-radius: 9999px;
+  transition: background-color 0.2s;
+}
+.ak-switch[aria-checked="true"] .ak-switch-track {
+  background: var(--color-ak-primary);
+}
+.ak-switch-knob {
+  position: absolute; top: 3px; left: 3px;
+  width: 22px; height: 22px;
+  background: var(--color-ak-on-primary);
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+.ak-switch[aria-checked="true"] .ak-switch-knob {
+  transform: translateX(24px);
 }
+.ak-switch:focus-visible .ak-switch-track {
+  outline: 2px solid var(--color-ak-primary);
+  outline-offset: 2px;
+}
+/* Size: Small */
+.ak-switch-sm .ak-switch-track { width: 44px; height: 24px; }
+.ak-switch-sm .ak-switch-knob { width: 18px; height: 18px; }
+.ak-switch-sm[aria-checked="true"] .ak-switch-knob { transform: translateX(20px); }
+/* Size: Large */
+.ak-switch-lg .ak-switch-track { width: 64px; height: 34px; }
+.ak-switch-lg .ak-switch-knob { width: 28px; height: 28px; }
+.ak-switch-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(30px); }
+
+/* Color tracks */
+.ak-switch-success[aria-checked="true"] .ak-switch-track { background: var(--color-ak-success); }
+.ak-switch-danger[aria-checked="true"] .ak-switch-track { background: var(--color-ak-danger); }
+
+/* Icon switch — default (72×36)
+   Track icons are absolutely positioned at left/right edges.
+   Knob is absolute and slides over them. Knob icon shows the active state icon. */
+.ak-switch-with-icons .ak-switch-track { width: 72px; height: 36px; }
+.ak-switch-with-icons .ak-switch-knob {
+  width: 30px; height: 30px; z-index: 2;
+  display: flex; align-items: center; justify-content: center;
+}
+.ak-switch-with-icons[aria-checked="true"] .ak-switch-knob { transform: translateX(36px); }
+/* Track icons — absolute, centered vertically at left/right */
+.ak-switch-track-icon {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  z-index: 1; line-height: 1; font-size: 14px;
+  display: flex; align-items: center; justify-content: center;
+  transition: opacity 0.2s;
+}
+.ak-switch-track-icon:first-child { left: 10px; }
+.ak-switch-track-icon:last-child { right: 10px; }
+/* Off state: left icon hidden (behind knob), right icon visible */
+.ak-switch-with-icons .ak-switch-track-icon:first-child { opacity: 0; }
+.ak-switch-with-icons .ak-switch-track-icon:last-child { color: var(--color-ak-on-primary); opacity: 0.7; }
+/* On state: left icon visible, right icon hidden (behind knob) */
+.ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:first-child { color: var(--color-ak-on-primary); opacity: 0.7; }
+.ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:last-child { opacity: 0; }
+/* Knob icon */
+.ak-switch-knob-icon { font-size: 14px; color: var(--color-ak-text); line-height: 1; }
+
+/* Icon switch — lg (88×44) */
+.ak-switch-icons-lg .ak-switch-track { width: 88px; height: 44px; }
+.ak-switch-icons-lg .ak-switch-knob { width: 38px; height: 38px; }
+.ak-switch-icons-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(44px); }
+.ak-switch-icons-lg .ak-switch-track-icon:first-child { left: 12px; }
+.ak-switch-icons-lg .ak-switch-track-icon:last-child { right: 12px; }
+.ak-switch-icons-lg .ak-switch-track-icon,
+.ak-switch-icons-lg .ak-switch-knob-icon { font-size: 18px; }
+/* Icon switch — xl (104×52) */
+.ak-switch-icons-xl .ak-switch-track { width: 104px; height: 52px; }
+.ak-switch-icons-xl .ak-switch-knob { width: 46px; height: 46px; }
+.ak-switch-icons-xl[aria-checked="true"] .ak-switch-knob { transform: translateX(52px); }
+.ak-switch-icons-xl .ak-switch-track-icon:first-child { left: 14px; }
+.ak-switch-icons-xl .ak-switch-track-icon:last-child { right: 14px; }
+.ak-switch-icons-xl .ak-switch-track-icon,
+.ak-switch-icons-xl .ak-switch-knob-icon { font-size: 22px; }
+/* Icon switch — xxl (120×60) */
+.ak-switch-icons-xxl .ak-switch-track { width: 120px; height: 60px; }
+.ak-switch-icons-xxl .ak-switch-knob { width: 54px; height: 54px; }
+.ak-switch-icons-xxl[aria-checked="true"] .ak-switch-knob { transform: translateX(60px); }
+.ak-switch-icons-xxl .ak-switch-track-icon:first-child { left: 16px; }
+.ak-switch-icons-xxl .ak-switch-track-icon:last-child { right: 16px; }
+.ak-switch-icons-xxl .ak-switch-track-icon,
+.ak-switch-icons-xxl .ak-switch-knob-icon { font-size: 26px; }
+
+/* Reversed field (switch left, label right) */
+.ak-switch-field-reversed { flex-direction: row-reverse; justify-content: flex-end; }
+/* Status text beside switch */
+.ak-switch-status { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text-muted); min-width: 24px; }
 
-/* ══════════════════════════════════════════════════════════
-   Dark Mode Override
-   Apply: <html data-theme="dark"> or <div data-theme="dark">
-   Only overrides color tokens. Spacing, type, radius stay the same.
-   ══════════════════════════════════════════════════════════ */
-[data-theme="dark"] {
-  --color-ak-bg:                  #0a0a0a;
-  --color-ak-surface:             #171717;
-  --color-ak-surface-2:           #262626;
-  --color-ak-hover:               #1a1a1a;
-  --color-ak-active:              #262626;
-  --color-ak-elevated:            #171717;
-  --color-ak-surface-raised:      #171717;
-  --color-ak-surface-raised-soft: rgba(23, 23, 23, 0.78);
-  --color-ak-surface-glass:       rgba(23, 23, 23, 0.72);
-  --color-ak-surface-glass-strong: rgba(23, 23, 23, 0.84);
-  --color-ak-highlight-soft:      rgba(255, 255, 255, 0.06);
-  --color-ak-highlight-strong:    rgba(255, 255, 255, 0.1);
-  --color-ak-skeleton-base:       #262626;
-  --color-ak-skeleton-shine:      rgba(255, 255, 255, 0.08);
-  --color-ak-overlay:             rgba(0, 0, 0, 0.7);
-  --color-ak-on-primary:          #000000;
-  --color-ak-primary-subtle:      #262626;
-
-  --color-ak-text:                #f5f5f5;
-  --color-ak-text-secondary:      #a3a3a3;
-  --color-ak-text-muted:          #737373;
-  --color-ak-text-disabled:       #525252;
-  --color-ak-text-inverse:        #0a0a0a;
-  --color-ak-text-link:           #ffffff;
-  --color-ak-text-placeholder:    #525252;
-
-  --color-ak-border:              #262626;
-  --color-ak-border-subtle:       #1a1a1a;
-  --color-ak-border-strong:       #404040;
-  --color-ak-border-focus:        #ffffff;
-
-  --shadow-ak-xs:                 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-ak-sm:                 0 1px 3px rgba(0, 0, 0, 0.4);
-  --shadow-ak-md:                 0 4px 12px rgba(0, 0, 0, 0.4);
-  --shadow-ak-lg:                 0 8px 30px rgba(0, 0, 0, 0.5);
-  --shadow-ak-xl:                 0 16px 50px rgba(0, 0, 0, 0.6);
-  --shadow-ak-2xl:                0 24px 60px rgba(0, 0, 0, 0.7);
-}
-
-/* Reduced motion — must be unlayered to override everything */
+@media (prefers-reduced-motion: reduce) {
+  .ak-switch-track, .ak-switch-knob, .ak-switch-track-icon { transition: none; }
+}
+
+/* ── Range Slider ── */
+.ak-range input[type="range"] {
+  --range-track: var(--color-ak-border);
+  --range-fill: var(--color-ak-text);
+  -webkit-appearance: none; appearance: none;
+  width: 100%; height: 3rem;
+  background: transparent; cursor: pointer;
+  margin: 0; padding: 0;
+}
+.ak-range input[type="range"]::-webkit-slider-runnable-track {
+  height: 6px; border-radius: 999px;
+  background: linear-gradient(to right, var(--range-fill) var(--ak-fill, 0%), var(--range-track) var(--ak-fill, 0%));
+}
+.ak-range input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 1.5rem; height: 1.5rem; margin-top: -0.5625rem;
+  border: 4px solid var(--color-ak-text); border-radius: 999px;
+  background: var(--color-ak-bg);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+}
+.ak-range input[type="range"]::-moz-range-track {
+  height: 6px; border-radius: 999px;
+  background: var(--range-track);
+}
+.ak-range input[type="range"]::-moz-range-progress {
+  height: 6px; border-radius: 999px;
+  background: var(--range-fill);
+}
+.ak-range input[type="range"]::-moz-range-thumb {
+  width: 1rem; height: 1rem;
+  border: 4px solid var(--color-ak-text); border-radius: 999px;
+  background: var(--color-ak-bg);
+  transition: transform 0.15s ease;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+}
+.ak-range input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
+.ak-range input[type="range"]:hover::-moz-range-thumb { transform: scale(1.15); }
+.ak-range input[type="range"]:focus-visible { outline: none; }
+.ak-range input[type="range"]:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
+  transform: scale(1.15);
+}
+.ak-range input[type="range"]:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
+  transform: scale(1.15);
+}
+
+/* ── Range Dual Track ── */
+.ak-dual-track { pointer-events: none; position: absolute; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--color-ak-border); z-index: 1; }
+.ak-dual-fill { position: absolute; height: 100%; border-radius: 999px; background: var(--color-ak-text); z-index: 0; }
+.ak-dual-input { pointer-events: none; position: absolute; left: 0; width: 100%; height: 3rem; background: transparent; z-index: 3; }
+.ak-dual-input::-webkit-slider-runnable-track { height: 6px; background: transparent !important; }
+.ak-dual-input::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 10; }
+.ak-dual-input::-moz-range-track, .ak-dual-input::-moz-range-progress { background: transparent !important; }
+.ak-dual-input::-moz-range-thumb { pointer-events: auto; position: relative; z-index: 10; }
+
+/* ── Number Input Spinbutton Hide ── */
+.ak-stepper input,
+.ak-qty input,
+.ak-range input[type="number"] {
+  -moz-appearance: textfield; appearance: textfield;
+}
+.ak-stepper input::-webkit-outer-spin-button,
+.ak-stepper input::-webkit-inner-spin-button,
+.ak-qty input::-webkit-outer-spin-button,
+.ak-qty input::-webkit-inner-spin-button,
+.ak-range input[type="number"]::-webkit-outer-spin-button,
+.ak-range input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none; margin: 0;
+}
+
+/* ── OTP Input ── */
+.ak-otp-input {
+  width: 56px; height: 64px; text-align: center;
+  font-size: var(--text-ak-2xl); font-weight: 700;
+  border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
+  outline: none; background: var(--color-ak-bg); color: var(--color-ak-text);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+  caret-color: var(--color-ak-primary);
+}
+.ak-otp-input::placeholder { color: var(--color-ak-text-muted); }
+.ak-otp-input:hover { border-color: var(--color-ak-border-strong); }
+.ak-otp-input:focus-visible {
+  outline: 2px solid var(--color-ak-primary);
+  outline-offset: 2px;
+  border-color: var(--color-ak-primary);
+  background: var(--color-ak-surface);
+}
+.ak-otp-input.has-value { border-color: var(--color-ak-text); font-weight: 800; }
+@media (max-width: 400px) {
+  .ak-otp-input { width: 44px; height: 52px; font-size: var(--text-ak-xl); }
+}
+
+/* ── Color Picker Swatch ── */
+.ak-color-swatch:hover { border-color: var(--color-ak-border-strong); }
+.ak-color-swatch:active { transform: scale(0.95); transition-duration: 0.1s; }
+.ak-color-swatch.selected { border-color: var(--color-ak-text); }
+
+/* ── File Upload ── */
+@keyframes ak-spin { to { transform: rotate(360deg); } }
+.ak-spinner { animation: ak-spin 0.8s linear infinite; }
+.ak-dropzone { transition: border-color 0.2s ease, background-color 0.2s ease; }
+.ak-dropzone:hover { border-color: var(--color-ak-border-strong); background: var(--color-ak-hover); }
+.ak-dropzone.drag-over { border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle); }
+.ak-file-row { transition: background-color 0.15s ease, border-color 0.15s ease; }
+.ak-file-row:hover { background: var(--color-ak-hover); border-color: var(--color-ak-border-strong); }
+.ak-progress-fill { transition: width 0.3s ease; }
+
+/* ── Star Rating ── */
+.ak-star-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 48px; height: 48px; cursor: pointer;
+  border: none; background: none; padding: 0;
+  border-radius: 8px;
+  color: var(--color-ak-text-disabled);
+  transition: color 0.15s, transform 0.15s;
+}
+.ak-star-btn.filled { color: var(--color-ak-text); }
+.ak-star-btn:hover { transform: scale(1.1); }
+.ak-star-btn:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
+.ak-star-btn.ak-star-sm { width: 40px; height: 40px; }
+.ak-star-btn.ak-star-sm .ak-star-icon { font-size: 20px; }
+.ak-star-icon { font-size: 28px; }
+.ak-star-btn.ak-star-lg { width: 56px; height: 56px; }
+.ak-star-btn.ak-star-lg .ak-star-icon { font-size: 36px; }
+
+/* ── Switch Layout ── */
+.ak-switch {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: none; border: none; padding: 8px 0; cursor: pointer;
+  border-radius: 9999px; flex-shrink: 0; min-height: 44px;
+}
+.ak-switch:focus { outline: none; }
+.ak-switch:disabled, .ak-switch[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+.ak-switch-field {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; min-height: 52px;
+}
+.ak-switch-label-wrap { display: flex; flex-direction: column; gap: 4px; cursor: pointer; flex: 1; min-width: 0; }
+.ak-switch-field:has(.ak-switch:disabled) .ak-switch-label-wrap,
+.ak-switch-field:has(.ak-switch[aria-disabled="true"]) .ak-switch-label-wrap { cursor: default; }
+/* When icon is present, use grid so icon spans full height and text+helper align */
+.ak-switch-label-wrap:has(.ak-switch-label-icon) {
+  display: grid;
+  grid-template-columns: 2.75rem 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 14px;
+  row-gap: 2px;
+  align-items: center;
+}
+.ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label-icon {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  align-self: center;
+}
+.ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label {
+  grid-column: 2;
+  grid-row: 1;
+}
+.ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-helper {
+  grid-column: 2;
+  grid-row: 2;
+}
+.ak-switch-label {
+  font-size: var(--text-ak-fl-lg); font-weight: 700; color: var(--color-ak-text);
+}
+.ak-switch-helper { font-size: var(--text-ak-fl-base); color: var(--color-ak-text-secondary); }
+.ak-switch-label-icon {
+  font-size: 1.5rem; color: var(--color-ak-text-secondary); line-height: 1; flex-shrink: 0;
+  width: 2.75rem; height: 2.75rem;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--color-ak-surface); border-radius: 0.75rem;
+}
+.ak-switch-card {
+  border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
+  padding: 20px 24px; transition: border-color 0.2s;
+}
+.ak-switch-card-active {
+  border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle);
+}
+.ak-switch-compact .ak-switch-field { padding: 16px 0; }
+.ak-switch-compact .ak-switch-field + .ak-switch-field { border-top: 1px solid var(--color-ak-border); }
+.ak-switch-compact .ak-switch-label { font-size: var(--text-ak-fl-base); }
+.ak-switch-compact .ak-switch-helper { font-size: var(--text-ak-fl-sm); }
+.ak-switch-value { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text); min-width: 32px; text-align: right; }
+.ak-switch-value-muted { color: var(--color-ak-text-secondary); font-weight: 400; }
+.ak-switch-group { border: none; padding: 0; margin: 0; }
+.ak-switch-group-legend { font-size: var(--text-ak-fl-base); font-weight: 700; color: var(--color-ak-text-secondary); padding: 0; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
+.ak-switch-section { border: 2px solid var(--color-ak-border); border-radius: 0.75rem; padding: 24px; }
+.ak-switch-section .ak-switch-group-legend { font-size: var(--text-ak-fl-lg); margin-bottom: 16px; padding: 0 8px; text-transform: none; letter-spacing: normal; }
+.ak-switch-section .ak-switch-field + .ak-switch-field {
+  border-top: 1px solid var(--color-ak-border-subtle); padding-top: 16px; margin-top: 16px;
+}
+.ak-form-section { max-width: 640px; }
+
+/* ── Number Stepper Button Press ── */
+.ak-stepper-btn:active:not([aria-disabled="true"]) {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 0 var(--color-ak-brutal-ink) !important;
+}
+.ak-stepper-btn[aria-disabled="true"] { pointer-events: none; opacity: 0.3; }
+
+/* ── Quantity Selector ── */
+.ak-qty-btn { transition: all 0.15s ease; }
+.ak-qty-btn:active:not([aria-disabled="true"]) { transform: scale(0.96); }
+.ak-qty-btn[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; }
+
+/* ── Shared Keyframes ── */
+@keyframes ak-fadeInUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes ak-slideIn {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes ak-fadeOut {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
+}
+@keyframes ak-swipeOut {
+  from { transform: translateX(var(--radix-toast-swipe-end-x)); }
+  to { transform: translateX(100%); }
+}
+
+/* ── Glass Panel (split-screen logins) ── */
+.ak-glass-panel {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ── Grid Pattern Background ── */
+.ak-bg-grid-pattern {
+  background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
+                    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+/* ── Toggle Group ── */
+.ak-toggle-group {
+  display: inline-flex; background: var(--color-ak-surface-2);
+  border-radius: 8px; padding: 4px; gap: 4px;
+}
+.ak-toggle-group-item {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  background: none; border: none; padding: 0 16px; min-height: 44px;
+  font-family: inherit; font-size: var(--text-ak-base, 1rem); font-weight: 600;
+  color: var(--color-ak-text-secondary); border-radius: 8px; cursor: pointer;
+  transition: background-color 0.2s, color 0.2s; white-space: nowrap; line-height: 1;
+}
+.ak-toggle-group-item[aria-checked="true"],
+.ak-toggle-group-item[aria-pressed="true"] {
+  background: var(--color-ak-bg); color: var(--color-ak-text);
+}
+.ak-toggle-group-item[aria-checked="false"]:not(:disabled):hover,
+.ak-toggle-group-item[aria-pressed="false"]:not(:disabled):hover {
+  color: var(--color-ak-text); background: var(--color-ak-hover);
+}
+.ak-toggle-group-item:focus { outline: none; }
+.ak-toggle-group-item:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
+.ak-toggle-group-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.ak-toggle-group[aria-disabled="true"] { opacity: 0.5; }
+.ak-toggle-group[aria-disabled="true"] .ak-toggle-group-item { cursor: not-allowed; }
+.ak-toggle-group-item i { font-size: 20px; line-height: 1; }
+.ak-toggle-group-item-icon { padding: 0 14px; }
+/* Toggle group — small */
+.ak-toggle-group-sm { padding: 3px; gap: 3px; }
+.ak-toggle-group-sm .ak-toggle-group-item { min-height: 44px; padding: 0 12px; font-size: var(--text-ak-sm, 0.875rem); }
+.ak-toggle-group-sm .ak-toggle-group-item i { font-size: 18px; }
+.ak-toggle-group-sm .ak-toggle-group-item-icon { padding: 0 12px; }
+/* Toggle group — large */
+.ak-toggle-group-lg { padding: 5px; gap: 5px; }
+.ak-toggle-group-lg .ak-toggle-group-item { min-height: 52px; padding: 0 24px; font-size: var(--text-ak-lg, 1.125rem); }
+.ak-toggle-group-lg .ak-toggle-group-item i { font-size: 24px; }
+.ak-toggle-group-lg .ak-toggle-group-item-icon { padding: 0 18px; }
+
+/* ── Resizable Panel Cursors ── */
+body.ak-col-resizing, body.ak-col-resizing * {
+  cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important;
+}
+body.ak-ew-resizing, body.ak-ew-resizing * {
+  cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important;
+}
+
+/* ── Focus Ring Utility ── */
+.ak-focus-ring:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
+
+/* ── Price Fade Transition ── */
+.ak-price-fade { transition: opacity 0.15s ease-in-out; }
+
+/* Reduced motion — unlayered so it overrides everything */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
     transition-duration: 0.01ms !important;
   }
+  .ak-star-btn:hover { transform: none !important; }
+  .ak-stepper-btn:active { transform: none !important; }
+  @keyframes ak-slideIn { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes ak-fadeOut { from { opacity: 1; } to { opacity: 0; } }
 }