:root {
  --grey-0: #ffffff;
  --grey-50: #f7f8fa;
  --grey-100: #eceef1;
  --grey-200: #dde1e6;
  --grey-300: #c2c8d0;
  --grey-400: #9aa2ad;
  --grey-500: #717883;
  --grey-600: #565d68;
  --grey-700: #3d434d;
  --grey-800: #262b33;
  --grey-900: #16181c;

  --accent-h: 231;
  --accent: hsl(231 80% 60%);
  --accent-strong: hsl(231 80% 52%);
  --accent-soft: hsl(231 80% 95%);
  --accent-contrast: #ffffff;

  --success: #1a9e6b;
  --success-soft: #e4f7ee;
  --warn: #b5750a;
  --warn-soft: #fdf1dd;
  --danger: #d33a3a;
  --danger-soft: #fceaea;

  --bg: var(--grey-50);
  --surface: var(--grey-0);
  --surface-raised: var(--grey-0);
  --surface-muted: var(--grey-100);
  --surface-hover: var(--grey-100);
  --border: var(--grey-200);
  --text: var(--grey-900);
  --text-muted: var(--grey-500);
  --text-faint: var(--grey-400);
  --overlay: rgba(20, 22, 26, 0.45);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 22, 26, 0.08), 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 22, 26, 0.14), 0 2px 6px rgba(20, 22, 26, 0.08);

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

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14.5px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 30px;

  --sidebar-w: 232px;
  --topbar-h: 56px;
  --duration-fast: 120ms;
  --duration-med: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--grey-900);
    --surface: var(--grey-800);
    --surface-raised: #2c313a;
    --surface-muted: #323842;
    --surface-hover: #383e48;
    --border: var(--grey-700);
    --text: var(--grey-50);
    --text-muted: var(--grey-400);
    --text-faint: var(--grey-600);
    --overlay: rgba(0, 0, 0, 0.6);
    --accent-soft: hsl(231 45% 20%);
    --success-soft: #10301f;
    --warn-soft: #362a10;
    --danger-soft: #3a1414;
  }
}

:root[data-theme="dark"] {
  --bg: var(--grey-900);
  --surface: var(--grey-800);
  --surface-raised: #2c313a;
  --surface-muted: #323842;
  --surface-hover: #383e48;
  --border: var(--grey-700);
  --text: var(--grey-50);
  --text-muted: var(--grey-400);
  --text-faint: var(--grey-600);
  --overlay: rgba(0, 0, 0, 0.6);
  --accent-soft: hsl(231 45% 20%);
  --success-soft: #10301f;
  --warn-soft: #362a10;
  --danger-soft: #3a1414;
}