/* =========================================
   Design Tokens (CSS Variables)
   ========================================= */

/* ===== Light Theme (default) ===== */
:root, [data-theme="light"] {
    --primary: #1a73e8;
    --primary-dark: #1557b0;
    --primary-light: rgba(26, 115, 232, 0.1);
    --danger: #dc3545;
    --danger-bg: #fff5f5;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #f59e0b;
    --muted: #6c757d;
    --border: #dee2e6;
    --bg: #f8f9fa;
    --bg-card: #ffffff;
    --bg-hover: #e9ecef;
    --hover-overlay: rgba(0, 0, 0, 0.03);
    --text: #212529;
    --text-muted: #6c757d;
    --input-bg: #ffffff;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color-scheme: light;

    /* Type Scale */
    --fs-hero: 2rem;
    --fs-h1: 1.25rem;
    --fs-h2: 1rem;
    --fs-body: 0.8125rem;
    --fs-body-sm: 0.75rem;
    --fs-caption: 0.6875rem;
    --fs-micro: 0.625rem;

    /* Spacing Scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
    --primary: #4da3ff;
    --primary-dark: #2b8bff;
    --primary-light: rgba(77, 163, 255, 0.15);
    --danger: #ff6b7a;
    --danger-bg: #2d1f1f;
    --success: #4ade80;
    --info: #22d3ee;
    --warning: #fbbf24;
    --muted: #9ca3af;
    --border: #374151;
    --bg: #111827;
    --bg-card: #1f2937;
    --bg-hover: #374151;
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --text: #f3f4f6;
    --text-muted: #9ca3af;
    --input-bg: #374151;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}