: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-error-light: oklch(0.45 0.16 25);
  --color-error-dark: oklch(0.8 0.1 25);
  --color-error: light-dark(var(--color-error-light), var(--color-error-dark));

  --color-success-light: oklch(0.4 0.1 145);
  --color-success-dark: oklch(0.8 0.1 145);
  --color-success: light-dark(var(--color-success-light), var(--color-success-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));

  /* === Focus =============================================== */
  --focus-outline: 3px solid currentColor;
  --focus-outline-offset: 3px;
}