:root {
  --bg: #f7f6fd;
  --surface: #ffffff;
  --surface-2: #fbfbfe;
  --surface-3: #f6f7fb;
  --surface-4: #f1f3f9;
  --border: #e3e1f5;
  --border-inner: #e5e8ef;
  --border-divider: #eceef4;
  --text-1: #0b1020;
  --text-2: #42495a;
  --text-3: #686f84;
  --input-border: #8a91a3;

  --primary: #4c3fe0;
  --primary-hover: #3b30b8;
  --primary-tint: #eeecfd;

  --ok: #16a34a;
  --ok-text: #15803d;
  --ok-tint: #dcfce7;
  --soon: #b45309;
  --soon-tint: #fef3c7;

  --calliope: #7c5cff;
  --calliope-tint: #efeaff;
  --calliope-text: #6d4fe8;
  --campaigns: #e23d8f;
  --campaigns-tint: #fde8f3;
  --campaigns-text: #c52a79;
  --dash: #0891b2;
  --dash-tint: #e0f6fb;
  --dash-text: #0a7894;
  --bridge: #d97706;
  --bridge-tint: #fdf1dc;
  --bridge-text: #b35309;
  --portal: #4c3fe0;
  --portal-tint: #eeecfd;
  --portal-text: #4c3fe0;

  --font-display: Archivo, system-ui, sans-serif;
  --font-body: Archivo, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --r-window: 22px;
  --r-card: 20px;
  --r-panel: 26px;
  --r-ctl: 12px;
  --r-pill: 999px;
  --shadow-window: 0 40px 80px -48px rgba(40, 30, 120, 0.4), 0 2px 6px rgba(40, 30, 120, 0.05);
  --shadow-card: 0 10px 30px -24px rgba(40, 30, 120, 0.4);

  --glow-periwinkle: rgba(154, 156, 243, 0.45);
  --glow-sky: rgba(56, 189, 248, 0.22);
}