:root {
  --alo-brand-navy: #071B44;
  --alo-brand-deep: #082E73;
  --alo-brand-blue: #0758C9;
  --alo-brand-blue-hover: #06469E;
  --alo-brand-sky: #159DF0;
  --alo-brand-teal: #04C69D;
  --alo-brand-teal-ink: #006A55;

  --alo-canvas: #F6F8FC;
  --alo-surface: #FFFFFF;
  --alo-surface-alt: #EEF3F9;
  --alo-ink: #17243C;
  --alo-muted: #5B6D86;
  --alo-border: #D7E0EB;

  --alo-critical-bg: #FDEBE9;
  --alo-critical-ink: #B42318;
  --alo-new-bg: #EAF2FF;
  --alo-new-ink: #0758C9;
  --alo-progress-bg: #F2EEFF;
  --alo-progress-ink: #5B3DB5;
  --alo-waiting-bg: #FFF4DB;
  --alo-waiting-ink: #935500;
  --alo-resolved-bg: #E7F6ED;
  --alo-resolved-ink: #126E44;
  --alo-closed-bg: #EEF1F5;
  --alo-closed-ink: #526175;

  --alo-font-ui: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --alo-font-heading: Manrope, Inter, system-ui, Arial, sans-serif;

  --alo-radius-sm: 8px;
  --alo-radius-md: 12px;
  --alo-radius-lg: 16px;
  --alo-radius-xl: 20px;

  --alo-space-1: 4px;
  --alo-space-2: 8px;
  --alo-space-3: 12px;
  --alo-space-4: 16px;
  --alo-space-5: 20px;
  --alo-space-6: 24px;
  --alo-space-8: 32px;

  --alo-shadow-card: 0 3px 16px rgba(7, 27, 68, 0.05);
  --alo-focus-ring: 0 0 0 3px rgba(7, 88, 201, 0.22);
}

/* Core examples: */
.alo-page { background: var(--alo-canvas); color: var(--alo-ink); font-family: var(--alo-font-ui); }
.alo-card { background: var(--alo-surface); border: 1px solid var(--alo-border); border-radius: var(--alo-radius-lg); box-shadow: var(--alo-shadow-card); }
.alo-button-primary { background: var(--alo-brand-blue); color: #fff; border: 0; border-radius: var(--alo-radius-md); min-height: 44px; }
.alo-button-primary:hover { background: var(--alo-brand-blue-hover); }
.alo-button-primary:focus-visible { outline: 2px solid var(--alo-brand-blue); outline-offset: 2px; }