/* Global Design System - CSS Variables */
:root {
    /* Dynamic Palette - "Deep Focus" */
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-primary: #BB86FC;
    /* Soft Purple */
    --color-secondary: #03DAC6;
    /* Teal */
    --color-accent: #CF6679;
    /* Muted Red */
    --color-text-main: #E1E1E1;
    --color-text-sub: #A0A0A0;

    /* Typography */
    --font-family-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-mono: 'JetBrains Mono', monospace;

    /* Spacing & Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --spacing-unit: 8px;

    /* Animation */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="light"] {
    --color-bg: #F5F5F5;
    --color-surface: #FFFFFF;
    --color-primary: #6200EE;
    /* Deep Purple */
    --color-secondary: #03DAC6;
    /* Teal - keeps well */
    --color-accent: #B00020;
    /* Error Red */
    --color-text-main: #121212;
    --color-text-sub: #5F5F5F;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    transition: background-color var(--transition-normal), color var(--transition-normal);
    font-family: var(--font-family-main);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Common Components */
.btn-primary {
    background: var(--color-primary);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.btn-primary:active {
    transform: scale(0.96);
}