@almadar/cli 0.3.1 → 0.3.3

package/shells/typescript-shell/packages/client/src/test/setup.ts

@@ -0,0 +1,126 @@
+import '@testing-library/jest-dom';
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// Mock Firebase before any imports that might use it
+vi.mock('@/config/firebase', () => ({
+  app: {},
+  auth: {
+    currentUser: null,
+    onAuthStateChanged: vi.fn((callback) => {
+      callback(null);
+      return vi.fn();
+    }),
+    signInWithEmailAndPassword: vi.fn(),
+    signOut: vi.fn(),
+  },
+  db: {},
+  default: {},
+  // Preview mode flag - true in tests to use mock data
+  isPreviewMode: true,
+}));
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});
+
+// Mock window.matchMedia for responsive tests
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+});
+
+// Mock ResizeObserver
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+window.ResizeObserver = ResizeObserverMock;
+
+// Mock HTMLCanvasElement.prototype.getContext for game/canvas tests
+// jsdom doesn't implement canvas context, so we provide a mock
+// We use vi.spyOn to ensure the mock is applied even with jsdom's class hierarchy
+const mockGetContext = vi.fn(function (
+  this: HTMLCanvasElement,
+  contextId: string
+) {
+  if (contextId === '2d') {
+    return {
+      // Canvas 2D context mock - covers common methods used in games
+      canvas: this,
+      fillStyle: '',
+      strokeStyle: '',
+      lineWidth: 1,
+      font: '10px sans-serif',
+      textAlign: 'start',
+      textBaseline: 'alphabetic',
+      globalAlpha: 1,
+      globalCompositeOperation: 'source-over',
+      imageSmoothingEnabled: true,
+
+      // Drawing methods (no-op for tests)
+      fillRect: vi.fn(),
+      strokeRect: vi.fn(),
+      clearRect: vi.fn(),
+      fillText: vi.fn(),
+      strokeText: vi.fn(),
+      measureText: vi.fn((text: string) => ({ width: text.length * 8 })),
+
+      // Path methods
+      beginPath: vi.fn(),
+      closePath: vi.fn(),
+      moveTo: vi.fn(),
+      lineTo: vi.fn(),
+      arc: vi.fn(),
+      arcTo: vi.fn(),
+      rect: vi.fn(),
+      fill: vi.fn(),
+      stroke: vi.fn(),
+      clip: vi.fn(),
+
+      // Transformation methods
+      save: vi.fn(),
+      restore: vi.fn(),
+      scale: vi.fn(),
+      rotate: vi.fn(),
+      translate: vi.fn(),
+      transform: vi.fn(),
+      setTransform: vi.fn(),
+      resetTransform: vi.fn(),
+
+      // Image methods
+      drawImage: vi.fn(),
+      createImageData: vi.fn(() => ({ width: 0, height: 0, data: new Uint8ClampedArray() })),
+      getImageData: vi.fn(() => ({ width: 0, height: 0, data: new Uint8ClampedArray() })),
+      putImageData: vi.fn(),
+
+      // Gradient and pattern
+      createLinearGradient: vi.fn(() => ({ addColorStop: vi.fn() })),
+      createRadialGradient: vi.fn(() => ({ addColorStop: vi.fn() })),
+      createPattern: vi.fn(() => null),
+
+      // Other
+      isPointInPath: vi.fn(() => false),
+      isPointInStroke: vi.fn(() => false),
+    } as unknown as CanvasRenderingContext2D;
+  }
+  return null;
+});
+
+// Apply mock using multiple strategies to ensure it works with jsdom
+// Strategy 1: Direct prototype assignment
+HTMLCanvasElement.prototype.getContext = mockGetContext as typeof HTMLCanvasElement.prototype.getContext;
+
+// Strategy 2: Use spyOn if available (more robust for jsdom)
+vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(mockGetContext);

package/shells/typescript-shell/packages/client/src/themes/almadar.css

@@ -0,0 +1,196 @@
+/**
+ * Almadar Theme
+ *
+ * Inspired by the Almadar/KFlow branding. Features teal-to-cyan
+ * gradients, dark slate backgrounds, and glowing accent effects.
+ * Premium, futuristic aesthetic with glowing interactions.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="almadar-light"] {
+    /* Shadows - Soft teal glow */
+    --shadow-main:
+        0 4px 14px rgba(20, 184, 166, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 2px 4px rgba(20, 184, 166, 0.08);
+    --shadow-lg:
+        0 8px 30px rgba(20, 184, 166, 0.18), 0 4px 10px rgba(0, 0, 0, 0.06);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(20, 184, 166, 0.2);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.15);
+
+    /* Border radius - Modern rounded */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width - Clean */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Teal on light background */
+    --color-primary: #14b8a6;
+    --color-primary-hover: #0d9488;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #f1f5f9;
+    --color-secondary-hover: #e2e8f0;
+    --color-secondary-foreground: #0f172a;
+
+    --color-accent: #06b6d4;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #f1f5f9;
+    --color-muted-foreground: #64748b;
+
+    --color-background: #f8fafc;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f1f5f9;
+    --color-border: rgba(20, 184, 166, 0.3);
+    --color-input: rgba(20, 184, 166, 0.2);
+    --color-ring: #14b8a6;
+
+    /* 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: #0ea5e9;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Modern, clean */
+    --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.02em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #0d9488;
+
+    /* Transitions - Smooth */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring - Teal */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="almadar-dark"] {
+    /* Shadows - Glowing teal accents */
+    --shadow-main:
+        0 4px 14px rgba(20, 184, 166, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-sm: 0 2px 4px rgba(20, 184, 166, 0.1);
+    --shadow-lg:
+        0 8px 30px rgba(20, 184, 166, 0.25), 0 4px 10px rgba(0, 0, 0, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    --shadow-none: none;
+    --shadow-hover:
+        0 12px 40px rgba(20, 184, 166, 0.35), 0 4px 12px rgba(6, 182, 212, 0.2);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.2);
+
+    /* Border radius - Modern rounded */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width - Clean */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Teal/Cyan with dark slate */
+    --color-primary: #14b8a6;
+    --color-primary-hover: #2dd4bf;
+    --color-primary-foreground: #042f2e;
+
+    --color-secondary: #1e293b;
+    --color-secondary-hover: #334155;
+    --color-secondary-foreground: #f1f5f9;
+
+    --color-accent: #06b6d4;
+    --color-accent-foreground: #083344;
+
+    --color-muted: #1e293b;
+    --color-muted-foreground: #94a3b8;
+
+    --color-background: #0f172a;
+    --color-foreground: #f1f5f9;
+    --color-card: #1e293b;
+    --color-card-foreground: #f1f5f9;
+    --color-surface: #1e293b;
+    --color-border: rgba(20, 184, 166, 0.25);
+    --color-input: rgba(20, 184, 166, 0.3);
+    --color-ring: #14b8a6;
+
+    /* 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: #38bdf8;
+    --color-info-foreground: #000000;
+
+    /* Typography - Modern, clean */
+    --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.02em;
+    --line-height: 1.6;
+
+    /* Icon styling - Medium with teal color */
+    --icon-stroke-width: 1.75;
+    --icon-color: #14b8a6;
+
+    /* Transitions - Smooth with glow */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Glowing lift */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring - Teal glow */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+}

package/shells/typescript-shell/packages/client/src/themes/index.css

@@ -0,0 +1,11 @@
+/**
+ * Theme index - exports all built-in theme CSS files
+ *
+ * Each theme provides both light and dark modes via:
+ *   [data-theme="themename-light"] { ... }
+ *   [data-theme="themename-dark"] { ... }
+ */
+
+@import "./wireframe.css";
+@import "./minimalist.css";
+@import "./almadar.css";

package/shells/typescript-shell/packages/client/src/themes/minimalist.css

@@ -0,0 +1,193 @@
+/**
+ * Minimalist Theme
+ *
+ * Clean, subtle, refined. Uses soft shadows, thin borders,
+ * and gentle curves for a premium, modern feel.
+ * Elegant hover effects and smooth transitions.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="minimalist-light"] {
+    /* Shadows - Soft, layered */
+    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+    --shadow-lg:
+        0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    /* Border radius - Gentle curves */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width - Thin, delicate */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Subtle contrast with soft grays */
+    --color-primary: #18181b;
+    --color-primary-hover: #27272a;
+    --color-primary-foreground: #fafafa;
+
+    --color-secondary: #fafafa;
+    --color-secondary-hover: #f4f4f5;
+    --color-secondary-foreground: #18181b;
+
+    --color-accent: #18181b;
+    --color-accent-foreground: #fafafa;
+
+    --color-muted: #f4f4f5;
+    --color-muted-foreground: #71717a;
+
+    --color-background: #ffffff;
+    --color-foreground: #18181b;
+    --color-card: #ffffff;
+    --color-card-foreground: #18181b;
+    --color-surface: #f4f4f5;
+    --color-border: #e4e4e7;
+    --color-input: #d4d4d8;
+    --color-ring: #18181b;
+
+    /* 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 - Light, elegant */
+    --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.6;
+
+    /* Icon styling - Thin, refined */
+    --icon-stroke-width: 1.5;
+    --icon-color: currentColor;
+
+    /* Transitions - Smooth, elegant */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Subtle lift */
+    --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: #18181b;
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="minimalist-dark"] {
+    /* Shadows - Darker, more pronounced */
+    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-lg:
+        0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+    /* Border radius - Gentle curves */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width - Thin, delicate */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Dark mode inverted */
+    --color-primary: #fafafa;
+    --color-primary-hover: #e4e4e7;
+    --color-primary-foreground: #18181b;
+
+    --color-secondary: #27272a;
+    --color-secondary-hover: #3f3f46;
+    --color-secondary-foreground: #fafafa;
+
+    --color-accent: #fafafa;
+    --color-accent-foreground: #18181b;
+
+    --color-muted: #27272a;
+    --color-muted-foreground: #a1a1aa;
+
+    --color-background: #09090b;
+    --color-foreground: #fafafa;
+    --color-card: #18181b;
+    --color-card-foreground: #fafafa;
+    --color-surface: #27272a;
+    --color-border: #27272a;
+    --color-input: #3f3f46;
+    --color-ring: #fafafa;
+
+    /* 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.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.5;
+    --icon-color: currentColor;
+
+    /* Transitions */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --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: #fafafa;
+}

package/shells/typescript-shell/packages/client/src/themes/wireframe.css

@@ -0,0 +1,188 @@
+/**
+ * Wireframe Theme
+ *
+ * Sharp corners, thick borders, offset shadows.
+ * Classic blueprint/wireframe aesthetic with bold, tactile interactions.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="wireframe-light"] {
+    /* Shadows - Hard offset shadows (brutalist) */
+    --shadow-main: 4px 4px 0px 0px rgba(0, 0, 0, 1);
+    --shadow-sm: 2px 2px 0px 0px rgba(0, 0, 0, 1);
+    --shadow-lg: 6px 6px 0px 0px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1);
+    --shadow-none: none;
+    --shadow-hover: 6px 6px 0px 0px rgba(0, 0, 0, 1);
+    --shadow-active: 1px 1px 0px 0px rgba(0, 0, 0, 1);
+
+    /* Border radius - Sharp corners (brutalist) */
+    --radius-none: 0px;
+    --radius-sm: 0px;
+    --radius-md: 0px;
+    --radius-lg: 0px;
+    --radius-xl: 0px;
+    --radius-full: 9999px;
+
+    /* Border width - Thick, bold */
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+
+    /* Colors - High contrast black/white */
+    --color-primary: #000000;
+    --color-primary-hover: #333333;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #ffffff;
+    --color-secondary-hover: #f0f0f0;
+    --color-secondary-foreground: #000000;
+
+    --color-accent: #000000;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #f5f5f5;
+    --color-muted-foreground: #737373;
+
+    --color-background: #ffffff;
+    --color-foreground: #000000;
+    --color-card: #ffffff;
+    --color-card-foreground: #000000;
+    --color-surface: #f5f5f5;
+    --color-border: #000000;
+    --color-input: #000000;
+    --color-ring: #000000;
+
+    /* 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 - Bold, monospace-inspired */
+    --font-family: "Inter", "SF Mono", "Monaco", system-ui, sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0;
+    --line-height: 1.5;
+
+    /* Icon styling - Thick strokes */
+    --icon-stroke-width: 2.5;
+    --icon-color: currentColor;
+
+    /* Transitions - Snappy, mechanical */
+    --transition-fast: 50ms;
+    --transition-normal: 100ms;
+    --transition-slow: 200ms;
+    --transition-timing: linear;
+
+    /* Hover/Active transforms */
+    --hover-scale: 1;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 2px;
+    --active-scale: 0.98;
+    --active-translate-y: 2px;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #000000;
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="wireframe-dark"] {
+    /* Shadows - Inverted for dark */
+    --shadow-main: 4px 4px 0px 0px rgba(255, 255, 255, 0.8);
+    --shadow-sm: 2px 2px 0px 0px rgba(255, 255, 255, 0.8);
+    --shadow-lg: 6px 6px 0px 0px rgba(255, 255, 255, 0.8);
+    --shadow-inner: inset 2px 2px 0px 0px rgba(255, 255, 255, 0.1);
+    --shadow-none: none;
+    --shadow-hover: 6px 6px 0px 0px rgba(255, 255, 255, 0.8);
+    --shadow-active: 1px 1px 0px 0px rgba(255, 255, 255, 0.8);
+
+    /* Border radius - Sharp corners (brutalist) */
+    --radius-none: 0px;
+    --radius-sm: 0px;
+    --radius-md: 0px;
+    --radius-lg: 0px;
+    --radius-xl: 0px;
+    --radius-full: 9999px;
+
+    /* Border width - Thick, bold */
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+
+    /* Colors - Inverted high contrast */
+    --color-primary: #ffffff;
+    --color-primary-hover: #e5e5e5;
+    --color-primary-foreground: #000000;
+
+    --color-secondary: #1a1a1a;
+    --color-secondary-hover: #262626;
+    --color-secondary-foreground: #ffffff;
+
+    --color-accent: #ffffff;
+    --color-accent-foreground: #000000;
+
+    --color-muted: #262626;
+    --color-muted-foreground: #a3a3a3;
+
+    --color-background: #0a0a0a;
+    --color-foreground: #ffffff;
+    --color-card: #1a1a1a;
+    --color-card-foreground: #ffffff;
+    --color-surface: #262626;
+    --color-border: #ffffff;
+    --color-input: #ffffff;
+    --color-ring: #ffffff;
+
+    /* 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", "SF Mono", "Monaco", system-ui, sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0;
+    --line-height: 1.5;
+
+    /* Icon styling */
+    --icon-stroke-width: 2.5;
+    --icon-color: currentColor;
+
+    /* Transitions */
+    --transition-fast: 50ms;
+    --transition-normal: 100ms;
+    --transition-slow: 200ms;
+    --transition-timing: linear;
+
+    /* Hover/Active transforms */
+    --hover-scale: 1;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 2px;
+    --active-scale: 0.98;
+    --active-translate-y: 2px;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #ffffff;
+}