:root{
  --drip-blue:#313b8c;
  --drip-blue-dark:#1a1f4e;
  --drip-blue-mid:#4a57b8;
  --drip-blue-light:#e8eaf5;
  --drip-blue-faint:#f0f1fa;
  --drip-cream:#f9edd4;
  --drip-cream-mid:#f9f5ec;
  --drip-white:#ffffff;
  --drip-red:#b03025;
  --border-subtle:rgba(49,59,140,0.12);

  --color-primary:var(--drip-blue);
  --color-primary-hover:var(--drip-blue-mid);
  --color-primary-dark:var(--drip-blue-dark);
  --color-accent:var(--drip-red);

  --text-body:var(--drip-blue-dark);
  --text-soft:#4a5070;
  --text-muted:#8892b0;
  --text-on-dark:var(--drip-white);
  --text-on-dark-muted:rgba(255,255,255,.55);

  --surface-page:var(--drip-cream-mid);
  --surface-card:var(--drip-white);
  --surface-hero:var(--drip-blue);
  --surface-warm:var(--drip-cream);
  --surface-tint:var(--drip-blue-light);

  --border-color:var(--border-subtle);
}