:root {
  --px-accent: 47 107 109;
  --px-action-strong: 47 107 109;
  --px-action-strong-hover: 36 82 84;
  --px-action-strong-pressed: 28 65 67;
  --px-action-strong-foreground: 255 255 255;
  --px-text-accent: var(--px-action-primary);
  --px-action-primary: var(--px-action-strong);
  --px-action-primary-hover: var(--px-action-strong-hover);
  --px-action-primary-pressed: var(--px-action-strong-pressed);
  --px-action-on-primary: var(--px-action-strong-foreground);
  --px-action-secondary: 230 240 240;
  --px-action-secondary-hover: 220 234 234;
  --px-action-secondary-pressed: 203 221 221;
  --px-border-focused: var(--px-action-primary);
  --px-focus-ring: var(--px-action-primary) / 0.333;
  --px-surface-selected: 220 234 234;
  --color-hero-surface: 25 45 45;
  --color-hero-surface-alt: 36 82 84;
  --color-hero-foreground: 255 255 255;
  --color-hero-muted: 182 205 203;
  --color-hero-accent: 133 184 183;
}

[data-theme="dark"] {
  --px-accent: 133 184 183;
  --px-action-strong: 62 125 127;
  --px-action-strong-hover: 52 111 113;
  --px-action-strong-pressed: 43 98 100;
  --px-action-strong-foreground: 255 255 255;
  --px-text-accent: 133 184 183;
  --px-action-primary: var(--px-action-strong);
  --px-action-primary-hover: var(--px-action-strong-hover);
  --px-action-primary-pressed: var(--px-action-strong-pressed);
  --px-action-on-primary: var(--px-action-strong-foreground);
  --px-action-secondary: 32 61 62;
  --px-action-secondary-hover: 36 77 79;
  --px-action-secondary-pressed: 47 90 92;
  --px-border-focused: var(--px-text-accent);
  --px-focus-ring: var(--px-action-primary) / 0.467;
  --px-surface-selected: 32 61 62;
  --color-hero-surface: 20 39 39;
  --color-hero-surface-alt: 25 45 45;
  --color-hero-foreground: 255 255 255;
  --color-hero-muted: 182 205 203;
  --color-hero-accent: 133 184 183;
}