/**
 * variables.css
 * CSS custom properties for light and dark themes.
 * Design tokens for colors, typography, spacing, radii, shadows, and transitions.
 */

:root {
    /* Light theme (default) */
    --color-primary: #6B46C1;
    --color-primary-hover: #553C9A;
    --color-secondary: #ED64A6;
    --color-success: #38A169;
    --color-danger: #E53E3E;
    --color-warning: #DD6B20;
    --color-info: #3182CE;

    --color-bg: #FFFFFF;
    --color-bg-secondary: #F7FAFC;
    --color-bg-tertiary: #EDF2F7;
    --color-text: #1A202C;
    --color-text-secondary: #4A5568;
    --color-text-muted: #A0AEC0;
    --color-border: #E2E8F0;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

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

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

[data-theme="dark"] {
    --color-bg: #1A202C;
    --color-bg-secondary: #2D3748;
    --color-bg-tertiary: #4A5568;
    --color-text: #F7FAFC;
    --color-text-secondary: #CBD5E0;
    --color-text-muted: #718096;
    --color-border: #4A5568;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}