/* Style tokens for the whole site: every color, font size, spacing and table size lives here.
   Change a value here and both pages follow. site.css only uses these names and holds no raw colors or sizes.
   Identity "Hardwood": walnut and maple, ball orange as the accent, court markings as the signature, with a
   blue -> gray -> rose rank scale. */

/* ---------- colors: dark theme (default; walnut) ---------- */
:root,
html[data-theme="dark"] {
  --bg: #15110D;
  --panel: #1E1812;
  --row: #15110D;
  --line: #2E251C;          /* decorative dividers only */
  --ctl: #7A6D5E;           /* borders of inputs and buttons (needs 3:1) */
  --hover: #2A2118;
  --sorted: #2B2015;        /* cells of the sorted column ("the painted lane") */
  --text: #F1E8DB;
  --text2: #B7AA98;
  --text3: #9E927F;         /* middle gray: units, blanks, dimmed text */
  --accent: #F59A4A;        /* ball orange: links, chips, banner, markers */
  --accent-fill: #F59A4A;   /* orange fill (pressed toggle) */
  --ink: #1A1109;           /* text on --accent-fill */
  --err: #FF5C7A;
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);

  /* rank scale, best (1) to worst (5) */
  --r1: #5CB0FF;
  --r2: #9CC7EE;
  --r3: #9E927F;
  --r4: #F0A0B0;
  --r5: #FF5C7A;
}

/* ---------- colors: light theme (maple) ---------- */
html[data-theme="light"] {
  --bg: #F4EBDC;
  --panel: #FBF6EC;
  --row: #FBF6EC;
  --line: #E2D4BC;
  --ctl: #8A7A66;
  --hover: #F5EDDD;
  --sorted: #F8EAD4;
  --text: #2A1F14;
  --text2: #4A3F32;
  --text3: #6B5E4E;
  --accent: #9C4A0A;        /* text-safe burnt orange on maple */
  --accent-fill: #F59A4A;
  --ink: #1A1109;
  --err: #B3003B;
  --shadow: 0 8px 24px rgba(60, 40, 20, .18);

  --r1: #0D47A1;
  --r2: #35699A;
  --r3: #6B5E4E;
  --r4: #B0455A;
  --r5: #B3003B;
}

/* ---------- type ---------- */
:root {
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-wordmark: 16px;
  --wordmark-weight: 800;
  --wordmark-tracking: .16em;
  --fs-page-title: 19px;    /* the glossary page's heading */
  --fs-panel-title: 15px;
  --fs-body: 13px;
  --fs-phone-control: 14px;
  --fs-note: 12px;          /* notices, chips, count line */
  --fs-label: 11px;         /* field labels */
  --fs-value: 11.5px;       /* table values */
  --fs-head: 10.5px;        /* column headers */
  --fs-rank: 9.5px;         /* rank numbers, credit tags, sort arrows */
  --fs-info-glyph: 8px;     /* the "i" inside the header info button */
  --head-weight: 650;       /* column headers */
  --tab-weight: 500;
  --tab-active-weight: 700;
}

/* ---------- spacing and sizes ---------- */
:root {
  --gutter: 12px;
  --gutter-phone: 6px;
  --control-height: 28px;
  --phone-control-height: 36px;
  --radius: 4px;
  --radius-small: 3px;
  --table-radius: 2px;      /* the table box is nearly square, like a scorer's table */

  /* table density. JS reads the numbers below to size the columns; keep them plain px values. */
  --cell-pad-x: 2px;
  --cell-pad-y: 3px;
  --head-pad-y: 4px;
  --player-pad-left: 6px;
  --player-pad-left-pick: 16px;   /* while the compare checkbox shows: --pick-left + --pick-size + a 2px gap. The name gives up this room inside the same column width. */
  --rank-gap: 2px;
  --player-width-phone: 110px;   /* 100px plus the 10px the always-visible compare checkbox adds to the name's left padding, so phone names wrap as before */
  --info-size: 12px;        /* the "i" button in a header */
  --info-gap: 3px;          /* space between a header name and its "i" button (plain px, read by JS) */
  --sort-marker-width: 7px; /* the small triangle in the top edge of the sorted column's header; it takes no room */
  --sort-marker-height: 4px;
  --sort-marker-right: 3px;
  --group-row-height: 22px; /* banner row above grouped columns */
  --table-max-height: 76vh;
  --table-max-height-phone-collapsed: 84vh;
  --tooltip-width: 260px;
  --picker-width: 290px;

  /* Multi seasons mode: the "Multi" switch, the season button and its checklist (popover; bottom sheet on a phone) */
  --label-row-height: 1lh;        /* every field's label line is as tall as one line of label text, so the Multi switch's track does not make one field taller */
  --switch-track-width: 28px;
  --switch-track-height: 16px;
  --switch-knob: 12px;
  --switch-knob-inset: 2px;
  --switch-hit: 24px;             /* invisible click area height (reaches up into the padding above the label line) */
  --switch-hit-phone: 32px;
  --season-btn-width: 150px;
  --popover-width: 250px;
  --sheet-row-height: 44px;
  --sheet-max-height: 78vh;

  /* compare checkbox before each player name (drawn inside the Player cell's left padding) */
  --pick-left: 5px;        /* clears the orange hover edge (--hover-edge, 3px) with a 2px gap */
  --pick-size: 9px;
  --pick-radius: 2px;
  --pick-hit: -9px -1px;    /* the tap area reaches this far beyond the square (top/bottom, left/right) */
  --pick-hit-touch: -9px -14px;   /* on touch screens the tap area is about 24px wide and 27px tall */

  /* percentile mode: the number sits in a small chip tinted with its rank color.
     --chip-pad is part of the column width (plain px, read by JS). */
  --chip-height: 14px;
  --chip-pad: 1px;
  --chip-gap: 1px;          /* space between the value and the chip (plain px, read by JS) */
  --chip-pad-legend: 6px;   /* the legend's chips are wider than the table's */
  --chip-height-legend: 16px; /* legend chips: taller than the table's, so the digits can sit centered */
  --digit-height: .727em;   /* Inter's digit (cap) height, used to center the legend digits */
  --chip-radius: 3px;
  --chip-fill-strong: 34%;  /* how much of the rank color fills the chip: steps 1 and 5 */
  --chip-fill-medium: 22%;  /* steps 2 and 4 */
  --chip-fill-weak: 16%;    /* step 3 */
  --chip-edge: 45%;         /* the chip's 1px edge */
  --fw-chip: 550;           /* chip digits: a little lighter than rank numbers (600) to offset the box (owner) */
}

/* ---------- Hardwood: court markings ---------- */
:root {
  --header-rule: 2px;       /* the baseline under the header */
  --seam-gap: 46px;         /* plank seams across the header */
  --seam-strength: 7%;
  --deco-left: 230px;       /* where the half-court drawing starts */
  --deco-strength: .4;
  --deco-stroke: 1.4;
  --tab-marker: 3px;        /* lane marker above the active tab */
  --lane-edge: 35%;         /* edge lines of the sorted column */
  --hover-edge: 3px;        /* marker on a hovered row's player cell */
  --sorted-edge: inset 0 -2px 0 var(--accent);   /* under the sorted column's header */
}