:root {
  --al-deep-navy: #0A1F33;
  --al-electric-blue: #2563EB;
  --al-teal: #14B8A6;
  --al-teal-dark: #0F8F87;
  --al-calm-green: #67C23A;
  --al-slate-gray: #64748B;
  --al-warm-white: #FAFAFC;
  --al-border: #D5E1E7;
  --al-text: #0A1F33;
  --al-surface: #FFFFFF;

  --al-font-heading: "Space Grotesk", "Aptos Display", "Arial", sans-serif;
  --al-font-body: "Manrope", "Aptos", "Arial", sans-serif;

  --al-radius-sm: 8px;
  --al-radius-md: 12px;
  --al-radius-lg: 16px;
  --al-radius-xl: 24px;

  --al-shadow-card: 0 8px 24px rgba(10, 31, 51, 0.10);
  --al-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.28);
}

.al-brand-primary { color: var(--al-deep-navy); }
.al-brand-accent { color: var(--al-teal-dark); }
.al-status-success { color: #2F7D1B; background: #ECF8E6; }
.al-button-primary {
  background: var(--al-electric-blue); color: #fff; border-radius: var(--al-radius-md);
}
.al-card {
  background: var(--al-surface); border: 1px solid var(--al-border);
  border-radius: var(--al-radius-lg); box-shadow: var(--al-shadow-card);
}