/*
 * GenDesign — global CSS design tokens (UI Brief May 17)
 * All CSS vars used across site-finder and analytics components.
 * Spacing scale: 4/8/12/16/24/32px only.
 * Tabular-nums applied globally for numeric readability.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* ── Surface ─────────────────────────────────────────────────────────── */
  --bg-app: #f6f7f9;
  --bg-card: #ffffff;
  --bg-card-alt: #fafbfc;
  --bg-headline: #0f172a; /* slate-900 — dark verdict bar */

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --border-soft: #eef0f3;
  --border-card: #e6e8ec;
  --border-strong: #d1d5db;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --fg-primary: #111111;
  --fg-secondary: #5b6066;
  --fg-tertiary: #73767e;
  --fg-on-dark: #e2e8f0; /* text on --bg-headline */
  --fg-on-dark-muted: #94a3b8; /* caveat text on dark */

  /* ── Brand / CTA ─────────────────────────────────────────────────────── */
  --accent: #1d4ed8; /* primary blue CTA */
  --accent-hover: #1e40af;
  --accent-soft: #dbeafe; /* badge bg, active tab bg */
  --accent-2: #f2994a; /* secondary orange CTA (Export, Share) */

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --success: #0a7a3a;
  --success-soft: #dcfce7;
  --warn: #9a6700;
  --warn-soft: #fef3c7;
  --danger: #b3261e;
  --danger-soft: #fee2e2;

  /* ── Data-viz (use in order, no skip) ───────────────────────────────── */
  --viz-1: #1d4ed8;
  --viz-2: #0ea5e9;
  --viz-3: #14b8a6;
  --viz-4: #f59e0b;
  --viz-5: #8b5cf6;
  --prediction-line: #0ea5e9;
  --prediction-band: rgba(14, 165, 233, 0.18);
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--fg-primary);
  font-family:
    Inter,
    -apple-system,
    "Segoe UI",
    system-ui,
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  /* Tabular nums globally for numeric legibility (Bloomberg lesson) */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
}

/* Focus-visible ring — accessible, not outline:none */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

a {
  color: inherit;
}