:root {
  color-scheme: light;
  --region-canvas: #f6f8fb;
  --region-surface: #ffffff;
  --region-surface-muted: #f8fafc;
  --region-surface-active: #eef4ff;
  --region-border: #d8dee8;
  --region-border-strong: #7f8b9d;
  --region-ink: #101828;
  --region-secondary: #475467;
  --region-muted: #667085;
  --region-brand: #07245e;
  --region-brand-hover: #0b327a;
  --region-action: #3371dc;
  --region-accent: #bedf87;
  --region-danger: #912018;
  --region-danger-bg: #fff4f2;
  --region-success: #22603a;
  --region-success-bg: #f1faf4;
  --region-warning: #7a4d00;
  --region-warning-bg: #fff7ed;
  --region-focus: #3371dc;
  --region-overlay: rgb(7 36 94 / 44%);
  --region-on-brand: #ffffff;
  --region-skeleton: #eef2f7;
  --region-skeleton-highlight: #f8fafc;
}

:root[data-region-theme="dark"],
:root.dark {
  color-scheme: dark;
  --region-canvas: #08111f;
  --region-surface: #101a2a;
  --region-surface-muted: #0b1422;
  --region-surface-active: #172740;
  --region-border: #26374d;
  --region-border-strong: #52647c;
  --region-ink: #eef3fa;
  --region-secondary: #c5cfdd;
  --region-muted: #97a5b8;
  --region-brand: #17478e;
  --region-brand-hover: #2057aa;
  --region-action: #82adfb;
  --region-accent: #bedf87;
  --region-danger: #ff9a90;
  --region-danger-bg: #391a1b;
  --region-success: #91d3a6;
  --region-success-bg: #13291d;
  --region-warning: #f3c776;
  --region-warning-bg: #332713;
  --region-focus: #82adfb;
  --region-overlay: rgb(2 8 20 / 72%);
  --region-on-brand: #ffffff;
  --region-skeleton: #172132;
  --region-skeleton-highlight: #22314a;
}