/* 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;
}