:root {
  color-scheme: light dark;
  --half: 8px;
  --one: 16px;
  --two: 32px;
  --three: 48px;
  --sidebar-collapsed-width: 56px;
  --primary-color: #d50032;
  --primary-color-dark: #900732;
  --primary-color-rgb: 213, 0, 50;
  --page-bg: light-dark(#f5f5f5, #333);
  --tile-bg: light-dark(#fff, #444);
  --code-bg: light-dark(#f8f8f8, #000);
  --text-color: light-dark(#333, #f5f5f5);
  --muted-text: light-dark(#666, #999);
  --border-color: light-dark(#bbb, #777);
  --button-bg: light-dark(#f5f5f5, #555);
  --button-bg-hover: light-dark(#eaeaea, #666);
  --button-text: light-dark(#333, #fff);
  --debug-bg: light-dark(#f8f8f8, #222);
  --accent-color: #499ABB;
  --accent-color-rgb: 73, 154, 187;
  --accent-color-light: #AAD3F5;
  --accent-color-dark: #4B666E;
  --success-color: #5FC871;
  --warning-color: #FFFF66;
  --ppt-color: #ff9800;
  --error-color: #FF3333;
  --info-color: #499ABB;
  --tile-elevation-1: light-dark(#fff, #444);
  --tile-elevation-2: light-dark(#fafafa, #555);
  --tile-elevation-3: light-dark(#f5f5f5, #666);
  --focus-ring: rgba(var(--primary-color-rgb, 213, 0, 50), 0.35);
}

body[color-scheme="light"] {
  color-scheme: light;
  --info-color: var(--primary-color);
}

body[color-scheme="dark"] {
  color-scheme: dark;
  --primary-color: #d50032;
  --primary-color-dark: #900732;
  --primary-color-rgb: 213, 0, 50;
  --page-bg: #1A2129;
  --tile-bg: #242B33;
  --code-bg: #0F141A;
  --text-color: #EAECEF;
  --muted-text: #A9B0B8;
  --border-color: #2F3A42;
  --button-bg: #2B333C;
  --button-bg-hover: #364049;
  --button-text: #EAECEF;
  --accent-color: #499ABB;
  --accent-color-light: #AAD3F5;
  --accent-color-dark: #4B666E;
  --success-color: #5FC871;
  --warning-color: #FFFF66;
  --ppt-color: #ff9800;
  --error-color: #FF3333;
  --info-color: #499ABB;
  --tile-elevation-1: #242B33;
  --tile-elevation-2: #2B333C;
  --tile-elevation-3: #333C46;
  --focus-ring: rgba(213, 0, 50, 0.35);
}