/* ThreshBoard design tokens v0.2
   Import this file first, then components.css. */

:root {
  /* Brand */
  --tb-red: #e82219;          /* Threshold red: marks, highlights, chart series 1, accents on black */
  --tb-red-action: #d01e16;   /* Buttons and red text on white (5.2:1 with white) */
  --tb-red-text: #b3170f;     /* Small red text, negative values */
  --tb-black: #000000;
  --tb-white: #ffffff;

  /* Neutrals */
  --tb-gray-50: #f6f6f6;      /* Subtle fills, totals rows */
  --tb-gray-100: #ececec;     /* Row dividers, bar tracks */
  --tb-rule: #e0e0e0;         /* Card and section rules */
  --tb-border: #8a8a8a;       /* Input borders */
  --tb-muted-text: #5c5c5c;   /* Secondary text (6.5:1) */
  --tb-empty-text: #767676;   /* Empty values and unreached steps (4.5:1) */
  --tb-ink-2: #3d3d3d;        /* Body text on gray */
  --tb-on-black-muted: #bdbdbd;

  /* Status */
  --tb-positive: #15803d;
  --tb-positive-on-black: #4ade80;
  --tb-negative: #b3170f;
  --tb-warning: #b45309;
  --tb-warning-text: #8a3f06;
  --tb-warning-fill: #fff7ed;
  --tb-info: #1d4ed8;

  /* Chart palette (color-blind safe by lightness) */
  --tb-chart-1: #e82219;
  --tb-chart-2: #000000;
  --tb-chart-3: #8a8a8a;
  --tb-chart-4: #d4d4d4;
  --tb-chart-5: #1d4ed8;      /* only when a chart needs more than 4 series */
  --tb-chart-6: #f59e0b;

  /* Sequential red (heat maps, heat tables) */
  --tb-seq-1: #fbe3e1;
  --tb-seq-2: #f6b4af;
  --tb-seq-3: #ef7c75;
  --tb-seq-4: #e82219;
  --tb-seq-5: #8f130d;

  /* Attribution badges (ASF) */
  --tb-asf-paid-bg: #e82219;       --tb-asf-paid-ink: #000000;
  --tb-asf-organic-bg: #000000;    --tb-asf-organic-ink: #ffffff;
  --tb-asf-direct-bg: #d4d4d4;     --tb-asf-direct-ink: #000000;
  --tb-asf-referral-bg: #8a8a8a;   --tb-asf-referral-ink: #000000;
  --tb-asf-other-bg: #ececec;      --tb-asf-other-ink: #000000;

  /* Type */
  --tb-font: "PP Neue Montreal", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tb-font-mono: ui-monospace, Menlo, Consolas, monospace;
  --tb-fs-display: 40px;   /* uppercase, weight 800, tracking -0.02em */
  --tb-fs-h1: 32px;
  --tb-fs-h2: 16px;
  --tb-fs-body: 14px;
  --tb-fs-table: 13px;
  --tb-fs-small: 12px;
  --tb-fs-label: 10px;     /* uppercase, weight 700, tracking 0.12em */
  --tb-fs-figure: 36px;    /* scorecard numbers, tabular */
  --tb-fw-book: 400;
  --tb-fw-medium: 500;
  --tb-fw-bold: 700;
  --tb-fw-black: 800;

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

  /* Layout */
  --tb-grid-columns: 12;
  --tb-grid-gutter: 24px;
  --tb-nav-width: 248px;
  --tb-topbar-height: 60px;
  --tb-row-dense: 32px;
  --tb-row-comfortable: 44px;
  --tb-control-height: 36px;
  --tb-button-height: 40px;

  /* Borders */
  --tb-radius: 0;
  --tb-border-width: 1px;
  --tb-border-strong: 1px solid var(--tb-black);
  --tb-border-rule: 1px solid var(--tb-rule);
  --tb-shadow-pop: 6px 6px 0 var(--tb-black);   /* menus and popovers only */
  --tb-focus: 2px solid var(--tb-red-action);
  --tb-focus-offset: 2px;
}
