/* an-tokens.css -- Analytics design tokens for 5 Star Booker.
   Shadcn-grade token layer in plain CSS, namespaced --an-* so nothing here
   collides with rankings.css or five-star.css. Layers ON the existing brand
   (true black surfaces, championship gold) rather than replacing it.

   Consumers: an-viz.js (ECharts "fiveStar" theme + Floating UI tooltips)
   and any analytics template. Load AFTER five-star.css when both are on a
   page; this file only defines --an-* custom properties plus .an-* recipe
   classes, so order is a courtesy, not a requirement. */

:root {
  /* ---------- Surfaces: the layered dark stack ---------------------------
     Same cold true-black ramp as the game board. Base is the page, raised
     is a card sitting on it, overlay is anything floating (tooltip, popover,
     menu). Each step up gets a slightly lighter fill AND a slightly
     brighter border, which is what sells elevation on near-black. */
  --an-bg: #0a0a0c; /* page base */
  --an-surface-1: #101014; /* chart / card surface */
  --an-surface-2: #17171c; /* raised object on a card */
  --an-surface-3: #1e1e25; /* hover fill, active row */
  --an-overlay: #1b1b21; /* floating layer (tooltip, popover) */
  --an-overlay-backdrop: rgba(5, 5, 7, 0.6); /* modal scrim */

  /* ---------- Hairlines and borders -------------------------------------
     1px hairlines everywhere. Decorative edges stay quiet; interactive
     component boundaries use the strong step (3:1 against surface,
     WCAG 1.4.11). */
  --an-border: #26262e; /* standard hairline */
  --an-border-soft: #1a1a20; /* sub-dividers, grid frames */
  --an-border-strong: #3a3a46; /* overlay edge, hovered card */
  --an-border-interactive: #6a6a78; /* form controls, focusable chrome */

  /* ---------- Ink -------------------------------------------------------- */
  --an-ink: #ededf1; /* primary text */
  --an-ink-2: #a2a2ae; /* secondary text */
  --an-ink-3: #8a8a96; /* faint labels (AA 4.5:1 on panels) */
  --an-ink-disabled: #5c5c66;
  --an-ink-on-accent: #1a1206; /* text ON a gold fill */

  /* ---------- Series palette (categorical, FIXED order) ------------------
     Assign in this order, never cycled: gold (subject), teal (rise/win),
     blue (info/comparison), red (fall/loss). Validated for CVD separation
     and 3:1 contrast against --an-surface-1 (dataviz six-checks,
     2026-07-24: CVD, chroma, normal-vision floor, contrast all pass; the
     lightness band intentionally runs bright because the house style is
     luminous marks on true black). */
  --an-series-1: #e8c254; /* gold: the subject */
  --an-series-2: #26c6a2; /* teal: rise, win */
  --an-series-3: #1b98dd; /* blue: info, comparison */
  --an-series-4: #ff6b4a; /* red: fall, loss */
  /* Deeper fill companions for area washes and bar bodies, so large fills
     never shout over the marks. */
  --an-fill-1: #a8862e; /* gold fill floor */
  --an-fill-2: #0fa47f; /* teal fill */
  --an-fill-3: #16719f; /* blue fill */
  --an-fill-4: #e4572e; /* red fill */
  /* Low-alpha washes for area-under-line and hover bands. */
  --an-wash-1: rgba(232, 194, 84, 0.14);
  --an-wash-2: rgba(38, 198, 162, 0.14);
  --an-wash-3: rgba(27, 152, 221, 0.14);
  --an-wash-4: rgba(255, 107, 74, 0.14);
  --an-hover-band: rgba(237, 237, 241, 0.04); /* axisPointer shadow band */

  /* ---------- Semantic aliases ------------------------------------------ */
  --an-accent: var(--an-series-1); /* brand gold */
  --an-pos: var(--an-series-2); /* gain, win, up */
  --an-neg: var(--an-series-4); /* loss, fall, down */
  --an-info: var(--an-series-3);

  /* ---------- Chart chrome ---------------------------------------------- */
  --an-grid-line: #1c1c22; /* horizontal value gridlines */
  --an-axis-line: #26262e; /* the baseline axis */
  --an-axis-tick: #33333d;
  --an-axis-label: var(--an-ink-3);
  --an-crosshair: #4a4a58; /* vertical hairline that tracks the pointer */

  /* ---------- Type scale ------------------------------------------------- */
  --an-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --an-display-font: "Archivo Black", "Arial Black", Impact, sans-serif;
  --an-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
    monospace;
  --an-text-2xs: 0.6875rem; /* 11px: axis ticks, fine print */
  --an-text-xs: 0.75rem; /* 12px: tooltip labels, legends */
  --an-text-sm: 0.8125rem; /* 13px: tooltip values, table body */
  --an-text-md: 0.9375rem; /* 15px: card body */
  --an-text-lg: 1.125rem; /* 18px: card title */
  --an-text-xl: 1.5rem; /* 24px: section head */
  --an-text-stat: 2rem; /* 32px: hero stat number */
  --an-leading-tight: 1.25;
  --an-leading-normal: 1.5;
  --an-tracking-label: 0.06em; /* uppercase kicker labels */
  /* Numbers in tables, tooltips, and stat tiles always set this so digits
     align in columns. */
  --an-numeric: tabular-nums;

  /* ---------- Radii ------------------------------------------------------ */
  --an-radius-sm: 6px; /* chips, inputs, small buttons */
  --an-radius-md: 8px; /* cards, tooltips, popovers */
  --an-radius-lg: 12px; /* page-level panels */

  /* ---------- Shadow scale -----------------------------------------------
     Soft, layered, low-spread. On near-black the shadow does less work than
     the border, so these stay subtle: elevation reads from fill + border +
     a whisper of depth. */
  --an-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --an-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55);
  --an-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.45);
  /* The top hairline inset that makes a dark card read as lit from above. */
  --an-shadow-lip: inset 0 1px 0 rgba(237, 237, 241, 0.04);

  /* ---------- Focus ring ------------------------------------------------- */
  --an-focus-ring: 0 0 0 2px var(--an-bg), 0 0 0 4px var(--an-series-1);
  --an-focus-ring-inset: inset 0 0 0 2px var(--an-series-1);

  /* ---------- Motion ----------------------------------------------------- */
  --an-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --an-dur-fast: 120ms;
  --an-dur-med: 220ms;

  /* ---------- Tooltip card recipe (shared numbers) -----------------------
     Every floating readout on the analytics surfaces uses this exact
     recipe, whether it comes from ECharts or Floating UI. */
  --an-tip-bg: var(--an-overlay);
  --an-tip-border: var(--an-border-strong);
  --an-tip-radius: var(--an-radius-md);
  --an-tip-shadow: var(--an-shadow-3), var(--an-shadow-lip);
  --an-tip-pad-y: 8px;
  --an-tip-pad-x: 10px;
  --an-tip-max-w: 280px;
}

/* ---------- Recipe classes ------------------------------------------------
   Small, composable. Everything reads the tokens above, so a future
   re-skin edits :root only. */

/* The tooltip card. an-viz.js applies this class to Floating UI tooltips
   and mirrors the same numbers into the ECharts tooltip style. */
.an-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  max-width: var(--an-tip-max-w);
  padding: var(--an-tip-pad-y) var(--an-tip-pad-x);
  background: var(--an-tip-bg);
  border: 1px solid var(--an-tip-border);
  border-radius: var(--an-tip-radius);
  box-shadow: var(--an-tip-shadow);
  color: var(--an-ink);
  font-family: var(--an-font);
  font-size: var(--an-text-sm);
  line-height: 1.45;
  font-variant-numeric: var(--an-numeric);
  pointer-events: none;
  width: max-content;
}

.an-tip[hidden] {
  display: none;
}

/* Tooltip anatomy: kicker title, then value rows. Values lead, labels
   follow: the number is the strong element, the series name is secondary. */
.an-tip-title {
  margin: 0 0 4px;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  font-weight: 700;
  letter-spacing: var(--an-tracking-label);
  text-transform: uppercase;
}

.an-tip-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0;
}

/* Series key: a short stroke of the series color, not a filled box. */
.an-tip-key {
  flex: none;
  align-self: center;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.an-tip-label {
  color: var(--an-ink-2);
  font-size: var(--an-text-xs);
}

.an-tip-value {
  margin-left: auto;
  color: var(--an-ink);
  font-size: var(--an-text-sm);
  font-weight: 700;
  font-variant-numeric: var(--an-numeric);
}

/* Card and stat-tile chrome for analytics panels. */
.an-card {
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-lg);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
}

.an-card-title {
  margin: 0;
  color: var(--an-ink);
  font-size: var(--an-text-lg);
  font-weight: 700;
}

.an-kicker {
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  font-weight: 700;
  letter-spacing: var(--an-tracking-label);
  text-transform: uppercase;
}

.an-stat {
  color: var(--an-ink);
  font-size: var(--an-text-stat);
  font-weight: 800;
  line-height: var(--an-leading-tight);
  font-variant-numeric: var(--an-numeric);
}

.an-stat-delta-up {
  color: var(--an-pos);
  font-variant-numeric: var(--an-numeric);
}

.an-stat-delta-down {
  color: var(--an-neg);
  font-variant-numeric: var(--an-numeric);
}

/* Shared focus treatment for any interactive analytics chrome. */
.an-focusable:focus-visible {
  outline: none;
  box-shadow: var(--an-focus-ring);
}

/* Reduced motion: floating layers appear and disappear instantly. Content
   and feedback never vanish, only the travel does. */
@media (prefers-reduced-motion: reduce) {
  .an-tip,
  .an-card {
    transition: none !important;
    animation: none !important;
  }
}

/* Promotion logos were removed on 2026-07-26: the owner reviewed them on
 * staging and they read badly here, so promotions render as their name.
 * The .promo-logo / .promo-badge / .promo-badge-name rules and the dark
 * backing plate that lived here went with them. Nothing else uses those
 * classes. The resolver and the normalized art are still on disk. */