/* ==================== */
/* Design System Tokens */
/* ==================== */
:root {
    /* Primary Palette */
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-dark: #3730a3;
    --color-primary-light: #6366f1;
    --color-primary-bg: #eef2ff;
    --color-primary-bg-hover: rgba(79, 70, 229, 0.08);
    --color-primary-ring: rgba(79, 70, 229, 0.1);
    --color-primary-border: rgba(79, 70, 229, 0.15);
    --color-primary-shadow: rgba(79, 70, 229, 0.3);

    /* Neutrals */
    --color-text: #1a1a1a;
    --color-text-secondary: #374151;
    --color-text-muted: #6b7280;
    --color-text-faint: #9ca3af;
    --color-bg: #ffffff;
    --color-bg-canvas: #eef0f4;
    --color-bg-subtle: #f9fafb;
    --color-bg-muted: #f3f4f6;
    --color-bg-sidebar: #f4f5f7;
    --color-border: rgba(0, 0, 0, 0.06);
    --color-border-medium: rgba(0, 0, 0, 0.1);
    --color-border-strong: #d1d5db;

    /* Status Colors */
    --color-success: #059669;
    --color-success-bg: #ecfdf5;
    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;
    --color-error: #dc2626;
    --color-error-bg: #fef2f2;

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

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.18);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-primary: 0 4px 12px rgba(79, 70, 229, 0.3);

    /* Spacing (reference) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Transitions */
    --ease-default: 0.2s ease;
    --ease-spring: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}