/* Design tokens extracted from josie.lol */

:root {
  --color-bg: #ffffff;
  --color-fg: #000000;
  --color-brand: #bb86fc;
  --color-accent: #6200ee;
  --color-teal: #018786;
  --color-gold: #b0a000;
  --color-green: #4caf50;
  --color-badge-brand-bg: rgba(187, 134, 252, 0.2);
  --color-badge-green-bg: rgba(76, 175, 80, 0.2);
  --color-on-accent: #ffffff;

  --font-mono: "IBM Plex Mono", monospace;
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius: 0.25rem;
  --transition: 0.2s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-fg: #ffffff;
    --color-accent: #bb86fc;
    --color-teal: #03dac6;
    --color-gold: #ffeb3b;
    --color-on-accent: #121212;
  }
}