/* ============================================================
   COLORS — FEB Analytics
   Two themes share one accent. The interactive dashboard is dark
   (near-black surfaces); the printable reports are light (white pages).
   Orange (#e8772e) is the single brand accent across both.
   ============================================================ */
:root {
  /* ---- Brand accent ---------------------------------------- */
  --accent: #e8772e;            /* orange — the one brand color */
  --accent-ink: #1a1a1a;        /* text/icon sitting on accent fills */
  --accent-tint-dark: #1f1a16;  /* accent-tinted surface on dark (active card) */
  --accent-tint-light: #fff6ee; /* accent-tinted surface on light (row hover) */
  --accent-wash-light: #fff8ef; /* lectura/callout background on light */

  /* ---- Dark theme: surfaces (dashboard) -------------------- */
  --bg-app: #0c0c0e;            /* page background */
  --surface-1: #141418;         /* base card / inactive tab */
  --surface-2: #16161a;         /* KPI tile, result card, inputs */
  --surface-3: #121216;         /* inset panel */
  --surface-raised: #1d1d1f;    /* top bar */
  --surface-input: #2b2b2e;     /* form control on dark */
  --surface-agg: #2d2d36;       /* table aggregate / total row */

  /* ---- Dark theme: borders --------------------------------- */
  --border-1: #24242a;          /* card border */
  --border-2: #2a2a2e;          /* divider / control border */
  --border-subtle: #1d1d20;     /* faint table row line */
  --border-strong: #3a3a42;     /* tooltip / axis */

  /* ---- Dark theme: text ------------------------------------ */
  --text-strong: #ffffff;       /* headings, KPI values */
  --text-1: #e8e8ea;            /* body */
  --text-2: #cfcfd4;            /* secondary */
  --text-3: #9a9aa0;            /* labels, muted */
  --text-4: #7a7a80;            /* faint, captions */

  /* ---- Light theme: report --------------------------------- */
  --report-bg: #f2f2f2;         /* behind the page */
  --report-page: #ffffff;       /* the page itself */
  --report-ink: #1d1d1f;        /* body text */
  --report-ink-2: #444444;      /* h2 / secondary */
  --report-ink-3: #666666;      /* sub */
  --report-muted: #999999;      /* faint */
  --report-border: #e3e3e3;     /* card border */
  --report-line: #eeeeee;       /* table row line */
  --report-line-strong: #dddddd;/* table head rule */
  --report-chip: #f0f0f0;       /* tag background */

  /* ---- Semantic: win / lose / warn ------------------------- */
  --win: #3ddc84;               /* win on dark */
  --win-2: #46c46a;             /* scatter / combo positive */
  --win-ink: #1f9e54;           /* win on light */
  --win-ink-deep: #1f7a43;      /* win text on light callout */
  --lose: #ff6b6b;              /* loss on dark */
  --lose-2: #e0574b;            /* scatter / combo negative */
  --lose-ink: #c0392b;          /* loss on light */
  --lose-ink-deep: #b23b3b;     /* loss text on light callout */
  --warn: #b8860b;              /* mid / caution percentage */

  /* ---- Shot-chart zone families ---------------------------- */
  --zone-rim: #e8772e;          /* at-rim / paint (orange) */
  --zone-mid: #3fa9bf;          /* mid-range (teal) */
  --zone-three: #74c25a;        /* three-point (green) */

  /* ---- Semantic aliases (use these in components) ---------- */
  --text-heading: var(--text-strong);
  --text-body: var(--text-1);
  --text-label: var(--text-3);
  --surface-card: var(--surface-1);
  --surface-tile: var(--surface-2);
  --border-card: var(--border-1);
  --focus-ring: var(--accent);
}