@almadar/ui 1.0.21 → 1.0.22

package/dist/context/index.js

@@ -1,10 +1,21 @@
-export { DesignThemeProvider, useDesignTheme } from '../chunk-4FRUCUO5.js';
-export { BUILT_IN_THEMES, ThemeContext_default as ThemeContext, ThemeProvider, UISlotContext, UISlotProvider, useSlotContent, useSlotHasContent, useTheme, useUISlots } from '../chunk-I5RSZIOE.js';
+export { UISlotContext, UISlotProvider, useSlotContent, useSlotHasContent, useUISlots } from '../chunk-W5YTXLXL.js';
 import '../chunk-7NEWMNNU.js';
+import { ThemeProvider, useTheme } from '../chunk-4UFNDD6B.js';
+export { BUILT_IN_THEMES, ThemeContext_default as ThemeContext, ThemeProvider, useTheme } from '../chunk-4UFNDD6B.js';
 import '../chunk-PKBMQBKP.js';
 import { createContext, useCallback, useMemo, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+// context/DesignThemeContext.tsx
+var DesignThemeProvider = ThemeProvider;
+function useDesignTheme() {
+  const { theme, setTheme, availableThemes } = useTheme();
+  return {
+    designTheme: theme,
+    setDesignTheme: setTheme,
+    availableThemes: availableThemes.map((t) => t.name)
+  };
+}
 var ANONYMOUS_USER = {
   id: "anonymous",
   role: "anonymous",
@@ -104,4 +115,4 @@ function useUserForEvaluation() {
   return isLoggedIn && user ? user : void 0;
 }
 
-export { ANONYMOUS_USER, UserContext, UserProvider, useHasPermission, useHasRole, useUser, useUserForEvaluation };
+export { ANONYMOUS_USER, DesignThemeProvider, UserContext, UserProvider, useDesignTheme, useHasPermission, useHasRole, useUser, useUserForEvaluation };

package/dist/hooks/index.d.ts

@@ -2,9 +2,81 @@ import { OrbitalSchema } from '@almadar/core';
 import { E as EventBusContextType, a as EventListener } from '../event-bus-types-8-cjyMxw.js';
 export { K as KFlowEvent, U as Unsubscribe } from '../event-bus-types-8-cjyMxw.js';
 export { D as DEFAULT_SLOTS, R as RenderUIConfig, b as SlotAnimation, c as SlotChangeCallback, S as SlotContent, a as UISlot, U as UISlotManager, u as useUISlotManager } from '../useUISlots-mnggE9X9.js';
+import React__default, { ReactNode } from 'react';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { Entity, getEntity, getByType, getAllEntities, getSingleton, spawnEntity, updateEntity, updateSingleton, removeEntity, clearEntities } from '../stores/index.js';
 
+/**
+ * useEventBus Hook
+ *
+ * Provides event bus utilities for component communication.
+ * This connects to the EventBusProvider for real applications
+ * or provides a simple in-memory bus for design system / Storybook.
+ *
+ * @packageDocumentation
+ */
+
+declare global {
+    interface Window {
+        __kflowEventBus?: EventBusContextType | null;
+    }
+}
+/**
+ * Hook for accessing the event bus.
+ *
+ * Uses EventBusProvider context if available, otherwise falls back to
+ * a simple in-memory event bus (for design system / Storybook).
+ *
+ * @returns Event bus instance with emit, on, once, and hasListeners methods
+ *
+ * @example
+ * ```tsx
+ * const eventBus = useEventBus();
+ *
+ * // Emit an event
+ * eventBus.emit('UI:CLICK', { id: '123' });
+ *
+ * // Subscribe to an event
+ * useEffect(() => {
+ *   return eventBus.on('UI:CLICK', (event) => {
+ *     console.log('Clicked:', event.payload);
+ *   });
+ * }, []);
+ * ```
+ */
+declare function useEventBus(): EventBusContextType;
+/**
+ * Hook for subscribing to a specific event.
+ * Automatically cleans up subscription on unmount.
+ *
+ * @param event - Event name to subscribe to
+ * @param handler - Event handler function
+ *
+ * @example
+ * ```tsx
+ * useEventListener('UI:CLICK', (event) => {
+ *   console.log('Clicked:', event.payload);
+ * });
+ * ```
+ */
+declare function useEventListener(event: string, handler: EventListener): void;
+/**
+ * Hook for emitting events.
+ * Returns a memoized emit function.
+ *
+ * @returns Function to emit events
+ *
+ * @example
+ * ```tsx
+ * const emit = useEmitEvent();
+ *
+ * const handleClick = () => {
+ *   emit('UI:CLICK', { id: '123' });
+ * };
+ * ```
+ */
+declare function useEmitEvent(): (type: string, payload?: Record<string, unknown>) => void;
+
 /**
  * useOrbitalHistory Hook
  *
@@ -478,77 +550,6 @@ interface UseValidationResult {
 }
 declare function useValidation(): UseValidationResult;
 
-/**
- * useEventBus Hook
- *
- * Provides event bus utilities for component communication.
- * This connects to the EventBusProvider for real applications
- * or provides a simple in-memory bus for design system / Storybook.
- *
- * @packageDocumentation
- */
-
-declare global {
-    interface Window {
-        __kflowEventBus?: EventBusContextType | null;
-    }
-}
-/**
- * Hook for accessing the event bus.
- *
- * Uses EventBusProvider context if available, otherwise falls back to
- * a simple in-memory event bus (for design system / Storybook).
- *
- * @returns Event bus instance with emit, on, once, and hasListeners methods
- *
- * @example
- * ```tsx
- * const eventBus = useEventBus();
- *
- * // Emit an event
- * eventBus.emit('UI:CLICK', { id: '123' });
- *
- * // Subscribe to an event
- * useEffect(() => {
- *   return eventBus.on('UI:CLICK', (event) => {
- *     console.log('Clicked:', event.payload);
- *   });
- * }, []);
- * ```
- */
-declare function useEventBus(): EventBusContextType;
-/**
- * Hook for subscribing to a specific event.
- * Automatically cleans up subscription on unmount.
- *
- * @param event - Event name to subscribe to
- * @param handler - Event handler function
- *
- * @example
- * ```tsx
- * useEventListener('UI:CLICK', (event) => {
- *   console.log('Clicked:', event.payload);
- * });
- * ```
- */
-declare function useEventListener(event: string, handler: EventListener): void;
-/**
- * Hook for emitting events.
- * Returns a memoized emit function.
- *
- * @returns Function to emit events
- *
- * @example
- * ```tsx
- * const emit = useEmitEvent();
- *
- * const handleClick = () => {
- *   emit('UI:CLICK', { id: '123' });
- * };
- * ```
- */
-declare function useEmitEvent(): (type: string, payload?: Record<string, unknown>) => void;
-
 /**
  * useUIEvents - UI Event to State Machine Bridge
  *
@@ -597,16 +598,50 @@ declare function useSelectedEntity<T>(eventBusInstance?: ReturnType<typeof useEv
 /**
  * useEntityData Hook
  *
- * Provides data fetching utilities for entity lists.
- * This is a stub implementation for the design system that returns mock data.
- * In a real application, this would connect to a backend API.
+ * Provides data fetching utilities for entity lists and details.
+ * Uses a pluggable EntityDataContext when available (e.g., builder runtime
+ * bridges FetchedDataContext). Falls back to stubs when no provider is
+ * present (Storybook, standalone design system).
  *
  * @packageDocumentation
  */
+
+interface EntityDataAdapter {
+    /** Get all records for an entity */
+    getData: (entity: string) => Record<string, unknown>[];
+    /** Get a single record by entity name and ID */
+    getById: (entity: string, id: string) => Record<string, unknown> | undefined;
+    /** Whether data is currently loading */
+    isLoading: boolean;
+    /** Current error */
+    error: string | null;
+}
 /**
- * Query key factory for entity data queries.
- * Used with React Query for cache invalidation.
+ * Provider that bridges a host app's data source to useEntityList/useEntity hooks.
+ *
+ * @example
+ * ```tsx
+ * // In builder runtime
+ * const fetchedData = useFetchedData();
+ * const adapter = {
+ *   getData: fetchedData.getData,
+ *   getById: fetchedData.getById,
+ *   isLoading: fetchedData.loading,
+ *   error: fetchedData.error,
+ * };
+ * <EntityDataProvider adapter={adapter}>
+ *   {children}
+ * </EntityDataProvider>
+ * ```
+ */
+declare function EntityDataProvider({ adapter, children, }: {
+    adapter: EntityDataAdapter;
+    children: ReactNode;
+}): React__default.FunctionComponentElement<React__default.ProviderProps<EntityDataAdapter | null>>;
+/**
+ * Access the entity data adapter (null if no provider).
  */
+declare function useEntityDataAdapter(): EntityDataAdapter | null;
 declare const entityDataKeys: {
     all: readonly ["entities"];
     lists: () => readonly ["entities", "list"];
@@ -614,43 +649,31 @@ declare const entityDataKeys: {
     details: () => readonly ["entities", "detail"];
     detail: (entity: string, id: string) => readonly ["entities", "detail", string, string];
 };
-/**
- * Generic entity data record type
- */
 type EntityDataRecord = Record<string, unknown>;
 interface UseEntityListOptions {
     /** Skip fetching */
     skip?: boolean;
 }
 interface UseEntityListResult<T = Record<string, unknown>> {
-    /** Fetched data */
     data: T[];
-    /** Loading state */
     isLoading: boolean;
-    /** Error state */
     error: Error | null;
-    /** Refetch function */
+    refetch: () => void;
+}
+interface UseEntityDetailResult<T = Record<string, unknown>> {
+    data: T | null;
+    isLoading: boolean;
+    error: Error | null;
     refetch: () => void;
 }
 /**
- * Hook for fetching entity list data
- *
- * @param entity - Entity name to fetch
- * @param options - Fetch options
- * @returns Entity list data and loading states
- *
- * @example
- * ```tsx
- * const { data, isLoading, error } = useEntityList('tasks');
- * ```
+ * Hook for fetching entity list data.
+ * Uses EntityDataContext if available, otherwise falls back to stub.
  */
 declare function useEntityList<T = Record<string, unknown>>(entity: string | undefined, options?: UseEntityListOptions): UseEntityListResult<T>;
 /**
- * Hook for fetching a single entity by ID
- *
- * @param entity - Entity name
- * @param id - Entity ID
- * @returns Single entity data and loading states
+ * Hook for fetching a single entity by ID.
+ * Uses EntityDataContext if available, otherwise falls back to stub.
  */
 declare function useEntity$1<T = Record<string, unknown>>(entity: string | undefined, id: string | undefined): {
     data: T | null;
@@ -658,29 +681,8 @@ declare function useEntity$1<T = Record<string, unknown>>(entity: string | undef
     error: Error | null;
 };
 /**
- * Result type for useEntityDetail hook
- */
-interface UseEntityDetailResult<T = Record<string, unknown>> {
-    /** Fetched entity data */
-    data: T | null;
-    /** Loading state */
-    isLoading: boolean;
-    /** Error state */
-    error: Error | null;
-    /** Refetch function */
-    refetch: () => void;
-}
-/**
- * Hook for fetching entity detail by ID (alias for useEntity with refetch)
- *
- * @param entity - Entity name
- * @param id - Entity ID
- * @returns Entity detail data and loading states
- *
- * @example
- * ```tsx
- * const { data, isLoading, error, refetch } = useEntityDetail('tasks', taskId);
- * ```
+ * Hook for fetching entity detail by ID (alias for useEntity with refetch).
+ * Uses EntityDataContext if available, otherwise falls back to stub.
  */
 declare function useEntityDetail<T = Record<string, unknown>>(entity: string | undefined, id: string | undefined): UseEntityDetailResult<T>;
 
@@ -1072,4 +1074,4 @@ declare function useGitHubBranches(owner: string, repo: string, enabled?: boolea
     branches: string[];
 }, Error>;
 
-export { type AuthContextValue, type AuthUser, type ChangeSummary, type CompileResult, type CompileStage, ENTITY_EVENTS, Entity, type EntityDataRecord, type EntityMutationResult, EventBusContextType, EventListener, type Extension, type ExtensionManifest, type FileSystemFile, type FileSystemStatus, type GitHubRepo, type GitHubStatus, type HistoryTimelineItem, type OpenFile, type OrbitalEventPayload, type OrbitalEventResponse, type QuerySingletonEntity, type QuerySingletonResult, type QuerySingletonState, type QueryState, type RevertResult, type SelectedFile, type UseCompileResult, type UseEntityDetailResult, type UseEntityListOptions, type UseEntityListResult, type UseEntityMutationsOptions, type UseExtensionsOptions, type UseExtensionsResult, type UseFileEditorOptions, type UseFileEditorResult, type UseFileSystemResult, type UseOrbitalHistoryOptions, type UseOrbitalHistoryResult, clearEntities, entityDataKeys, getAllEntities, getByType, getEntity, getSingleton, parseQueryBinding, removeEntity, spawnEntity, updateEntity, updateSingleton, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useEmitEvent, useEntities, useEntitiesByType, useEntity$1 as useEntity, useEntity as useEntityById, useEntityDetail, useEntityList, useEntityMutations, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInput, useOrbitalHistory, useOrbitalMutations, usePhysics, usePlayer, usePreview, useQuerySingleton, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation };
+export { type AuthContextValue, type AuthUser, type ChangeSummary, type CompileResult, type CompileStage, ENTITY_EVENTS, Entity, type EntityDataAdapter, EntityDataProvider, type EntityDataRecord, type EntityMutationResult, EventBusContextType, EventListener, type Extension, type ExtensionManifest, type FileSystemFile, type FileSystemStatus, type GitHubRepo, type GitHubStatus, type HistoryTimelineItem, type OpenFile, type OrbitalEventPayload, type OrbitalEventResponse, type QuerySingletonEntity, type QuerySingletonResult, type QuerySingletonState, type QueryState, type RevertResult, type SelectedFile, type UseCompileResult, type UseEntityDetailResult, type UseEntityListOptions, type UseEntityListResult, type UseEntityMutationsOptions, type UseExtensionsOptions, type UseExtensionsResult, type UseFileEditorOptions, type UseFileEditorResult, type UseFileSystemResult, type UseOrbitalHistoryOptions, type UseOrbitalHistoryResult, clearEntities, entityDataKeys, getAllEntities, getByType, getEntity, getSingleton, parseQueryBinding, removeEntity, spawnEntity, updateEntity, updateSingleton, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useEmitEvent, useEntities, useEntitiesByType, useEntity$1 as useEntity, useEntity as useEntityById, useEntityDataAdapter, useEntityDetail, useEntityList, useEntityMutations, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInput, useOrbitalHistory, useOrbitalMutations, usePhysics, usePlayer, usePreview, useQuerySingleton, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation };

package/dist/hooks/index.js

@@ -1,6 +1,6 @@
-export { ENTITY_EVENTS, entityDataKeys, parseQueryBinding, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useEntities, useEntitiesByType, useEntity, useEntity2 as useEntityById, useEntityDetail, useEntityList, useEntityMutations, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInput, useOrbitalHistory, useOrbitalMutations, usePhysics, usePlayer, usePreview, useQuerySingleton, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation } from '../chunk-VE4ZELYZ.js';
-import '../chunk-XSEDIUM6.js';
-export { useEmitEvent, useEventBus, useEventListener } from '../chunk-TTXKOHDO.js';
+export { ENTITY_EVENTS, parseQueryBinding, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useEntities, useEntitiesByType, useEntity as useEntityById, useEntityMutations, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInput, useOrbitalHistory, useOrbitalMutations, usePhysics, usePlayer, usePreview, useQuerySingleton, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation } from '../chunk-ITRZURGQ.js';
 export { DEFAULT_SLOTS, useUISlotManager } from '../chunk-7NEWMNNU.js';
+import '../chunk-XSEDIUM6.js';
+export { EntityDataProvider, entityDataKeys, useEmitEvent, useEntity, useEntityDataAdapter, useEntityDetail, useEntityList, useEventBus, useEventListener } from '../chunk-WXFQV3ZP.js';
 export { clearEntities, getAllEntities, getByType, getEntity, getSingleton, removeEntity, spawnEntity, updateEntity, updateSingleton } from '../chunk-N7MVUW4R.js';
 import '../chunk-PKBMQBKP.js';

package/dist/providers/index.d.ts

@@ -233,7 +233,6 @@ declare function useFetchedEntity(entityName: string): {
  * Combines:
  * - ThemeProvider - Theme and color mode management
  * - EventBusProvider - Page-scoped event pub/sub
- * - UISlotProvider - UI slot management for render_ui effects
  * - SelectionProvider - Selected entity tracking
  * - FetchedDataProvider - Server-fetched entity data
  *

package/dist/providers/index.js

@@ -1,7 +1,6 @@
-import { ThemeProvider, UISlotProvider } from '../chunk-I5RSZIOE.js';
-import { EventBusProvider, SelectionProvider } from '../chunk-TTXKOHDO.js';
-export { EventBusContext, EventBusProvider, SelectionContext, SelectionProvider, useSelection, useSelectionOptional } from '../chunk-TTXKOHDO.js';
-import '../chunk-7NEWMNNU.js';
+import { ThemeProvider } from '../chunk-4UFNDD6B.js';
+import { EventBusProvider, SelectionProvider, EntityDataProvider } from '../chunk-WXFQV3ZP.js';
+export { EventBusContext, EventBusProvider, SelectionContext, SelectionProvider, useSelection, useSelectionOptional } from '../chunk-WXFQV3ZP.js';
 import { useOfflineExecutor } from '../chunk-PL7MD6GF.js';
 import '../chunk-PKBMQBKP.js';
 import { createContext, useState, useCallback, useMemo, useContext } from 'react';
@@ -162,6 +161,16 @@ function useFetchedEntity(entityName) {
     error: context.error
   };
 }
+function FetchedDataBridge({ children }) {
+  const fetchedData = useFetchedData();
+  const adapter = useMemo(() => ({
+    getData: (entity) => fetchedData.getData(entity),
+    getById: (entity, id) => fetchedData.getById(entity, id),
+    isLoading: fetchedData.loading,
+    error: fetchedData.error
+  }), [fetchedData.getData, fetchedData.getById, fetchedData.loading, fetchedData.error]);
+  return /* @__PURE__ */ jsx(EntityDataProvider, { adapter, children });
+}
 function OrbitalProvider({
   children,
   themes,
@@ -176,7 +185,7 @@ function OrbitalProvider({
       themes,
       defaultTheme,
       defaultMode,
-      children: /* @__PURE__ */ jsx(FetchedDataProvider, { initialData, children: /* @__PURE__ */ jsx(EventBusProvider, { debug, children: /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(SelectionProvider, { debug, children }) }) }) })
+      children: /* @__PURE__ */ jsx(FetchedDataProvider, { initialData, children: /* @__PURE__ */ jsx(FetchedDataBridge, { children: /* @__PURE__ */ jsx(EventBusProvider, { debug, children: /* @__PURE__ */ jsx(SelectionProvider, { debug, children }) }) }) })
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",
@@ -64,15 +64,19 @@
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "react-force-graph-2d": "^1.28.0",
-    "@almadar/core": "1.0.16",
-    "@almadar/evaluator": "1.0.13",
-    "@almadar/patterns": "1.1.0"
+    "@almadar/core": "1.0.17",
+    "@almadar/evaluator": "1.0.14",
+    "@almadar/patterns": "1.1.1"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^7.0.0",
-    "@tanstack/react-query": "^5.0.0"
+    "@tanstack/react-query": "^5.0.0",
+    "three": "^0.160.0",
+    "@react-three/fiber": "^8.15.0",
+    "@react-three/drei": "^9.92.0",
+    "zustand": "^4.4.0"
   },
   "devDependencies": {
     "react": "^18.3.1",
@@ -81,6 +85,7 @@
     "@tanstack/react-query": "^5.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "@types/three": "^0.160.0",
     "@storybook/addon-links": "^10.2.6",
     "@storybook/addon-themes": "^10.2.6",
     "@storybook/react": "^10.2.6",

package/themes/arctic.css

@@ -0,0 +1,203 @@
+/**
+ * Arctic Theme — "Ice Crystal"
+ *
+ * Cool ice blue with a clean, precise, crisp aesthetic inspired by frozen
+ * landscapes and crystalline formations. Sky blues and cyans evoke glacial
+ * clarity, with sharp clean shadows and precise border radii. Tighter
+ * letter-spacing and snappy transitions reinforce the theme's precision
+ * and clarity.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="arctic-light"] {
+    /* Shadows - Cool blue-tinted, crisp and clean */
+    --shadow-main: 0 1px 2px rgba(2, 132, 199, 0.08), 0 1px 1px rgba(2, 132, 199, 0.05);
+    --shadow-sm: 0 1px 1px rgba(2, 132, 199, 0.05);
+    --shadow-lg:
+        0 8px 20px -4px rgba(2, 132, 199, 0.1), 0 4px 8px -4px rgba(2, 132, 199, 0.06);
+    --shadow-inner: inset 0 1px 2px rgba(2, 132, 199, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 8px 30px -8px rgba(2, 132, 199, 0.16);
+    --shadow-active: 0 1px 1px rgba(2, 132, 199, 0.05);
+
+    /* Border radius - Precise, clean */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --radius-xl: 14px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Ice blue, cool and clean */
+    --color-primary: #0284c7;
+    --color-primary-hover: #0369a1;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #e0f2fe;
+    --color-secondary-hover: #bae6fd;
+    --color-secondary-foreground: #0c4a6e;
+
+    --color-accent: #67e8f9;
+    --color-accent-foreground: #164e63;
+
+    --color-muted: #e0f2fe;
+    --color-muted-foreground: #64748b;
+
+    --color-background: #f0f9ff;
+    --color-foreground: #0c4a6e;
+    --color-card: #ffffff;
+    --color-card-foreground: #0c4a6e;
+    --color-surface: #e0f2fe;
+    --color-border: rgba(2, 132, 199, 0.2);
+    --color-input: rgba(2, 132, 199, 0.22);
+    --color-ring: #0284c7;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #16a34a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+
+    /* Typography */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: -0.01em;
+    --line-height: 1.55;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #0284c7;
+
+    /* Transitions - Crisp, snappy */
+    --transition-fast: 120ms;
+    --transition-normal: 220ms;
+    --transition-slow: 350ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #0284c7;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="arctic-dark"] {
+    /* Shadows - Cool ice-blue glow on deep dark */
+    --shadow-main: 0 1px 2px rgba(103, 232, 249, 0.08), 0 1px 1px rgba(0, 0, 0, 0.2);
+    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.2);
+    --shadow-lg:
+        0 8px 20px -4px rgba(0, 0, 0, 0.35), 0 4px 8px -4px rgba(103, 232, 249, 0.06);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.25);
+    --shadow-none: none;
+    --shadow-hover: 0 8px 30px -8px rgba(103, 232, 249, 0.14);
+    --shadow-active: 0 1px 1px rgba(0, 0, 0, 0.2);
+
+    /* Border radius - Precise, clean */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --radius-xl: 14px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Bright cyan on deep ice blue */
+    --color-primary: #7dd3fc;
+    --color-primary-hover: #bae6fd;
+    --color-primary-foreground: #081520;
+
+    --color-secondary: #0c2236;
+    --color-secondary-hover: #10304d;
+    --color-secondary-foreground: #e0f2fe;
+
+    --color-accent: #67e8f9;
+    --color-accent-foreground: #164e63;
+
+    --color-muted: #0c2236;
+    --color-muted-foreground: #7dd3fc;
+
+    --color-background: #081520;
+    --color-foreground: #e0f2fe;
+    --color-card: #0c2236;
+    --color-card-foreground: #e0f2fe;
+    --color-surface: #10304d;
+    --color-border: rgba(103, 232, 249, 0.2);
+    --color-input: rgba(103, 232, 249, 0.25);
+    --color-ring: #7dd3fc;
+
+    /* Semantic colors - Brighter for dark mode */
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #60a5fa;
+    --color-info-foreground: #000000;
+
+    /* Typography */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: -0.01em;
+    --line-height: 1.55;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #67e8f9;
+
+    /* Transitions - Crisp, snappy */
+    --transition-fast: 120ms;
+    --transition-normal: 220ms;
+    --transition-slow: 350ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #67e8f9;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}