/* Design tokens. Light first; dark via prefers-color-scheme. Heat steps mirror app/web/charts.py. */
:root {
  color-scheme: light dark;

  /* colour roles */
  --canvas: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --border: rgba(17, 24, 39, .08);
  --border-strong: rgba(17, 24, 39, .16);
  --text: #111827;
  --muted: #6b7280;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef2ff;
  --on-accent: #ffffff;
  --success: #15803d;
  --success-soft: #f0fdf4;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --info: #4338ca;
  --info-soft: #eef2ff;
  --focus: #4f46e5;

  /* heat scale 0–4 (value fifths); text flips at step 3 */
  --heat-0-bg: #eef2ff; --heat-0-fg: #111827;
  --heat-1-bg: #c7d2fe; --heat-1-fg: #111827;
  --heat-2-bg: #818cf8; --heat-2-fg: #111827;
  --heat-3-bg: #4f46e5; --heat-3-fg: #ffffff;
  --heat-4-bg: #3730a3; --heat-4-fg: #ffffff;

  /* verbal visibility scale 0–3 of the client report; mirrors charts.SCALE_* */
  --scale-0-bg: #f4f4f5; --scale-0-fg: #111827;
  --scale-1-bg: #e0e7ff; --scale-1-fg: #111827;
  --scale-2-bg: #a5b4fc; --scale-2-fg: #111827;
  --scale-3-bg: #4338ca; --scale-3-fg: #ffffff;

  /* charts */
  --chart-badge: #f4f4f5;
  --chart-track: #f3f4f6;
  --chart-set: #818cf8;
  --chart-focal: #3730a3;
  --chart-discovered: #9ca3af;
  --chart-range: #c7d2fe;

  /* spacing (4/8 based) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* radius */
  --radius-sm: 6px;
  --radius: 10px;

  /* shadows: popovers only */
  --shadow-pop: 0 1px 1px rgba(0, 0, 0, .07), 0 3px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .08);

  /* type scale */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 13px; --lh-xs: 18px;
  --fs-sm: 14px; --lh-sm: 20px;
  --fs-md: 16px; --lh-md: 24px;
  --fs-lg: 20px; --lh-lg: 28px;
  --fs-xl: 28px; --lh-xl: 36px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* focus ring */
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  --content-max: 1200px;
  --tap: 44px;
}

@media screen and (prefers-color-scheme: dark) {  /* screen only: print / PDF always uses the light tokens */
  :root {
    --canvas: #0b0c10;
    --surface: #15171c;
    --surface-2: #1c1f26;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .16);
    --text: #e5e7eb;
    --muted: #9ca3af;
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-soft: #1e1b4b;
    --on-accent: #0b0c10;
    --success: #4ade80;
    --success-soft: #0f2a1a;
    --warning: #fbbf24;
    --warning-soft: #2a1f0a;
    --danger: #f87171;
    --danger-soft: #2a1111;
    --info: #a5b4fc;
    --info-soft: #1e1b4b;
    --focus: #a5b4fc;

    --heat-0-bg: #1e1b4b; --heat-0-fg: #e5e7eb;
    --heat-1-bg: #312e81; --heat-1-fg: #e5e7eb;
    --heat-2-bg: #4338ca; --heat-2-fg: #e5e7eb;
    --heat-3-bg: #818cf8; --heat-3-fg: #0b0c10;
    --heat-4-bg: #a5b4fc; --heat-4-fg: #0b0c10;

    --scale-0-bg: #1c1f26; --scale-0-fg: #e5e7eb;
    --scale-1-bg: #1e1b4b; --scale-1-fg: #e5e7eb;
    --scale-2-bg: #3730a3; --scale-2-fg: #e5e7eb;
    --scale-3-bg: #a5b4fc; --scale-3-fg: #0b0c10;

    --chart-badge: #262a33;
    --chart-track: #262a33;
    --chart-set: #6366f1;
    --chart-focal: #a5b4fc;
    --chart-discovered: #6b7280;
    --chart-range: #4338ca;

    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .5);
  }
}