/* Gather & Solve design tokens.
   Source of truth: the "Gather & Solve Style Guide" design system (tokens.json).
   Dusk (dark) is the first and default theme. Paper (light) is the same palette on paper.
   Do not hand-edit values here; change them in the style guide and re-copy. */

:root,
[data-theme="dusk"] {
  --ground: #1f2428;
  --surface: #262c31;
  --surface-raised: #2e353b;
  --line: #2a3035;
  --border-strong: #7a8589;
  --ink: #f1f0ec;
  --ink-muted: #a4adb0;
  --gather: #5ec8c0;
  --solve: #a99bff;
  --on-gather: #14171a;
  --on-solve: #14171a;
  --focus: var(--solve);
  color-scheme: dark;
}

/* First visit follows the visitor's system setting. An explicit choice on the
   root element wins over this block. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dusk"]) {
    --ground: #f1f0ec;
    --surface: #ffffff;
    --surface-raised: #e6e4de;
    --line: #d3d8da;
    --border-strong: #6b7478;
    --ink: #14171a;
    --ink-muted: #4a5256;
    --gather: #0f6f6a;
    --solve: #5b43d6;
    --on-gather: #ffffff;
    --on-solve: #ffffff;
    color-scheme: light;
  }
}

[data-theme="paper"] {
  --ground: #f1f0ec;
  --surface: #ffffff;
  --surface-raised: #e6e4de;
  --line: #d3d8da;
  --border-strong: #6b7478;
  --ink: #14171a;
  --ink-muted: #4a5256;
  --gather: #0f6f6a;
  --solve: #5b43d6;
  --on-gather: #ffffff;
  --on-solve: #ffffff;
  color-scheme: light;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --font-sans: Manrope, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}