/* Design Tokens */
:root {
    /* Colors: Dark Base */
    --bg-body: #0a0a0c;
    --bg-surface: rgba(255, 255, 255, 0.04);
    --bg-surface-hover: rgba(255, 255, 255, 0.08);
    --bg-glass: rgba(10, 10, 12, 0.7);

    /* Colors: Accents */
    --accent-primary: #00e5ff;
    /* Cyan */
    --accent-secondary: #bd00ff;
    /* Electric Violet */
    --accent-success: #00ff9d;
    --accent-warning: #ffb800;
    --accent-error: #ff3d3d;

    /* Colors: Text */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.4);
    --text-on-accent: #000000;

    /* Colors: Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-focus: rgba(255, 255, 255, 0.2);

    /* Typography */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --container-width: 1200px;
    --header-height: 72px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Effects */
    --blur-glass: 12px;
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(0, 229, 255, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Light Theme */
[data-theme="light"] {
    /* Colors: Light Base */
    --bg-body: #f0f2f5;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f8f9fa;
    --bg-glass: rgba(255, 255, 255, 0.85);

    /* Colors: Accents (Adjusted for Light) */
    --accent-primary: #007bff;
    /* Brighter Blue */
    --accent-secondary: #6f42c1;
    /* Deep Purple */
    --accent-success: #198754;
    --accent-warning: #ffc107;
    --accent-error: #dc3545;

    /* Colors: Text */
    --text-primary: #1a1a1a;
    --text-secondary: #4a5568;
    --text-tertiary: #a0aec0;
    --text-on-accent: #ffffff;

    /* Colors: Borders */
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-focus: rgba(0, 123, 255, 0.3);

    /* Effects */
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 15px rgba(0, 123, 255, 0.2);
}