:root{
  /* =========================
     Brand palette
     ========================= */
  --navy:#1A1D2E;
  --brand:#00BFA6;       /* primary */
  --brand-2:#0E9E8A;     /* secondary (deep teal) */

  --grey-150:#F2F6F8;    /* app background */
  --grey-200:#E3EAF0;    /* surface */
  --grey-300:#CFDAE3;    /* panel */
  --grey-400:#9FAAB6;    /* border */

  /* =========================
     Hockey states
     ========================= */
  --es-bg:#8FE4D3;  --es-border:var(--brand);
  --pp-bg:#CFF7E1;  --pp-border:#69DC9E;
  --pk-bg:#FFD8D6;  --pk-border:#FF6B60;
  --ps-bg:#D6E8FF;  --ps-border:#5AA3FF;

  /* =========================
     Semantic colors & base
     ========================= */
  --bg:var(--grey-150);
  --surface:var(--grey-200);
  --panel:var(--grey-300);
  --border:var(--grey-400);

  --color-text:var(--navy);
  --color-muted:#515B66;
  --color-primary:var(--brand);
  --color-secondary:var(--brand-2);
  --color-success:#69DC9E;
  --color-danger:#FF6B60;
  --color-info:#5AA3FF;
  --color-warning:#FFB020;

  --font-ui: "Inter", "Segoe UI", Roboto, ui-sans-serif, -apple-system, "Helvetica Neue", Arial, "Noto Sans";

  /* =========================
     Layout tokens
     ========================= */
  --nav-w:120px;
  --header-h:80px;
  --header-pad-y: 6px;     /* breathing room above/below the logo */
  --logo-h: clamp(48px, calc(var(--header-h) - 20px), 80px);

  /* Heights */
  --filter-h: 56px;
  --tabs-h:   36px;
  --totals-h: 40px;

  /* Tabs spacing */
  --tabs-top-gap: 0px;         /* space from panel top border → tab buttons */
  --tabs-buttons-gap: 12px;    /* space from buttons to underline */
  --tabs-to-table-gap: 12px;   /* gap from tabs underline to table wrapper */

  /* Panel spacing */
  --filters-panel-gap: 12px;   /* space between filter card and panel card */

  /* =========================
     Filter grid tuning
     ========================= */
  --filter-cols: 100;
  --filter-col-min: 0px;

  /* Spans per control (default screen = Game scope)
     Sum WITHOUT Player = 10 (reserves 2 cols),
     so WHEN Player shows, total = 12 and stays on one row. */
  --span-date:   12;  /* Date: narrower   */
  --span-opp:    21;  /* Opp: wider       */
  --span-arena:  22;  /* Arena: wider     */
  --span-type:   20;  /* Type: tighter    */
  --span-ha:     10;  /* Home/Away: tight */

  --span-player: 15;  /* reserved space   */
  --span-unit:   15;  /* reserved space   */

  /* =========================
     Container & radii
     ========================= */
  --content-max:1440px;
  --gap:16px;
  --radius:12px;

  /* =========================
     Header offsets
     ========================= */
  --logo-offset-x: 0px;
  --title-offset-x: 20px; /* “Performance” label/text */
  --header-left-gap: 12px; /* gap between logo cluster and brand title */

  /* =========================
     Typography
     ========================= */
  --fs-12:12px;
  --fs-14:14px;
  --fs-16:16px;
  --fs-20:20px;
  --fs-24:24px;
  --lh:1.35;
}

/* Focus ring (AA) kept as a separate block to preserve order */
:root {
  --focus-ring: 2px solid var(--color-secondary);
}