/* Design tokens (design D9, D14). Monochrome: one neutral gray ramp with
   equal R/G/B channels; the only chromatic tokens are --color-danger*, which
   are reserved for validation and error states. Themes only remap colors.

   Outlines (borders, focus ring, keycaps) come in two strengths. The default
   is the softer one; each theme also defines the stronger `--strong-*` values,
   which the High contrast setting (`data-contrast='high'`, at the end of this
   file) swaps in. Both strengths keep control boundaries and the focus ring at
   3:1 or better against their background. */

:root {
  --gray-0: #ffffff;
  --gray-1: #fafafa;
  --gray-2: #f5f5f5;
  --gray-3: #e5e5e5;
  --gray-4: #d4d4d4;
  --gray-5: #a3a3a3;
  --gray-6: #8a8a8a;
  --gray-7: #737373;
  --gray-8: #525252;
  --gray-9: #404040;
  --gray-10: #262626;
  --gray-11: #1c1c1c;
  --gray-12: #141414;

  --color-bg: var(--gray-2);
  --color-surface: var(--gray-0);
  --color-surface-raised: var(--gray-0);
  --color-hover: var(--gray-2);
  /* Row hover as a translucent wash, so it shows on any card surface. */
  --color-hover-row: color-mix(in srgb, var(--gray-10) 6%, transparent);
  /* Do is the only quadrant with a surface, raised by a shadow (board.css). */
  --color-surface-do: var(--color-surface);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.1), 0 18px 48px rgba(0, 0, 0, 0.24);
  --color-border: var(--gray-4);
  --color-border-strong: var(--gray-6);
  --color-text: var(--gray-10);
  --color-text-muted: var(--gray-8);
  --color-inverse-bg: var(--gray-10);
  --color-inverse-text: var(--gray-0);
  --color-focus: var(--gray-7);
  --color-scrollbar: var(--gray-5);

  --strong-border: var(--gray-6);
  --strong-border-strong: var(--gray-8);
  --strong-focus: var(--gray-10);
  --strong-kbd-border: var(--gray-7);
  --strong-kbd-text: var(--gray-10);

  /* Raised surfaces (dialogs, toasts) and keycaps — design D23. */
  --color-hover-raised: var(--gray-2);
  --color-moved: var(--gray-4);
  --color-divider: var(--gray-3);
  --color-kbd-bg: var(--gray-0);
  --color-kbd-border: var(--gray-4);
  --color-kbd-text: var(--gray-8);

  --color-danger: #b91c1c;
  --color-danger-bg: #fef2f2;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.18);

  --font-sans:
    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-size-app-title: 2rem;
  --font-size-quadrant-title: 1.5rem;
  --font-size-quadrant-subtitle: 0.95rem;
  --font-size-axis: 0.8rem;
  --font-size-task: 0.92rem;
  --font-size-meta: 0.85rem;
  --font-size-kbd: 0.75rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: var(--gray-12);
    --color-surface: var(--gray-11);
    --color-surface-raised: var(--gray-10);
    --color-hover: var(--gray-10);
    --color-hover-row: color-mix(in srgb, var(--gray-2) 8%, transparent);
    /* Shadows barely show on a dark page, so Do is also a step lighter. */
    --color-surface-do: color-mix(in srgb, var(--gray-10) 70%, var(--gray-11));
    --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.6), 0 18px 48px rgba(0, 0, 0, 0.8);
    --color-border: var(--gray-9);
    --color-border-strong: var(--gray-7);
    --color-text: var(--gray-2);
    --color-text-muted: var(--gray-5);
    --color-inverse-bg: var(--gray-2);
    --color-inverse-text: var(--gray-11);
    --color-focus: var(--gray-5);
    --color-scrollbar: var(--gray-8);
    --color-hover-raised: var(--gray-9);
    --color-moved: var(--gray-8);
    --color-divider: var(--gray-8);
    --color-kbd-bg: var(--gray-9);
    --color-kbd-border: var(--gray-7);
    --color-kbd-text: var(--gray-3);

    --strong-border: var(--gray-7);
    --strong-border-strong: var(--gray-5);
    --strong-focus: var(--gray-0);
    --strong-kbd-border: var(--gray-6);
    --strong-kbd-text: var(--gray-0);

    --color-danger: #f87171;
    --color-danger-bg: #2a1414;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --color-bg: var(--gray-12);
  --color-surface: var(--gray-11);
  --color-surface-raised: var(--gray-10);
  --color-hover: var(--gray-10);
  --color-hover-row: color-mix(in srgb, var(--gray-2) 8%, transparent);
  /* Shadows barely show on a dark page, so Do is also a step lighter. */
  --color-surface-do: color-mix(in srgb, var(--gray-10) 70%, var(--gray-11));
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.6), 0 18px 48px rgba(0, 0, 0, 0.8);
  --color-border: var(--gray-9);
  --color-border-strong: var(--gray-7);
  --color-text: var(--gray-2);
  --color-text-muted: var(--gray-5);
  --color-inverse-bg: var(--gray-2);
  --color-inverse-text: var(--gray-11);
  --color-focus: var(--gray-5);
  --color-scrollbar: var(--gray-8);
  --color-hover-raised: var(--gray-9);
  --color-moved: var(--gray-8);
  --color-divider: var(--gray-8);
  --color-kbd-bg: var(--gray-9);
  --color-kbd-border: var(--gray-7);
  --color-kbd-text: var(--gray-3);

  --strong-border: var(--gray-7);
  --strong-border-strong: var(--gray-5);
  --strong-focus: var(--gray-0);
  --strong-kbd-border: var(--gray-6);
  --strong-kbd-text: var(--gray-0);

  --color-danger: #f87171;
  --color-danger-bg: #2a1414;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

:root[data-theme='light'] {
  color-scheme: light;
}

/* High contrast (Settings → Appearance): stronger outlines in either theme.
   Must stay last so it wins over the theme blocks above. */
:root[data-contrast='high'] {
  --color-border: var(--strong-border);
  --color-border-strong: var(--strong-border-strong);
  --color-focus: var(--strong-focus);
  --color-kbd-border: var(--strong-kbd-border);
  --color-kbd-text: var(--strong-kbd-text);
}