@rdna/radiants 0.1.1 → 0.1.3

package/registry/types.ts

@@ -0,0 +1,145 @@
+export type {
+  A11yContract,
+  ComponentCategory,
+  DensityContract,
+  CompositionRules,
+  ElementReplacement,
+  ForcedState,
+  PreviewState,
+  PropDef,
+  SlotDef,
+  StructuralRule,
+  StyleOwnership,
+} from '@rdna/preview';
+
+import type { ComponentType } from 'react';
+import type {
+  A11yContract,
+  ComponentCategory,
+  DensityContract,
+  CompositionRules,
+  ElementReplacement,
+  PreviewState,
+  PropDef,
+  SlotDef,
+  StructuralRule,
+  StyleOwnership,
+} from '@rdna/preview';
+
+// Registry is display-first, not component-first.
+//
+// Several Radiants exports are namespace-style compound APIs (Tabs, Dialog,
+// Select, Alert, StepperTabs) that cannot be rendered via simple
+// prop spreading. Others are controlled (Switch, Slider) and need stateful
+// wrappers. The registry contract centers on display/preview metadata and
+// provides an optional raw component reference for plain components only.
+
+export const CATEGORIES: ComponentCategory[] = [
+  'action',
+  'layout',
+  'form',
+  'feedback',
+  'navigation',
+  'overlay',
+  'data-display',
+  'media',
+  'dev',
+];
+
+export const CATEGORY_LABELS: Record<ComponentCategory, string> = {
+  action: 'Actions',
+  layout: 'Layout',
+  form: 'Forms',
+  feedback: 'Feedback',
+  navigation: 'Navigation',
+  overlay: 'Overlays',
+  'data-display': 'Data Display',
+  media: 'Media',
+  dev: 'Dev Tools',
+};
+
+export interface VariantDemo {
+  label: string;
+  props: Record<string, unknown>;
+}
+
+/**
+ * How to render this component in a showcase:
+ * - `inline`: auto-render via Component + props (default for plain components)
+ * - `custom`: use the `Demo` component (compound or controlled components)
+ * - `description-only`: show metadata only, no live preview
+ */
+export type RenderMode = 'inline' | 'custom' | 'description-only';
+
+/** Server-safe metadata — no React component refs. */
+export interface RegistryMetadataEntry {
+  packageName: '@rdna/radiants';
+  /** Component name matching schema.json `name` field */
+  name: string;
+  /** Display category for filtering */
+  category: ComponentCategory;
+  /** One-line description from schema.json */
+  description: string;
+  /** Path to source file relative to repo root */
+  sourcePath: string;
+  /** Path to schema.json relative to repo root */
+  schemaPath: string;
+  /** How to render in showcase */
+  renderMode: RenderMode;
+  /** Default props for a simple inline render */
+  exampleProps?: Record<string, unknown>;
+  /** Named variant demos */
+  variants?: VariantDemo[];
+  /** Which props a custom Demo forwards */
+  controlledProps?: string[];
+  /** Search tags */
+  tags?: string[];
+  /** Forced pseudo-states available for design inspection */
+  states?: PreviewState[];
+  /** Stable client id */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Human-readable category label */
+  group: string;
+  /** Canonical authored prop metadata */
+  props: Record<string, PropDef>;
+  /** Canonical authored slot metadata */
+  slots: Record<string, SlotDef>;
+  /** Default prop values for showcases */
+  defaultProps: Record<string, unknown>;
+  /** Token slot-to-token mapping */
+  tokenBindings: Record<string, Record<string, string>> | null;
+  /** Named subcomponents exported by the component */
+  subcomponents: string[];
+  /** Hand-authored usage examples */
+  examples: Array<{ name: string; code: string }>;
+  /** Raw element replacement ownership for contract generation */
+  replaces?: ElementReplacement[];
+  /** Whether the component participates in pixel-corner styling */
+  pixelCorners?: boolean;
+  /** Shadow token family used by the component */
+  shadowSystem?: 'standard' | 'pixel';
+  /** Style surface ownership between theme and consumer */
+  styleOwnership?: StyleOwnership[];
+  /** Structural lint rules owned by the component contract */
+  structuralRules?: StructuralRule[];
+  /** Density tiers supported by the component */
+  density?: DensityContract;
+  /** Slot/subcomponent composition requirements */
+  composition?: CompositionRules;
+  /** Upstream primitive the component wraps */
+  wraps?: string;
+  /** Accessibility contract metadata */
+  a11y?: A11yContract;
+}
+
+/** React runtime wiring — added on top of metadata at the client layer. */
+export interface RuntimeAttachment {
+  /** The primary component export */
+  component?: unknown;
+  /** React component for compound/controlled demos */
+  Demo?: ComponentType;
+}
+
+export interface RegistryEntry extends RegistryMetadataEntry, RuntimeAttachment {}

package/registry/useShowcaseProps.ts

@@ -0,0 +1,28 @@
+import { useMemo, useState } from "react";
+import type { RegistryMetadataEntry } from "./types";
+
+export function useShowcaseProps(
+  entry: Pick<RegistryMetadataEntry, "defaultProps">,
+) {
+  const [overrides, setOverrides] = useState<Record<string, unknown>>({});
+  const props = { ...entry.defaultProps, ...overrides };
+
+  const remountKey = useMemo(() => {
+    const defaultEntries = Object.entries(overrides).filter(([name]) =>
+      name.startsWith("default"),
+    );
+
+    return defaultEntries.length > 0
+      ? JSON.stringify(defaultEntries)
+      : "stable";
+  }, [overrides]);
+
+  return {
+    props,
+    overrides,
+    remountKey,
+    setPropValue: (name: string, value: unknown) =>
+      setOverrides((current) => ({ ...current, [name]: value })),
+    resetProps: () => setOverrides({}),
+  };
+}

package/schemas/index.ts

@@ -0,0 +1,89 @@
+// AUTO-GENERATED — do not edit by hand
+// Run: pnpm --filter @rdna/radiants generate:schemas
+
+import AlertSchema from "../components/core/Alert/Alert.schema.json";
+import AlertDialogSchema from "../components/core/AlertDialog/AlertDialog.schema.json";
+import AvatarSchema from "../components/core/Avatar/Avatar.schema.json";
+import BadgeSchema from "../components/core/Badge/Badge.schema.json";
+import BreadcrumbsSchema from "../components/core/Breadcrumbs/Breadcrumbs.schema.json";
+import ButtonSchema from "../components/core/Button/Button.schema.json";
+import CardSchema from "../components/core/Card/Card.schema.json";
+import CheckboxSchema from "../components/core/Checkbox/Checkbox.schema.json";
+import RadioSchema from "../components/core/Checkbox/Radio.schema.json";
+import CollapsibleSchema from "../components/core/Collapsible/Collapsible.schema.json";
+import ComboboxSchema from "../components/core/Combobox/Combobox.schema.json";
+import ContextMenuSchema from "../components/core/ContextMenu/ContextMenu.schema.json";
+import CountdownTimerSchema from "../components/core/CountdownTimer/CountdownTimer.schema.json";
+import DialogSchema from "../components/core/Dialog/Dialog.schema.json";
+import DrawerSchema from "../components/core/Drawer/Drawer.schema.json";
+import DropdownMenuSchema from "../components/core/DropdownMenu/DropdownMenu.schema.json";
+import IconSchema from "../components/core/Icon/Icon.schema.json";
+import InputSchema from "../components/core/Input/Input.schema.json";
+import TextAreaSchema from "../components/core/Input/TextArea.schema.json";
+import InputSetSchema from "../components/core/InputSet/InputSet.schema.json";
+import MenubarSchema from "../components/core/Menubar/Menubar.schema.json";
+import MeterSchema from "../components/core/Meter/Meter.schema.json";
+import NavigationMenuSchema from "../components/core/NavigationMenu/NavigationMenu.schema.json";
+import NumberFieldSchema from "../components/core/NumberField/NumberField.schema.json";
+import PatternSchema from "../components/core/Pattern/Pattern.schema.json";
+import PopoverSchema from "../components/core/Popover/Popover.schema.json";
+import PreviewCardSchema from "../components/core/PreviewCard/PreviewCard.schema.json";
+import ScrollAreaSchema from "../components/core/ScrollArea/ScrollArea.schema.json";
+import SelectSchema from "../components/core/Select/Select.schema.json";
+import SeparatorSchema from "../components/core/Separator/Separator.schema.json";
+import SheetSchema from "../components/core/Sheet/Sheet.schema.json";
+import SliderSchema from "../components/core/Slider/Slider.schema.json";
+import SpinnerSchema from "../components/core/Spinner/Spinner.schema.json";
+import SwitchSchema from "../components/core/Switch/Switch.schema.json";
+import TabsSchema from "../components/core/Tabs/Tabs.schema.json";
+import ToastSchema from "../components/core/Toast/Toast.schema.json";
+import ToggleSchema from "../components/core/Toggle/Toggle.schema.json";
+import ToggleGroupSchema from "../components/core/ToggleGroup/ToggleGroup.schema.json";
+import ToolbarSchema from "../components/core/Toolbar/Toolbar.schema.json";
+import TooltipSchema from "../components/core/Tooltip/Tooltip.schema.json";
+
+export const componentData = {
+  Alert: { schema: AlertSchema },
+  AlertDialog: { schema: AlertDialogSchema },
+  Avatar: { schema: AvatarSchema },
+  Badge: { schema: BadgeSchema },
+  Breadcrumbs: { schema: BreadcrumbsSchema },
+  Button: { schema: ButtonSchema },
+  Card: { schema: CardSchema },
+  Checkbox: { schema: CheckboxSchema },
+  Radio: { schema: RadioSchema },
+  Collapsible: { schema: CollapsibleSchema },
+  Combobox: { schema: ComboboxSchema },
+  ContextMenu: { schema: ContextMenuSchema },
+  CountdownTimer: { schema: CountdownTimerSchema },
+  Dialog: { schema: DialogSchema },
+  Drawer: { schema: DrawerSchema },
+  DropdownMenu: { schema: DropdownMenuSchema },
+  Icon: { schema: IconSchema },
+  Input: { schema: InputSchema },
+  TextArea: { schema: TextAreaSchema },
+  InputSet: { schema: InputSetSchema },
+  Menubar: { schema: MenubarSchema },
+  Meter: { schema: MeterSchema },
+  NavigationMenu: { schema: NavigationMenuSchema },
+  NumberField: { schema: NumberFieldSchema },
+  Pattern: { schema: PatternSchema },
+  Popover: { schema: PopoverSchema },
+  PreviewCard: { schema: PreviewCardSchema },
+  ScrollArea: { schema: ScrollAreaSchema },
+  Select: { schema: SelectSchema },
+  Separator: { schema: SeparatorSchema },
+  Sheet: { schema: SheetSchema },
+  Slider: { schema: SliderSchema },
+  Spinner: { schema: SpinnerSchema },
+  Switch: { schema: SwitchSchema },
+  Tabs: { schema: TabsSchema },
+  Toast: { schema: ToastSchema },
+  Toggle: { schema: ToggleSchema },
+  ToggleGroup: { schema: ToggleGroupSchema },
+  Toolbar: { schema: ToolbarSchema },
+  Tooltip: { schema: TooltipSchema },
+} as const;
+
+export type ComponentName = keyof typeof componentData;
+export type ComponentData = (typeof componentData)[ComponentName];

package/tokens.css

@@ -1,55 +1,69 @@
 /* =============================================================================
-   @dna/radiants - Design Tokens
+   @rdna/radiants - Design Tokens
    Semantic token layer mapping rad_os brand colors to DNA-compliant tokens
    ============================================================================= */
 
-@theme inline {
+@theme {
   /* ============================================
-     BRAND COLORS (internal reference only)
-     These are private tokens - use semantic tokens in components
+     BRAND COLORS
+     Defined first so semantic tokens below can reference via var()
      ============================================ */
 
-  --color-cream: #FEF8E2;
-  --color-black: #0F0E0C;
-  --color-sun-yellow: #FCE184;
-  --color-sky-blue: #95BAD2;
-  --color-warm-cloud: #FEF8E2;
-  --color-sunset-fuzz: #FCC383;
-  --color-sun-red: #FF6B63;
-  --color-green: #CEF5CA;
-  --color-white: #FFFFFF;
-
-  /* System Colors (internal) */
-  --color-success-green: #22C55E;
-  --color-success-green-dark: #87BB82;
+  --color-cream: oklch(0.9780 0.0295 94.34);           /* was #FEF8E2 */
+  --color-ink: oklch(0.1641 0.0044 84.59);              /* was #0F0E0C */
+  --color-pure-black: oklch(0.0000 0.0000 0);           /* was #000000 */
+  --color-sun-yellow: oklch(0.9126 0.1170 93.68);       /* was #FCE184 */
+  --color-sky-blue: oklch(0.7701 0.0527 236.81);        /* was #95BAD2 */
+  --color-sunset-fuzz: oklch(0.8546 0.1039 68.93);      /* was #FCC383 */
+  --color-sun-red: oklch(0.7429 0.1568 21.43);          /* was #FF7F7F */
+  --color-mint: oklch(0.9312 0.0702 142.51);             /* was #CEF5CA */
+  --color-pure-white: oklch(1.0000 0.0000 0);           /* was #FFFFFF */
+
+  /* System Colors */
+  --color-success-mint: var(--color-mint);
   --color-warning-yellow: var(--color-sun-yellow);
-  --color-warning-yellow-dark: #BE9D2B;
   --color-error-red: var(--color-sun-red);
-  --color-error-red-dark: #9E433E;
   --color-focus-state: var(--color-sky-blue);
-}
 
-@theme {
   /* ============================================
-     SEMANTIC TOKENS - Surface
-     Background colors for containers and sections
+     SEMANTIC TOKENS
+     Role-based names — Tailwind prefix is the category:
+       bg-page, text-main, border-line, ring-focus
      ============================================ */
 
-  --color-surface-primary: var(--color-warm-cloud);
-  --color-surface-secondary: var(--color-black);
-  --color-surface-tertiary: var(--color-sunset-fuzz);
-  --color-surface-elevated: var(--color-white);
-  --color-surface-muted: var(--color-cream);
+  /* Backgrounds */
+  --color-page: var(--color-cream);
+  --color-card: var(--color-pure-white);
+  --color-tinted: var(--color-sunset-fuzz);
+  --color-inv: var(--color-ink);
+  --color-depth: var(--color-cream);        /* = page in light; diverges in dark */
+  --color-hover: var(--color-sun-yellow);   /* hover overlay */
+  --color-active: var(--color-sun-yellow);  /* pressed overlay */
+
+  /* Text */
+  --color-main: var(--color-ink);
+  --color-head: var(--color-ink);           /* = main in light; pure-white in dark */
+  --color-sub: oklch(0.1641 0.0044 84.59 / 0.85);
+  --color-mute: oklch(0.1641 0.0044 84.59 / 0.6);
+  --color-flip: var(--color-cream);
+  --color-link: var(--color-sky-blue);
+
+  /* Borders */
+  --color-line: var(--color-ink);
+  --color-rule: oklch(0.1641 0.0044 84.59 / 0.2);
+  --color-line-hover: oklch(0.1641 0.0044 84.59 / 0.3);
+  --color-focus: var(--color-sun-yellow);
 
   /* ============================================
      SEMANTIC TOKENS - Content
      Text and foreground colors
      ============================================ */
 
-  --color-content-primary: var(--color-black);
-  --color-content-secondary: var(--color-black);  /* Use with opacity modifier: text-content-secondary/70 */
-  --color-content-inverted: var(--color-warm-cloud);
-  --color-content-muted: rgba(15, 14, 12, 0.6);
+  --color-content-primary: var(--color-ink);
+  --color-content-heading: var(--color-ink);   /* Headings: same as primary in light, pure-white in dark */
+  --color-content-secondary: oklch(0.1641 0.0044 84.59 / 0.85);  /* was rgba(15, 14, 12, 0.85) */
+  --color-content-inverted: var(--color-cream);
+  --color-content-muted: oklch(0.1641 0.0044 84.59 / 0.6);    /* was rgba(15, 14, 12, 0.6) */
   --color-content-link: var(--color-sky-blue);
 
   /* ============================================
@@ -57,8 +71,9 @@
      Borders, outlines, and focus indicators
      ============================================ */
 
-  --color-edge-primary: var(--color-black);
-  --color-edge-muted: rgba(15, 14, 12, 0.2);
+  --color-edge-primary: var(--color-ink);
+  --color-edge-muted: oklch(0.1641 0.0044 84.59 / 0.2);       /* was rgba(15, 14, 12, 0.2) */
+  --color-edge-hover: oklch(0.1641 0.0044 84.59 / 0.3);       /* was rgba(15, 14, 12, 0.3) — hover state: slightly stronger than muted */
   --color-edge-focus: var(--color-sun-yellow);
 
   /* ============================================
@@ -67,7 +82,7 @@
      ============================================ */
 
   --color-action-primary: var(--color-sun-yellow);
-  --color-action-secondary: var(--color-black);
+  --color-action-secondary: var(--color-ink);
   --color-action-destructive: var(--color-sun-red);
   --color-action-accent: var(--color-sunset-fuzz);
 
@@ -76,11 +91,20 @@
      Feedback and state indicators
      ============================================ */
 
-  --color-status-success: var(--color-green);
+  --color-status-success: var(--color-mint);
   --color-status-warning: var(--color-sun-yellow);
   --color-status-error: var(--color-sun-red);
   --color-status-info: var(--color-sky-blue);
 
+  /* Backward-compatible utility aliases — point directly to brand primitives
+     (Tailwind v4 cannot generate utilities from multi-level var() chains) */
+  --color-accent: var(--color-sun-yellow);
+  --color-accent-inv: var(--color-ink);
+  --color-accent-soft: var(--color-sunset-fuzz);
+  --color-danger: var(--color-sun-red);
+  --color-success: var(--color-mint);
+  --color-warning: var(--color-sun-yellow);
+
   /* ============================================
      BORDER RADIUS
      Rounded corner scale for the pixel aesthetic
@@ -98,39 +122,77 @@
      Retro lift effect - sharp pixel-art style shadows
      ============================================ */
 
-  --shadow-btn: 0 1px 0 0 var(--color-black);
-  --shadow-btn-hover: 0 3px 0 0 var(--color-black);
-  --shadow-card: 2px 2px 0 0 var(--color-black);
-  --shadow-card-lg: 4px 4px 0 0 var(--color-black);
-  --shadow-inner: inset 0 0 0 1px var(--color-black);
+  --shadow-btn: 0 1px 0 0 var(--color-ink);
+  --shadow-btn-hover: 0 3px 0 0 var(--color-ink);
+  --shadow-card: 2px 2px 0 0 var(--color-ink);
+  --shadow-card-lg: 4px 4px 0 0 var(--color-ink);
+  --shadow-inner: inset 0 0 0 1px var(--color-ink);
 
   /* ============================================
-     TYPOGRAPHY SCALE
-     Font sizes for the pixel-art aesthetic
+     WINDOW CHROME
+     Gradient colors for AppWindow frame
      ============================================ */
 
-  --font-size-2xs: 0.5rem;     /* 8px - tiny labels */
-  --font-size-xs: 0.75rem;     /* 12px - buttons, small UI */
-  --font-size-sm: 0.875rem;    /* 14px - body text */
-  --font-size-base: 0.875rem;  /* 14px - body text */
-  --font-size-lg: 1rem;        /* 16px - large body */
-  --font-size-xl: 1.25rem;     /* 20px - headings */
-  --font-size-2xl: 1.5rem;     /* 24px - headings */
-  --font-size-3xl: 2rem;       /* 32px - display */
+  --color-window-chrome-from: var(--color-sun-yellow);
+  --color-window-chrome-to: var(--color-cream);         /* direct brand primitive — avoids 2-level var() chain */
 
   /* ============================================
-     SPACING SCALE
-     Consistent spacing for layout and components
+     EMPHASIS SHADOWS
+     Light mode: "harsh sun" — deeper retro drop shadows (sun pushes element up)
+     Dark mode: "starry night" — soft ambient sun-yellow glow halos
+     Components use the same utility class — mode determines the character
      ============================================ */
 
-  --spacing-xs: 0.25rem;       /* 4px */
-  --spacing-sm: 0.5rem;        /* 8px */
-  --spacing-md: 1rem;          /* 16px */
-  --spacing-lg: 1.5rem;        /* 24px */
-  --spacing-xl: 2rem;          /* 32px */
-  --spacing-2xl: 3rem;         /* 48px */
+  /* Raw glow colors — visible only in dark mode */
+  --glow-sun-yellow: oklch(0.9126 0.1170 93.68 / 0);           /* was rgba(252, 225, 132, 0) */
+  --glow-sun-yellow-subtle: oklch(0.9126 0.1170 93.68 / 0);   /* was rgba(252, 225, 132, 0) */
+  --glow-sun-red: oklch(0.7429 0.1568 21.43 / 0);             /* was rgba(255, 107, 99, 0) */
+  --glow-mint: oklch(0.9312 0.0702 142.51 / 0);               /* was rgba(206, 245, 202, 0) */
+  --glow-sky-blue: oklch(0.7701 0.0527 236.81 / 0);           /* was rgba(149, 186, 210, 0) */
+
+  /* Light mode: sharp pixel-art shadows, progressively deeper */
+  --shadow-glow-sm: 2px 2px 0 0 var(--color-ink);
+  --shadow-glow-md: 3px 3px 0 0 var(--color-ink);
+  --shadow-glow-lg: 4px 4px 0 0 var(--color-ink);
+  --shadow-glow-xl: 5px 5px 0 0 var(--color-ink);
+
+  /* Light mode: status emphasis — colored retro shadows */
+  --shadow-glow-success: 2px 2px 0 0 var(--color-mint);
+  --shadow-glow-error: 2px 2px 0 0 var(--color-sun-red);
+  --shadow-glow-info: 2px 2px 0 0 var(--color-sky-blue);
+
+  /* ============================================
+     SHADOW ELEVATION SCALE
+     6-level elevation system per DESIGN.md Section 4.
+     Sun Mode: sharp pixel-art offsets (directional).
+     Moon Mode: soft ambient glows (overridden in dark.css).
+
+     Old names (shadow-btn, shadow-card, etc.) kept for
+     Phase 2 migration. Remove in Phase 3.
+     ============================================ */
+
+  --shadow-inset: inset 0 0 0 1px var(--color-ink);
+  --shadow-surface: 0 1px 0 0 var(--color-ink);
+  --shadow-resting: 0 2px 0 0 var(--color-ink);
+  --shadow-lifted: 0 4px 0 0 var(--color-ink);           /* Interactive hover — vertical only */
+  --shadow-raised: 2px 2px 0 0 var(--color-ink);         /* Cards, panels — diagonal */
+  --shadow-floating: 4px 4px 0 0 var(--color-ink);       /* Windows, dialogs — diagonal */
+  --shadow-focused: 0 0 0 2px oklch(0.9126 0.1170 93.68 / 0.35), 0 0 8px 3px oklch(0.9126 0.1170 93.68 / 0.18); /* Sun-yellow glow */
 
   /* ============================================
+     TYPOGRAPHY SCALE
+     Font sizes for the pixel-art aesthetic
+     ============================================ */
+
+  --font-size-xs: 0.625rem;    /* 10px - small labels */
+  --font-size-sm: 0.75rem;     /* 12px - buttons, small UI */
+  --font-size-base: 1rem;      /* 16px - body text (at max root) */
+  --font-size-lg: 1.25rem;     /* 20px - large body */
+  --font-size-xl: 1.5rem;      /* 24px - headings */
+  --font-size-2xl: 1.75rem;    /* 28px - headings */
+  --font-size-3xl: 2rem;       /* 32px - display */
+
+/* ============================================
      MOTION - Duration
      Animation timing scale (max 300ms per DNA spec)
      ============================================ */
@@ -149,18 +211,15 @@
   --easing-default: cubic-bezier(0, 0, 0.2, 1);  /* All standard transitions */
   --easing-out: cubic-bezier(0, 0, 0.2, 1);      /* Entering elements */
   --easing-in: cubic-bezier(0.4, 0, 1, 1);       /* Exiting elements */
+  --easing-spring: cubic-bezier(0.22, 1, 0.36, 1);  /* Popup/badge overshoot — settle-in feel */
+  --duration-scalar: 1;   /* Multiplier: 1 = normal, 0 = instant (reduced-motion) */
 
   /* ============================================
      BREAKPOINTS
-     Responsive design breakpoints
+     Uses Tailwind defaults (sm-2xl). Only xs is custom.
      ============================================ */
 
-  --breakpoint-xs: 360px;    /* Small phones */
-  --breakpoint-sm: 640px;    /* Large phones */
-  --breakpoint-md: 768px;    /* Tablets */
-  --breakpoint-lg: 1024px;   /* Laptops */
-  --breakpoint-xl: 1280px;   /* Desktops */
-  --breakpoint-2xl: 1536px;  /* Large screens */
+  --breakpoint-xs: 360px;    /* Small phones — no Tailwind default */
 
   /* ============================================
      ACCESSIBILITY - Focus
@@ -169,7 +228,7 @@
 
   --focus-ring-width: 2px;
   --focus-ring-offset: 2px;
-  --focus-ring-color: var(--color-edge-focus);
+  --focus-ring-color: var(--color-sun-yellow);          /* direct brand primitive — avoids 2-level var() chain */
 
   /* ============================================
      ACCESSIBILITY - Touch Targets
@@ -178,6 +237,34 @@
 
   --touch-target-min: 44px;   /* WCAG AA minimum */
   --touch-target-comfortable: 48px;
+  --touch-target-default: var(--touch-target-comfortable);
+
+  /* ============================================
+     DENSITY
+     Attribute-driven spacing/touch affordances
+     ============================================ */
+
+  --density-compact: 0.5;
+  --density-default: 1;
+  --density-comfortable: 1.5;
+  --density-scale: var(--density-comfortable);
+
+  /* ============================================
+     Z-INDEX SCALE
+     Global stacking order for RadOS layers.
+     Windows use dynamic values within their band.
+     In-app panels use z-10/z-20/z-30 relative to
+     the window's own stacking context.
+     ============================================ */
+
+  --z-index-base: 0;           /* Background (WebGL, canvas art) */
+  --z-index-desktop: 10;       /* Desktop icons */
+  --z-index-windows: 100;      /* AppWindow container — individual windows order within */
+  --z-index-chrome: 200;       /* Taskbar */
+  --z-index-menus: 300;        /* Start Menu, dropdown menus */
+  --z-index-toasts: 400;       /* Toast notifications */
+  --z-index-modals: 500;       /* MobileAppModal, Dialog portals */
+  --z-index-system: 900;       /* Invert overlay, system effects */
 }
 
 /* =============================================================================
@@ -185,10 +272,6 @@
    Respects user preference for reduced motion
    ============================================================================= */
 
-:root {
-  --duration-scalar: 1;
-}
-
 @media (prefers-reduced-motion: reduce) {
   :root {
     --duration-scalar: 0;