:root {
  color-scheme: light dark;

  /* === Surfaces ============================================ */
  --color-bg-light: oklch(0.98 0.01 100);
  --color-bg-dark: oklch(0.14 0.02 260);
  --color-bg: light-dark(var(--color-bg-light), var(--color-bg-dark));

  /* === Text ================================================ */
  --color-text-primary-light: oklch(0.25 0.02 260);
  --color-text-primary-dark: oklch(0.92 0.01 260);
  --color-text-primary: light-dark(var(--color-text-primary-light), var(--color-text-primary-dark));

  --color-highlight-light: oklch(97.088% 0.18378 109.401);
  --color-highlight-dark: oklch(50.752% 0.1106 109.783);
  --color-highlight: light-dark(var(--color-highlight-light), var(--color-highlight-dark));

  /* === table =============================================== */
  --color-table-header-light: oklch(96.89% 0.03278 101.43);
  --color-table-header-dark: oklch(27.274% 0.00003 271.152);
  --color-table-header: light-dark(var(--color-table-header-light), var(--color-table-header-dark));

  --color-bg-stiped-light: oklch(0.98 0.01 100);
  --color-bg-stiped-dark: oklch(28.094% 0.00003 271.152);
  --color-bg-stiped: light-dark(var(--color-bg-stiped-light), var(--color-bg-stiped-dark));
}