@almadar/cli 1.0.6 → 1.0.8

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

@@ -1,126 +0,0 @@
-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

@@ -1,196 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-/**
- * 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

@@ -1,193 +0,0 @@
-/**
- * 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

@@ -1,188 +0,0 @@
-/**
- * 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;
-}