@almadar/ui 6.29.0 → 6.30.0

package/dist/themeTokens-DVRwufw8.d.ts

@@ -0,0 +1,112 @@
+import { ThemeRef, ThemeDefinition, ThemeTokens, ThemeVariant, DensityTokens, ElevationTokens, GeometryTokens, IconographyTokens, MotionDurationKey, MotionEasingKey, MotionIntentMap, TypeScaleTokens, TypeIntentMap, TypeSizeKey } from '@almadar/core';
+
+/**
+ * themeTokens — runtime mirror of the orbital compiler's theme codegen.
+ *
+ * The compile path (orbital-rust/crates/orbital-shell-typescript/src/codegen/theme.rs)
+ * reads `OrbitalDefinition.theme.tokens` and emits CSS custom-property
+ * declarations into a `[data-theme="<name>-<mode>"]` block. The runtime
+ * does not parse compiled CSS — it reads the same `tokens` object directly
+ * and produces the same `{ '--color-primary': '…', '--radius-md': '…' }` map
+ * that the compiler emits.
+ *
+ * Keeping the two paths byte-identical at the variable level is the contract:
+ * editing tokens via the Studio Design System tab must produce the exact
+ * same rendered result as editing them in source and running `orbital
+ * compile`. The mapping rules here mirror `generate_tokens_css` /
+ * `generate_tokens_css_dark` (theme.rs:122–351).
+ *
+ * Compile vs runtime difference (intentional):
+ * - Compile emits the FULL set: schema overrides on top of defaults. This is
+ *   needed because the compiled CSS replaces the theme entirely.
+ * - Runtime emits ONLY the keys present in `tokens` (and `variants.dark`).
+ *   Missing keys cascade from the parent `[data-theme]` rule on the document
+ *   element. The provider scopes overrides to an orbital subtree without
+ *   shadowing inherited defaults.
+ *
+ * The per-axis var tables below (`DENSITY_SPACING_VARS`, `TYPE_INTENT_VARS`, …)
+ * are the ONE mapping between a typed-axis field and its CSS variable name.
+ * `themeTokensToCssVars` reads them forward (token → CSS); `almadar-core`'s
+ * one-time `scripts/migrate-css-themes.ts` reads them in reverse (CSS →
+ * token) to build `packages/almadar-core/themes/*.json` from the checked-in
+ * preset CSS — see that script for the inverse direction.
+ *
+ * @packageDocumentation
+ */
+
+/** Resolved color mode. Mirrors `ThemeContext.resolvedMode`. */
+type ThemeMode = 'light' | 'dark';
+/** The keys of `T` whose value is a plain (optional) string — excludes
+ * nested-object fields like `DensityTokens['spacing']` or
+ * `TypeScaleTokens['scale']`, which are never single CSS values. */
+type StringValueKey<T> = {
+    [K in keyof T]-?: T[K] extends string | undefined ? K : never;
+}[keyof T] & string;
+/** One flat scalar field on an axis object and the CSS var name it maps to. */
+interface FlatVarEntry<T> {
+    readonly cssVar: string;
+    readonly key: StringValueKey<T>;
+}
+/** Density axis — spacing scale steps (`density.spacing.space<N>` → `--space-<N>`). */
+declare const DENSITY_SPACING_VARS: ReadonlyArray<FlatVarEntry<NonNullable<DensityTokens['spacing']>>>;
+/** Density axis — per-element heights + paddings. */
+declare const DENSITY_ELEMENT_VARS: ReadonlyArray<FlatVarEntry<DensityTokens>>;
+/** Type axis — family triplet. */
+declare const TYPE_FAMILY_VARS: ReadonlyArray<FlatVarEntry<TypeScaleTokens>>;
+/** Type axis — size scale keys, ordered exactly as emitted. Each pairs `--text-<k>` / `--leading-<k>`. */
+declare const TYPE_SIZE_KEYS: ReadonlyArray<TypeSizeKey>;
+/** Type axis — intent names, ordered exactly as emitted. Each is 3 vars: `-size` / `-weight` / `-leading`. */
+declare const TYPE_INTENT_VARS: ReadonlyArray<{
+    key: keyof TypeIntentMap & string;
+    cssName: string;
+}>;
+/** Motion axis — duration palette keys, ordered exactly as emitted. */
+declare const MOTION_DURATION_KEYS: ReadonlyArray<MotionDurationKey>;
+/** Motion axis — easing palette keys, ordered exactly as emitted. */
+declare const MOTION_EASING_KEYS: ReadonlyArray<MotionEasingKey>;
+/** Motion axis — intent names, ordered exactly as emitted. Each is 2 vars: `-duration` / `-easing`. */
+declare const MOTION_INTENT_VARS: ReadonlyArray<{
+    key: keyof MotionIntentMap & string;
+    cssName: string;
+}>;
+/** Iconography axis — flat fields. */
+declare const ICONOGRAPHY_VARS: ReadonlyArray<FlatVarEntry<IconographyTokens>>;
+/** Elevation axis — flat fields. */
+declare const ELEVATION_VARS: ReadonlyArray<FlatVarEntry<ElevationTokens>>;
+/** Geometry axis — flat fields. */
+declare const GEOMETRY_VARS: ReadonlyArray<FlatVarEntry<GeometryTokens>>;
+/** Legacy free-form map prefixes (`ThemeTokens.colors`/`radii`/`spacing`/`shadows`). `typography` has no prefix — see below. */
+declare const LEGACY_PREFIXES: {
+    readonly colors: "--color-";
+    readonly radii: "--radius-";
+    readonly spacing: "--space-";
+    readonly shadows: "--shadow-";
+};
+/**
+ * Convert `ThemeTokens` (+ optional dark variant) into a CSS custom-property
+ * map keyed by variable name (e.g. `--color-primary`).
+ *
+ * Mapping rules (mirror theme.rs):
+ * - `tokens.colors.<k>`     → `--color-<k>`
+ * - `tokens.radii.<k>`      → `--radius-<k>`
+ * - `tokens.spacing.<k>`    → `--space-<k>`
+ * - `tokens.typography.<k>` → `--<k>` (keys already include their `font-`/
+ *                                       `letter-`/`line-` prefix)
+ * - `tokens.shadows.<k>`    → `--shadow-<k>` (schema key has no prefix)
+ *
+ * In `'dark'` mode, the `darkVariant` overrides are merged on top of the
+ * base tokens per category — same precedence the Rust compiler uses
+ * (`generate_tokens_css_dark`). Categories not present in `darkVariant` fall
+ * back to the base tokens.
+ */
+declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
+/**
+ * `ThemeRef` is `ThemeDefinition | string`. When it's a string, it's an
+ * unresolved import reference (e.g. `"Ocean.theme"`) that should have been
+ * inlined by the compiler's import phase before runtime. If we still see a
+ * string here, the upstream resolution path didn't run — return `undefined`
+ * rather than guess. `OrbitalThemeProvider` falls through to passthrough.
+ */
+declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
+
+export { DENSITY_ELEMENT_VARS as D, ELEVATION_VARS as E, type FlatVarEntry as F, GEOMETRY_VARS as G, ICONOGRAPHY_VARS as I, LEGACY_PREFIXES as L, MOTION_DURATION_KEYS as M, type StringValueKey as S, type ThemeMode as T, DENSITY_SPACING_VARS as a, MOTION_EASING_KEYS as b, MOTION_INTENT_VARS as c, TYPE_FAMILY_VARS as d, TYPE_INTENT_VARS as e, TYPE_SIZE_KEYS as f, resolveThemeForRuntime as r, themeTokensToCssVars as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "6.29.0",
+  "version": "6.30.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.96.0",
+    "@almadar/core": "^10.99.0",
     "@almadar/evaluator": "^2.47.0",
     "@almadar/logger": "^1.12.0",
-    "@almadar/runtime": "^6.83.0",
-    "@almadar/std": "^16.220.0",
+    "@almadar/runtime": "^6.84.0",
+    "@almadar/std": "^16.223.0",
     "@almadar/syntax": "^1.17.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
@@ -239,6 +239,7 @@
     "build:watch": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --no-warn-ignored --max-warnings 0 .",
-    "verify:themes": "node scripts/theme-contrast-audit.mjs"
+    "verify:themes": "node scripts/theme-contrast-audit.mjs",
+    "verify:safelist": "tsx scripts/audit-tailwind-safelist.ts"
   }
 }

package/scripts/audit-tailwind-safelist.ts

@@ -234,4 +234,8 @@ if (fix) {
 } else {
   console.log();
   console.log('Run with --fix to add missing classes to the preset.');
+  // A missing entry here means a component ships a class Tailwind will silently
+  // drop CSS for (the Gantt bar defect: axis rendered, bars were invisible on
+  // every reload) — CI must fail so it is caught at merge, not in production.
+  process.exit(1);
 }

package/tailwind-preset.cjs

@@ -13,6 +13,18 @@
  *   presets: [require('@almadar/ui/tailwind-preset')]
  */
 
+// Tailwind can only apply an opacity modifier (`bg-primary/50`) to a color it
+// can compute alpha for itself — a bare `var(--color-x)` string is opaque to
+// it, so every semantic token below must resolve through this function or its
+// `/NN` utilities silently generate no CSS rule at all (not even with the
+// class safelisted — confirmed via a standalone `tailwindcss` CLI build).
+function withOpacity(varName) {
+  return ({ opacityValue }) =>
+    opacityValue === undefined
+      ? `var(${varName})`
+      : `color-mix(in srgb, var(${varName}) calc(${opacityValue} * 100%), transparent)`;
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: 'class',
@@ -111,8 +123,7 @@ module.exports = {
   'animate-[shake_0.3s_ease-in-out]',
   'aspect-[3/4]',
   'bg-[radial-gradient(circle_at_center,rgba(34,197,94,0.2),transparent_70%)]',
-  'bg-[radial-gradient(ellipse_at_top,var(--color-primary)/0.08,transparent_60%),',
-    'radial-gradient(ellipse_at_bottom_right,var(--color-accent)/0.06,transparent_50%)]',
+  'bg-[radial-gradient(ellipse_at_top,var(--color-primary)/0.08,transparent_60%),radial-gradient(ellipse_at_bottom_right,var(--color-accent)/0.06,transparent_50%)]',
   'bg-[var(--color-background)]',
   'bg-[var(--color-card)]',
   'bg-[var(--color-table-header)]',
@@ -264,6 +275,122 @@ module.exports = {
   'z-[1000]',
   'z-[1001]',
   'z-[60]',
+
+  // Auto-added by audit-tailwind-safelist.ts (2026-09-19)
+  'bg-[var(--color-border)]',
+  'bg-[var(--color-muted)]',
+  'bg-[var(--color-primary)]',
+  'bg-[var(--color-surface-subtle)]',
+  'bg-[var(--color-surface)]',
+  'bg-[var(--color-warning)]',
+  'bg-accent/15',
+  'bg-background/60',
+  'bg-background/95',
+  'bg-card/40',
+  'bg-card/50',
+  'bg-card/90',
+  'bg-card/95',
+  'bg-error/15',
+  'bg-error/70',
+  'bg-error/80',
+  'bg-foreground/40',
+  'bg-muted-foreground/50',
+  'bg-muted/10',
+  'bg-muted/40',
+  'bg-primary/15',
+  'bg-primary/80',
+  'bg-secondary/10',
+  'bg-success/15',
+  'bg-success/80',
+  'bg-warning/15',
+  'bg-warning/80',
+  'border-[length:var(--border-width-thick)]',
+  'border-[var(--color-primary)]',
+  'border-[var(--color-warning)]',
+  'border-border/10',
+  'border-border/20',
+  'border-border/50',
+  'border-error/40',
+  'border-error/70',
+  'border-info/70',
+  'border-l-[length:var(--border-width-thin)]',
+  'border-primary/20',
+  'border-primary/40',
+  'border-success/40',
+  'border-success/50',
+  'border-success/70',
+  'border-warning/40',
+  'border-warning/60',
+  'border-y-[length:var(--border-width)]',
+  'bottom-[15%]',
+  'data-[empty=true]',
+  'focus-visible:ring-[length:var(--focus-ring-width)]',
+  'focus-visible:ring-offset-[length:var(--focus-ring-offset)]',
+  'focus-within:border-[var(--color-primary)]',
+  'from-primary/90',
+  'group-hover:bg-[var(--color-surface-subtle)]',
+  'h-[1.25rem]',
+  'h-[1.5rem]',
+  'hover:bg-[var(--color-card-hover,transparent)]',
+  'hover:bg-[var(--color-muted)]',
+  'hover:bg-[var(--color-surface-subtle)]',
+  'hover:bg-[var(--color-surface)]',
+  'hover:bg-foreground/10',
+  'hover:bg-muted-foreground/70',
+  'hover:bg-muted/30',
+  'hover:bg-muted/40',
+  'hover:bg-primary-foreground/15',
+  'hover:bg-primary-foreground/20',
+  'hover:text-[var(--color-foreground)]',
+  'hover:text-info/80',
+  'hover:translate-y-[var(--hover-translate-y)]',
+  'left-[15%]',
+  'max-h-[36rem]',
+  'max-h-[60vh]',
+  'max-w-[calc(100vw-1.5rem)]',
+  'max-w-[calc(100vw-1rem)]',
+  'max-w-[calc(100vw-2rem)]',
+  'md:grid-cols-[var(--master-detail-cols)]',
+  'md:max-w-[50%]',
+  'md:min-w-[160px]',
+  'md:min-w-[45%]',
+  'min-h-[16rem]',
+  'min-h-[3rem]',
+  'min-h-[8rem]',
+  'min-w-[10rem]',
+  'min-w-[16rem]',
+  'min-w-[2px]',
+  'min-w-[400px]',
+  'min-w-[520px]',
+  'min-w-[600px]',
+  'min-w-[700px]',
+  'min-w-[8rem]',
+  'pt-[10vh]',
+  'py-[1px]',
+  'right-[15%]',
+  'ring-primary/40',
+  'scale-[var(--hover-scale)]',
+  'sm:min-w-[200px]',
+  'sm:min-w-[300px]',
+  'sm:w-[28rem]',
+  'sm:w-[340px]',
+  'sm:w-[480px]',
+  'sm:w-[640px]',
+  'text-[10px]',
+  'text-[11px]',
+  'text-[var(--color-danger)]',
+  'text-[var(--color-primary)]',
+  'text-[var(--color-success)]',
+  'text-[var(--color-warning-foreground)]',
+  'text-[var(--color-warning)]',
+  'text-foreground/50',
+  'top-[15%]',
+  'translate-x-[1.25rem]',
+  'w-[1.25rem]',
+  'w-[2.75rem]',
+  'w-[400px]',
+  'z-[1]',
+  'z-[45]',
 ],
   theme: {
     fontFamily: {
@@ -278,48 +405,48 @@ module.exports = {
     extend: {
       colors: {
         primary: {
-          DEFAULT: 'var(--color-primary)',
-          foreground: 'var(--color-primary-foreground)',
-          hover: 'var(--color-primary-hover)',
+          DEFAULT: withOpacity('--color-primary'),
+          foreground: withOpacity('--color-primary-foreground'),
+          hover: withOpacity('--color-primary-hover'),
         },
         secondary: {
-          DEFAULT: 'var(--color-secondary)',
-          foreground: 'var(--color-secondary-foreground)',
-          hover: 'var(--color-secondary-hover)',
+          DEFAULT: withOpacity('--color-secondary'),
+          foreground: withOpacity('--color-secondary-foreground'),
+          hover: withOpacity('--color-secondary-hover'),
         },
         muted: {
-          DEFAULT: 'var(--color-muted)',
-          foreground: 'var(--color-muted-foreground)',
+          DEFAULT: withOpacity('--color-muted'),
+          foreground: withOpacity('--color-muted-foreground'),
         },
         accent: {
-          DEFAULT: 'var(--color-accent)',
-          foreground: 'var(--color-accent-foreground)',
+          DEFAULT: withOpacity('--color-accent'),
+          foreground: withOpacity('--color-accent-foreground'),
         },
-        background: 'var(--color-background)',
-        foreground: 'var(--color-foreground)',
+        background: withOpacity('--color-background'),
+        foreground: withOpacity('--color-foreground'),
         card: {
-          DEFAULT: 'var(--color-card)',
-          foreground: 'var(--color-card-foreground)',
+          DEFAULT: withOpacity('--color-card'),
+          foreground: withOpacity('--color-card-foreground'),
         },
-        surface: 'var(--color-surface)',
-        border: 'var(--color-border)',
-        input: 'var(--color-input)',
-        ring: 'var(--color-ring)',
+        surface: withOpacity('--color-surface'),
+        border: withOpacity('--color-border'),
+        input: withOpacity('--color-input'),
+        ring: withOpacity('--color-ring'),
         error: {
-          DEFAULT: 'var(--color-error)',
-          foreground: 'var(--color-error-foreground)',
+          DEFAULT: withOpacity('--color-error'),
+          foreground: withOpacity('--color-error-foreground'),
         },
         success: {
-          DEFAULT: 'var(--color-success)',
-          foreground: 'var(--color-success-foreground)',
+          DEFAULT: withOpacity('--color-success'),
+          foreground: withOpacity('--color-success-foreground'),
         },
         warning: {
-          DEFAULT: 'var(--color-warning)',
-          foreground: 'var(--color-warning-foreground)',
+          DEFAULT: withOpacity('--color-warning'),
+          foreground: withOpacity('--color-warning-foreground'),
         },
         info: {
-          DEFAULT: 'var(--color-info)',
-          foreground: 'var(--color-info-foreground)',
+          DEFAULT: withOpacity('--color-info'),
+          foreground: withOpacity('--color-info-foreground'),
         },
       },
       borderRadius: {

package/themes/almadar-website.css

@@ -1,52 +1,20 @@
 /**
- * Almadar Website Theme
- *
- * Brand-accurate theme for almadar.io based on Almadar Brand Guidelines.
- * Teal primary, Cyan accent, Sand Gold highlights, Plus Jakarta Sans typography.
- * Dark hero sections with light content sections (mixed mode).
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/almadar-website.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
 
-/* ==========================================================================
- * LIGHT MODE (content sections)
- * ========================================================================== */
 [data-theme="almadar-website-light"] {
-    /* Shadows - neutral midnight-based (per brand) */
-    --shadow-main: 0 4px 14px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
-    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
-    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.15);
-    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-    --shadow-none: none;
-    --shadow-hover: 0 12px 40px rgba(15, 23, 42, 0.15);
-    --shadow-active: 0 2px 8px rgba(15, 23, 42, 0.1);
-
-    /* Border radius - per brand (4/8/12/16) */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Teal on parchment */
     --color-primary: #0f766e;
     --color-primary-hover: #115e59;
     --color-primary-foreground: #ffffff;
-
     --color-secondary: #f1f5f9;
     --color-secondary-hover: #e2e8f0;
     --color-secondary-foreground: #0f172a;
-
     --color-accent: #c9a227;
     --color-accent-foreground: #0f172a;
-
     --color-muted: #f1f5f9;
     --color-muted-foreground: #5c6b80;
-
     --color-background: #ffffff;
     --color-foreground: #0f172a;
     --color-card: #ffffff;
@@ -55,10 +23,6 @@
     --color-border: #e2e8f0;
     --color-input: #e2e8f0;
     --color-ring: #14b8a6;
-
-    /* Accent is gold in Almadar brand */
-
-    /* Semantic colors */
     --color-error: #dc2626;
     --color-error-foreground: #ffffff;
     --color-success: #15803d;
@@ -67,100 +31,70 @@
     --color-warning-foreground: #000000;
     --color-info: #1d4ed8;
     --color-info-foreground: #ffffff;
-
-    /* Icon styling */
-    --icon-stroke-width: 1.75;
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
     --icon-color: #14b8a6;
-
-    /* Transitions */
     --transition-fast: 150ms;
     --transition-normal: 250ms;
     --transition-slow: 400ms;
     --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active */
     --hover-scale: 1.02;
     --hover-translate-y: -2px;
     --hover-translate-x: 0;
     --active-scale: 0.98;
     --active-translate-y: 0;
-
-    /* Focus ring */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #14b8a6;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
+    --shadow-main: 0 4px 14px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
+    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
+    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.15);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(15, 23, 42, 0.15);
+    --shadow-active: 0 2px 8px rgba(15, 23, 42, 0.1);
     --duration-instant: 0ms;
     --duration-fast: var(--transition-fast);
     --duration-normal: var(--transition-normal);
     --duration-slow: var(--transition-slow);
     --duration-dramatic: 600ms;
-    /* Motion axis — easing palette (aliases existing --transition-timing for backward compat) */
     --easing-linear: linear;
     --easing-standard: var(--transition-timing);
     --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 1.75;
     --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-lg);
     --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
     --radius-container: var(--radius-md);
     --radius-interactive: var(--radius-md);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);
 }
 
-/* ==========================================================================
- * DARK MODE (hero sections, dark backgrounds)
- * ========================================================================== */
 [data-theme="almadar-website-dark"] {
-    /* Shadows - dark mode, deeper (per brand) */
-    --shadow-main: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
-    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    --shadow-none: none;
-    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
-    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.3);
-
-    /* Border radius - per brand (4/8/12/16) */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Teal/Cyan on Midnight Blue */
     --color-primary: #14b8a6;
     --color-primary-hover: #2dd4bf;
     --color-primary-foreground: #042f2e;
-
     --color-secondary: #1e293b;
     --color-secondary-hover: #334155;
     --color-secondary-foreground: #f1f5f9;
-
     --color-accent: #d4b44a;
     --color-accent-foreground: #0f172a;
-
     --color-muted: #1e293b;
     --color-muted-foreground: #94a3b8;
-
     --color-background: #0f172a;
     --color-foreground: #f8fafc;
     --color-card: #1e293b;
@@ -169,14 +103,10 @@
     --color-border: #334155;
     --color-input: #334155;
     --color-ring: #14b8a6;
-
-    /* Tertiary color (Gold in Almadar brand) */
     --color-tertiary: #c9a227;
     --color-tertiary-hover: #d4b44a;
     --color-tertiary-foreground: #0f172a;
     --color-tertiary-muted: rgba(201, 162, 39, 0.15);
-
-    /* Semantic colors */
     --color-error: #f87171;
     --color-error-foreground: #000000;
     --color-success: #4ade80;
@@ -185,54 +115,54 @@
     --color-warning-foreground: #000000;
     --color-info: #38bdf8;
     --color-info-foreground: #000000;
-
-    /* Icon styling */
-    --icon-stroke-width: 1.75;
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
     --icon-color: #14b8a6;
-
-    /* Transitions */
     --transition-fast: 150ms;
     --transition-normal: 250ms;
     --transition-slow: 400ms;
     --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active */
     --hover-scale: 1.02;
     --hover-translate-y: -2px;
     --hover-translate-x: 0;
     --active-scale: 0.98;
     --active-translate-y: 0;
-
-    /* Focus ring */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #14b8a6;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
+    --shadow-main: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
+    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.3);
     --duration-instant: 0ms;
     --duration-fast: var(--transition-fast);
     --duration-normal: var(--transition-normal);
     --duration-slow: var(--transition-slow);
     --duration-dramatic: 600ms;
-    /* Motion axis — easing palette (aliases existing --transition-timing for backward compat) */
     --easing-linear: linear;
     --easing-standard: var(--transition-timing);
     --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 1.75;
     --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-lg);
     --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
     --radius-container: var(--radius-md);
     --radius-interactive: var(--radius-md);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);