:root[data-color-mode='dark']{
  /* backgrounds */
  --bg-primary-color:oklch(14% 0 0);

  /* foregrounds */
  --fg-primary-color:oklch(95% 0 0);
  --fg-secondary-color:oklch(80% 0 0);
  --fg-tertiary-color:oklch(70% 0 0);

  --heading-color:oklch(98% 0 0);

  /* link */
  --link-color:oklch(70% 0.16 255);
  --link-color-hover:oklch(from var(--link-color) calc(l + 0.04) c h);
  --link-color-active:oklch(from var(--link-color) calc(l - 0.01) c h);

  /* controls */
  --control-border-color:oklch(38% 0 0);

  /* checkbox | switch | radio */
  --control-choice-bg:oklch(17% 0 0);
  --control-choice-indicator-bg:oklch(60% 0.18 255);
  --control-choice-indicator-fg:oklch(100% 0 0);

  /* surface */
  --surface-bg-neutral:var(--color-neutral-700);
  --surface-bg-white:oklch(100% 0 0);
  --surface-bg-blue:var(--color-blue-800);
  --surface-bg-green:var(--color-green-800);
  --surface-bg-yellow:var(--color-yellow-800);
  --surface-bg-red:var(--color-red-800);
  --surface-bg-default:var(--surface-bg-neutral);

  --surface-fg-default:oklch(100% 0 0);

  /* border */
  --border-color:var(--color-neutral-500);

  /* line */
  --line-color:var(--color-neutral-800);

  /* outline focus */
  --outline-focus-color:oklch(70% 0.16 255);

  /* scrollbar */
  --scrollbar-color:var(--color-neutral-700);

  /* selection */
  --selection-color:oklch(100% 0 0 / 0.2);
}