:root {
  --cf-slate: #282d38;
  --cf-teal: #1b3b4a;
  --cf-navy: #314766;
  --cf-gold: #efbc16;
  --cf-gold-pressed: #d9a90f;
  --cf-gold-soft: #fbf1cf;
  --cf-blue: #4479c1;
  --cf-error: #ba130c;

  --cf-primary: var(--cf-gold);
  --cf-primary-pressed: var(--cf-gold-pressed);
  --cf-on-primary: var(--cf-slate);
  --cf-primary-soft: var(--cf-gold-soft);
  --cf-on-primary-soft: var(--cf-slate);
  --cf-accent: var(--cf-gold);
  --cf-on-accent: var(--cf-slate);
  --cf-control: var(--cf-slate);
  --cf-tab-active: var(--cf-text);
  --cf-focus-ring: var(--cf-blue);
  --cf-focus-ring-on-header: var(--cf-gold);
  --cf-notice: var(--cf-gold);
  --cf-on-notice: var(--cf-slate);
  --cf-notice-action: var(--cf-slate);
  --cf-on-notice-action: #ffffff;
  --cf-header: var(--cf-slate);
  --cf-on-header: #ffffff;
  --cf-feature: var(--cf-navy);
  --cf-on-feature: #ffffff;
  --cf-feature-divider: rgba(255, 255, 255, 0.15);
  --cf-link: var(--cf-blue);
  --cf-bg: #f2f2f2;
  --cf-surface: #ffffff;
  --cf-text: var(--cf-slate);
  --cf-muted: #5f6470;
  --cf-border: #eaeaeb;
  --cf-danger: var(--cf-error);
  --cf-danger-soft: #fbe9e8;
  --cf-success: #368a55;
  --cf-overlay: rgba(40, 45, 56, 0.6);
  --cf-radius: 10px;
  --cf-radius-sm: 8px;
  --cf-font: "Rubik", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cf-font-heading: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --cf-primary-soft: #3a3418;
  --cf-on-primary-soft: #f7e3a1;
  --cf-control: var(--cf-gold);
  --cf-tab-active: var(--cf-gold);
  --cf-header: #1b1f27;
  --cf-feature: #26364f;
  --cf-link: #8fb2e6;
  --cf-bg: #15181e;
  --cf-surface: #20242d;
  --cf-text: #eceef2;
  --cf-muted: #a4a9b4;
  --cf-border: #333845;
  --cf-danger: #f2a19c;
  --cf-danger-soft: #3d1d1b;
  --cf-success: #8fd1a5;
  --cf-overlay: rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}