:root {
  --cf-bg: #f5f8ff;
  --cf-bg-2: #eaf0ff;
  --cf-surface: #ffffff;
  --cf-surface-2: #f7f9fe;
  --cf-ink: #0b1533;
  --cf-ink-soft: #4f5d78;
  --cf-ink-mute: #66728a;
  --cf-line: #e3e9f5;
  --cf-line-strong: #c9d3e6;
  --cf-primary: #1660f5;
  --cf-primary-hover: #0b4bd1;
  --cf-primary-soft: #e8f0ff;
  --cf-on-primary: #ffffff;
  --cf-link: #1257e0;
  --cf-ring: #1660f5;
  --cf-error: #c4262e;
  --cf-error-soft: #fdecee;
  --cf-foot-bg: #0b1533;
  --cf-foot-ink: #e7ecf8;
  --cf-foot-soft: #aab6d0;
  --cf-shadow: 11 21 51;
  --cf-band-1: #6aa6f8;
  --cf-band-2: #2fb57e;
  --cf-band-3: #f2bd2c;
  --cf-band-4: #f28c38;
  --cf-band-5: #e5534b;
  --cf-band-6: #b4304d;
  --cf-series-0: #1660f5;
  --cf-series-1: #8fb4ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cf-bg: #0a1022;
    --cf-bg-2: #0f1730;
    --cf-surface: #121b33;
    --cf-surface-2: #18223d;
    --cf-ink: #e8edf9;
    --cf-ink-soft: #a9b5cd;
    --cf-ink-mute: #8f9bb5;
    --cf-line: #243050;
    --cf-line-strong: #344267;
    --cf-primary: #2f6bf0;
    --cf-primary-hover: #4a7ff5;
    --cf-primary-soft: #1a2a52;
    --cf-on-primary: #ffffff;
    --cf-link: #8fb2ff;
    --cf-ring: #8fb2ff;
    --cf-error: #ff8f8f;
    --cf-error-soft: #3a1a22;
    --cf-foot-bg: #070c1a;
    --cf-foot-ink: #e7ecf8;
    --cf-foot-soft: #9eabc6;
    --cf-shadow: 0 0 0;
    --cf-band-1: #5f9cf0;
    --cf-band-2: #2aa673;
    --cf-band-3: #e0ad25;
    --cf-band-4: #e37f30;
    --cf-band-5: #d9524a;
    --cf-band-6: #b23a55;
    --cf-series-0: #5b8cff;
    --cf-series-1: #a5c2ff;
  }
}