:root {
  --pg-light-100: #fdfdfb;
  --pg-light-200: #f4f4f3;
  --pg-light-300: #e7e5e4;
  --pg-light-400: #68625d;
  --pg-light-500: #1c1917;

  --pg-dark-100: #1c1917;
  --pg-dark-200: #292524;
  --pg-dark-300: #44403c;
  --pg-dark-400: #d6d3d1;
  --pg-dark-500: #fafaf9;

  --pg-bg:      var(--pg-light-100);
  --pg-surface: var(--pg-light-200);
  --pg-border:  var(--pg-light-300);
  --pg-muted:   var(--pg-light-400);
  --pg-primary: var(--pg-light-500);
}

html[data-theme="dark"] {
  --pg-bg:      var(--pg-dark-100);
  --pg-surface: var(--pg-dark-200);
  --pg-border:  var(--pg-dark-300);
  --pg-muted:   var(--pg-dark-400);
  --pg-primary: var(--pg-dark-500);
}

:focus-visible {
  outline: 2px solid var(--pg-primary);
  outline-offset: 2px;
  border-radius: 4px;
}