@font-face {
  font-family: CloudSans;
  src: url('../assets/fonts/NotoSansSC.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --font-body: CloudSans, sans-serif;
  --font-number: CloudSans, sans-serif;
  --color-bg: #f3f7fc;
  --color-surface: #ffffff;
  --color-surface-hover: #f8faff;
  --color-glass: #ffffffd9;
  --color-text: #23344d;
  --color-muted: #66758b;
  --color-border: #e3eaf4;
  --color-primary: #2868df;
  --color-on-primary: #ffffff;
  --color-soft: #edf4ff;
  --color-accent: #58c7d2;
  --color-success: #16825f;
  --color-warning: #966217;
  --color-danger: #ca4457;
  --color-disabled: #9aa8ba;
  --color-chart-track: #e8eff9;
  --color-highlight: #f0f7ff;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius: 16px;
  --radius-small: 10px;
  --shadow: 0 4px 24px #315c9b05;
  --shadow-raised: 0 16px 44px #315c9b12;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
[data-theme=dark] {
  color-scheme: dark;
  --color-bg: #101b2b;
  --color-surface: #19273a;
  --color-surface-hover: #21324b;
  --color-glass: #19273ae8;
  --color-text: #e4edfc;
  --color-muted: #a3b4cc;
  --color-border: #2b3b53;
  --color-primary: #8db8ff;
  --color-on-primary: #132b50;
  --color-soft: #243b5d;
  --color-accent: #72d4df;
  --color-success: #7adbb7;
  --color-warning: #eec785;
  --color-danger: #ff9aa9;
  --color-disabled: #6d819f;
  --color-chart-track: #293c59;
  --color-highlight: #1a2d46;
  --shadow: 0 4px 24px #0000000a;
  --shadow-raised: 0 16px 44px #00000030;
}