:root {
    --color-primary: #004aad;
    --color-primary-hover: #00337a;
    --color-primary-light: #e0f2fe;
    --color-secondary: #d97706;
    --color-secondary-hover: #b45309;
    --color-secondary-light: #fffbeb;
    --color-success: #047857;
    --color-success-hover: #065f46;
    --color-success-light: #ecfdf5;
    --color-error: #b91c1c;
    --color-error-light: #fef2f2;
    --color-warning: #92400e;
    --color-warning-light: #fef3c7;
    --color-text: #1f2937;
    --color-text-muted: #4b5563;
    --color-background: #ffffff;
    --color-surface: #f9fafb;
    --color-surface-subtle: #e6f7ff;
    --color-border: #d1d5db;
    --color-border-strong: #9ca3af;
    --color-focus-ring: #3b82f6;
    --color-overlay: rgba(17, 24, 39, 0.75);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --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;
    --font-size-4xl: 2.25rem;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    --shadow-card: 0 10px 0 rgba(0, 0, 0, 0.1);
    --shadow-button: 0 6px 0 rgba(0, 0, 0, 0.18);
    --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.35);
}