/*
 * Design tokens — the single place colours, spacing, radii and type sizes are
 * defined (~/.claude/rules/frontend-theme.md). style.css and app.js read these
 * through var(--…) only; a hex literal anywhere else is a review failure.
 *
 * Light palette on :root; dark overrides the colour tokens only, so the
 * layout tokens stay identical across themes.
 */
:root {
  color-scheme: light dark;

  /* Surfaces and text */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-muted: #eef0f3;
  --color-border: #d9dde3;
  --color-text: #1b1f24;
  --color-text-muted: #5b6470;
  --color-text-faint: #8a929c;

  /* Data marks (one accent, three strengths) */
  --color-accent: #1f6feb;
  --color-accent-strong: #0b4fc2;
  --color-accent-muted: #b8d0f7;

  /* Status */
  --color-ok: #1a7f37;
  --color-ok-bg: #dcf5e3;
  --color-warn: #9a6700;
  --color-warn-bg: #fff3c4;
  --color-error: #c0392b;
  --color-error-bg: #fde2df;

  /* Contribution progress bar */
  --color-progress-track: #e3e6ea;
  --color-progress-fill: #1a7f37;

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

  /* Radii and strokes */
  --radius-sm: 6px;
  --radius-md: 10px;
  --border-width: 1px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 26px;
  --leading-tight: 1.15;
  --leading-normal: 1.45;
  --weight-normal: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Layout */
  --page-max-width: 1100px;
  --tile-min-width: 160px;
  --sparkline-height: 44px;
  --table-min-width: 560px;
  --shadow-tile: 0 1px 2px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1216;
    --color-surface: #171b21;
    --color-surface-muted: #1f242c;
    --color-border: #2c333d;
    --color-text: #e6e9ed;
    --color-text-muted: #a2abb6;
    --color-text-faint: #6f7883;

    --color-accent: #6ea8fe;
    --color-accent-strong: #9cc4ff;
    --color-accent-muted: #2f4a75;

    --color-ok: #4cc072;
    --color-ok-bg: #12331d;
    --color-warn: #e0b13a;
    --color-warn-bg: #3a2f0b;
    --color-error: #f0776a;
    --color-error-bg: #3d1a16;

    --color-progress-track: #2a313a;
    --color-progress-fill: #4cc072;
    --shadow-tile: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}