:root {
  color-scheme: light;
  --nav-950: #07182b;
  --nav-900: #0b1f36;
  --nav-850: #102b48;
  --brand-700: #144fc4;
  --brand-600: #1f63e9;
  --brand-500: #2f76f6;
  --brand-100: #eaf2ff;
  --brand-50: #f4f8ff;
  --cyan-600: #078c9c;
  --cyan-500: #0aa7b6;
  --cyan-100: #dff7f8;
  --surface-app: #f3f6fa;
  --surface-muted: #f7f9fc;
  --surface-raised: #ffffff;
  --surface-inverse: #0b1f36;
  --border-soft: #e5eaf1;
  --border: #d6dee9;
  --border-strong: #c3cfdd;
  --text-strong: #142033;
  --text: #26364d;
  --text-muted: #67758a;
  --text-subtle: #8793a5;
  --success-700: #137044;
  --success-100: #dcf7e9;
  --warning-700: #9a5b00;
  --warning-100: #fff1ce;
  --danger-700: #b32932;
  --danger-100: #ffe4e6;
  --info-700: #1552b8;
  --info-100: #e4efff;
  --shadow-xs: 0 1px 2px rgba(15, 35, 62, .05);
  --shadow-sm: 0 5px 18px rgba(15, 35, 62, .07);
  --shadow-md: 0 14px 38px rgba(15, 35, 62, .11);
  --shadow-focus: 0 0 0 3px rgba(31, 99, 233, .2);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --control-height: 40px;
  --sidebar-width: 246px;
  --page-gutter: clamp(18px, 2.1vw, 34px);

  /* Compatibility aliases used by existing page styles. */
  --bg: var(--surface-app);
  --bg-soft: var(--surface-muted);
  --panel: var(--surface-raised);
  --panel-soft: var(--surface-muted);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --muted: var(--text-muted);
  --muted-strong: var(--text);
  --primary: var(--brand-600);
  --primary-strong: var(--brand-700);
  --primary-soft: var(--brand-100);
  --accent: var(--cyan-600);
  --accent-soft: var(--cyan-100);
  --danger: var(--danger-700);
  --danger-soft: var(--danger-100);
  --warn: var(--warning-700);
  --warn-soft: var(--warning-100);
  --ok: var(--success-700);
  --ok-soft: var(--success-100);
  --info: var(--info-700);
  --info-soft: var(--info-100);
  --sidebar: var(--nav-900);
  --sidebar-soft: var(--nav-850);
  --radius: var(--radius-md);
  --control-h: var(--control-height);
}

* {
  scrollbar-color: #aebbd0 transparent;
  scrollbar-width: thin;
}

::selection {
  background: #cfe0ff;
  color: var(--nav-950);
}