html:root {
  /* Detection-X CI colors */

  /* Primärfarbe: sehr dunkles Blau, #19244d */
  --primary: 227 51% 20%;
  --primary-foreground: 0 0% 100%;

  --brand: 227 51% 20%;
  --brand-dark: 227 51% 14%;
  --brand-light: 201 100% 71%;

  /* Sekundärfarbe: dunkelblau, #025d97 */
  --secondary: 203 97% 30%;
  --secondary-foreground: 0 0% 100%;

  --accent: 203 97% 30%;
  --accent-foreground: 0 0% 100%;

  /* Tertiärfarbe: hellblau, #00b9fe */
  --ring: 196 100% 50%;

  /* Quartärfarbe: sehr helles Blau, #6bceff */
  --tree-node-hover: 201 100% 71%;

  /* Neutral surfaces */
  --background: 210 33% 98%;
  --foreground: 227 51% 20%;

  --card: 0 0% 100%;
  --card-foreground: 227 51% 20%;

  --popover: 0 0% 100%;
  --popover-foreground: 227 51% 20%;

  --surface: 0 0% 100%;
  --surface-alt: 204 100% 96%;
  --surface-border: 203 35% 84%;

  --border: 203 35% 84%;
  --input: 203 35% 84%;

  --interface-text: 227 51% 20%;
  --muted: 203 18% 42%;
  --muted-foreground: 203 18% 42%;

  --tooltip: 204 100% 96%;
  --tooltip-border: 201 100% 71%;

  --markdown-toolbar: 204 100% 96%;
  --markdown-toolbar-border: 203 35% 84%;
  --markdown-toolbar-text: 227 51% 20%;

  --table-header-bg: 204 100% 96%;
  --table-header-border: 203 35% 84%;

  --headline-anchor-icon: 203 35% 55%;
  --headline-anchor-icon-hover: 203 97% 30%;

  --avatar-bg: 201 100% 71%;
  --avatar-foreground: 227 51% 20%;

  --scrollbar-thumb: 203 35% 70%;
  --scrollbar-thumb-hover: 196 100% 50%;
}

html.dark {
  /* Detection-X dark mode */

  --primary: 196 100% 50%;
  --primary-foreground: 227 51% 12%;

  --brand: 196 100% 50%;
  --brand-dark: 203 97% 30%;
  --brand-light: 201 100% 71%;

  --secondary: 227 51% 18%;
  --secondary-foreground: 204 100% 93%;

  --accent: 203 97% 30%;
  --accent-foreground: 0 0% 100%;

  --ring: 196 100% 50%;

  --background: 227 51% 10%;
  --foreground: 204 100% 93%;

  --card: 227 51% 13%;
  --card-foreground: 204 100% 93%;

  --popover: 227 51% 13%;
  --popover-foreground: 204 100% 93%;

  --surface: 227 51% 13%;
  --surface-alt: 227 48% 17%;
  --surface-border: 227 35% 28%;

  --border: 227 35% 28%;
  --input: 227 35% 28%;

  --interface-text: 204 100% 93%;
  --muted: 203 25% 70%;
  --muted-foreground: 203 25% 70%;

  --tooltip: 227 48% 17%;
  --tooltip-border: 203 97% 30%;

  --markdown-toolbar: 227 48% 17%;
  --markdown-toolbar-border: 227 35% 28%;
  --markdown-toolbar-text: 204 100% 93%;

  --table-header-bg: 227 48% 17%;
  --table-header-border: 227 35% 28%;

  --headline-anchor-icon: 203 35% 60%;
  --headline-anchor-icon-hover: 196 100% 50%;

  --avatar-bg: 203 97% 30%;
  --avatar-foreground: 0 0% 100%;

  --tree-node-hover: 227 48% 17%;

  --scrollbar-thumb: 227 35% 35%;
  --scrollbar-thumb-hover: 196 100% 50%;
}