:root {
  color-scheme: dark;
  --color-background: #0d1117;
  --color-navigation: #111821;
  --color-surface-low: #121922;
  --color-surface: #17202b;
  --color-surface-container: #1c2734;
  --color-surface-high: #233140;
  --color-input: #111923;
  --color-code: #090e14;
  --color-divider: #2b3a49;
  --color-border-strong: #405365;
  --color-text: #eef4f9;
  --color-text-secondary: #becbd6;
  --color-text-muted: #8799aa;
  --color-primary: #62d4e6;
  --color-primary-strong: #168fac;
  --color-primary-container: #163b48;
  --color-on-primary: #051114;
  --color-secondary: #72d3a0;
  --color-secondary-container: #183c2b;
  --color-info: #72aef8;
  --color-success: #62d991;
  --color-warning: #f1bd62;
  --color-error: #ff858b;
  --color-online: var(--color-success);
  --color-offline: var(--color-error);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --table-row: 52px;
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --easing-standard: cubic-bezier(.2, 0, 0, 1);
  --elevation-1: 0 1px 2px rgb(0 0 0 / 18%);
  --elevation-2: 0 10px 30px rgb(0 0 0 / 22%);
  --breakpoint-mobile: 680px;
  --breakpoint-tablet: 1024px;
  --shell-topbar: 64px;
  --shell-sidebar: 264px;
  --shell-sidebar-collapsed: 76px;
}

html[data-theme="light"] {
  color-scheme: light;
  --color-background: #f4f7f9;
  --color-navigation: #ffffff;
  --color-surface-low: #edf2f5;
  --color-surface: #ffffff;
  --color-surface-container: #f4f7f9;
  --color-surface-high: #e5edf2;
  --color-input: #ffffff;
  --color-code: #eaf0f4;
  --color-divider: #ccd7df;
  --color-border-strong: #91a5b5;
  --color-text: #17232e;
  --color-text-secondary: #405565;
  --color-text-muted: #607485;
  --color-primary: #087d98;
  --color-primary-strong: #087d98;
  --color-primary-container: #d7f0f5;
  --color-on-primary: #f8fdff;
  --color-secondary: #207b4a;
  --color-secondary-container: #d9f1e3;
  --color-info: #246aa9;
  --color-success: #197a47;
  --color-warning: #956000;
  --color-error: #bd3944;
  --elevation-1: 0 1px 2px rgb(28 48 66 / 10%);
  --elevation-2: 0 12px 32px rgb(28 48 66 / 14%);
}