[data-theme="dark"] {
  /* Page background & text */
  --pico-background-color: var(--captainslog-color-background);
  --pico-color: var(--captainslog-color-font);

  /* Cards / articles (elevated surfaces) */
  --pico-card-background-color: var(--captainslog-color-background2);
  --pico-card-sectioning-background-color: var(--captainslog-color-background2);

  /* Primary color (buttons, links, focus) */
  --pico-primary: var(--captainslog-color-primary);
  --pico-primary-background: var(--captainslog-color-primary);
  --pico-primary-hover: color-mix(in srgb, var(--captainslog-color-primary) 80%, black);
  --pico-primary-hover-background: color-mix(in srgb, var(--captainslog-color-primary) 80%, black);
  --pico-primary-focus: color-mix(in srgb, var(--captainslog-color-primary) 30%, transparent);

  /* Secondary color */
  --pico-secondary: var(--captainslog-color-secondary);
  --pico-secondary-background: var(--captainslog-color-secondary);
  --pico-secondary-hover: color-mix(in srgb, var(--captainslog-color-secondary) 80%, black);
  --pico-secondary-hover-background: color-mix(in srgb, var(--captainslog-color-secondary) 80%, black);

  /* Borders */
  --pico-border-color: var(--captainslog-color-border);

  /* Form inputs */
  --pico-form-element-background-color: var(--captainslog-color-background2);
  --pico-form-element-border-color: var(--captainslog-color-border);

  /* Muted text */
  --pico-muted-color: color-mix(in srgb, var(--captainslog-color-font) 70%, transparent);

  /* Contrast (high-emphasis elements like .contrast class) */
  --pico-contrast: var(--captainslog-color-font);
}