/* CSS Custom Properties */
:root {
    /* Colors */
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #0f0f0f;
    --color-bg-tertiary: rgba(20, 20, 20, 0.9);
    --color-text-primary: #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-text-tertiary: #aaa;
    --color-text-muted: #888;
    --color-text-disabled: #666;

    /* Brand Colors */
    --color-brand-primary: #ff6b35;
    --color-brand-secondary: #ffa500;
    --color-brand-tertiary: #ff8c42;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #ff6b35, #ffa500);
    --gradient-text: linear-gradient(135deg, #ffffff, #a0a0a0);

    /* Border Colors */
    --color-border-primary: rgba(255, 255, 255, 0.1);
    --color-border-focus: rgba(255, 107, 53, 0.5);
    --color-border-error: rgba(255, 107, 53, 0.3);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 16px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
}