:root {
  --havio-navy: #12283a;
  --havio-navy-rgb: 18 40 58;
  --havio-blue: #2e86de;
  --havio-blue-rgb: 46 134 222;
  --havio-blue-dark: #0e3a5c;
  --havio-green: #2398aa;
  --havio-teal: #2398aa;
  --havio-text-soft: #5a6b7c;
  --havio-text-muted: #718194;
  --havio-text-faint: #9aa8af;
  --havio-border: #dce7f2;
  --havio-border-strong: #cfe0ef;
  --havio-surface: #ffffff;
  --havio-background: #fafcff;
  --havio-background-soft: #f4f8fc;
  --havio-blue-surface: #dceafd;
  --havio-green-surface: #e7f8fb;
  --havio-warning: #dfa32e;
  --havio-warning-surface: #fdf3da;
  --havio-indigo: #5b6ee8;
  --havio-indigo-surface: #dfe5fb;
  --havio-purple: #9b6ef0;
  --havio-purple-surface: #ece3fb;
  --havio-neutral-surface: #eef2f4;
  --havio-on-color: #ffffff;
  --havio-shadow-card:
    0 24px 60px -18px rgb(var(--havio-navy-rgb) / 16%), 0 4px 14px rgb(var(--havio-navy-rgb) / 5%);
  --havio-shadow-card-strong:
    0 24px 60px -18px rgb(var(--havio-navy-rgb) / 22%), 0 4px 14px rgb(var(--havio-navy-rgb) / 6%);
  --havio-shadow-card-soft:
    0 14px 34px -16px rgb(var(--havio-navy-rgb) / 16%), 0 2px 8px rgb(var(--havio-navy-rgb) / 5%);
  --havio-shadow-pill:
    0 10px 26px -10px rgb(var(--havio-navy-rgb) / 14%), 0 2px 6px rgb(var(--havio-navy-rgb) / 4%);
  --havio-shadow-action: 0 14px 32px -10px rgb(var(--havio-blue-rgb) / 32%);
  --havio-shadow-toast: 0 18px 44px -12px rgb(var(--havio-navy-rgb) / 30%);
}