:root {
  color-scheme: light;
  --brand-navy: #17233d;
  --brand-blue: #1069ea;
  --brand-blue-light: #6ba4ef;
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-hover: #eef3fa;
  --text: #17233d;
  --text-2: #526178;
  --text-3: #7f8ca0;
  --separator: #dce3ed;
  --separator-strong: #bbc7d7;
  --accent: #1069ea;
  --accent-hover: #0b5bd0;
  --accent-soft: #eaf2ff;
  --success: #16794a;
  --success-soft: #edf8f2;
  --warning: #8a5a00;
  --warning-soft: #fff7e8;
  --danger: #b42318;
  --danger-soft: #fff0ef;
  --challenge: #c63b32;
  --challenge-hover: #aa3029;
  --challenge-soft: #fff2f0;
  --steady: #616975;
  --steady-hover: #505862;
  --steady-soft: #f1f2f4;
  --focus: #2e7ff0;
  --shadow-popover: 0 12px 38px rgba(0,0,0,.12);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --sidebar: 236px;
  --content: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #0d1422;
    --surface: #151e2d;
    --surface-2: #1b2637;
    --surface-hover: #223149;
    --text: #f5f8fc;
    --text-2: #c3cede;
    --text-3: #8f9db1;
    --separator: #2b3a50;
    --separator-strong: #42546f;
    --accent: #4b93ff;
    --accent-hover: #6aa7ff;
    --accent-soft: #132c50;
    --success: #6bd69d;
    --success-soft: #172b21;
    --warning: #f5bd63;
    --warning-soft: #312717;
    --danger: #ff8d86;
    --danger-soft: #321a19;
    --challenge: #ff8178;
    --challenge-hover: #ff9b94;
    --challenge-soft: #321d1c;
    --steady: #a7adb8;
    --steady-hover: #c0c5ce;
    --steady-soft: #25272b;
    --focus: #70adff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1422;
  --surface: #151e2d;
  --surface-2: #1b2637;
  --surface-hover: #223149;
  --text: #f5f8fc;
  --text-2: #c3cede;
  --text-3: #8f9db1;
  --separator: #2b3a50;
  --separator-strong: #42546f;
  --accent: #4b93ff;
  --accent-hover: #6aa7ff;
  --accent-soft: #132c50;
  --success: #6bd69d;
  --success-soft: #172b21;
  --warning: #f5bd63;
  --warning-soft: #312717;
  --danger: #ff8d86;
  --danger-soft: #321a19;
  --challenge: #ff8178;
  --challenge-hover: #ff9b94;
  --challenge-soft: #321d1c;
  --steady: #a7adb8;
  --steady-hover: #c0c5ce;
  --steady-soft: #25272b;
  --focus: #70adff;
}