/* Design System - Design Tokens */
:root {
    /* Radius */
    --radius: 14px;

    /* Border */
    --border: #E6EAF0;

    /* Shadow */
    --shadow: 0 8px 24px rgba(16, 24, 40, 0.06);

    /* Spacing Scale */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
}

/* Apply design tokens to components */
.card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.btn {
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.badge {
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* Focus states for accessibility - WCAG AA compliant */
:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
    border-radius: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
}