/* ==========================================================================
   COMBINE — design tokens
   Overrides NEON DRAFT's gold ramp with a hardwood-orange/court-white
   palette and adds CB-only tokens.
   Scoped to :root[data-app="combine"]; css/tokens.css is untouched.
   ========================================================================== */

:root[data-app="combine"] {

  /* --- Surfaces (warm-shifted hardwood black, overrides tokens.css) --- */
  --c-bg: #0a0806;
  --c-bg-deep: #060504;
  --c-panel: #111010;
  --c-panel-2: #171514;
  --c-panel-3: #1d1a18;
  --c-overlay: rgba(6, 4, 3, 0.84);

  /* --- Lines (overrides) --- */
  --c-line: #2a2523;
  --c-line-2: #383130;
  --c-line-strong: #4b4340;

  /* --- Court orange (gold ramp re-tinted to court orange so css/base.css
     components inherit the new accent) --- */
  --c-gold: #e2712c;
  --c-gold-bright: #ff9a4d;
  --c-gold-dim: #9a4a1c;
  --c-gold-deep: #4a2210;
  --c-gold-a10: rgba(226, 113, 44, 0.10);
  --c-gold-a20: rgba(226, 113, 44, 0.20);
  --c-gold-a35: rgba(226, 113, 44, 0.35);
  --c-prime: var(--c-gold);

  /* --- Text (overrides) --- */
  --c-text: #f6f2ec;
  --c-text-2: #b0a89e;
  --c-text-3: #746c64;
  --c-text-inv: #100a06;

  /* --- Status (overrides) --- */
  --c-ok: #4fc07f;
  --c-warn: #e2a53c;
  --c-bad: #e04a3d;

  /* --- Glows (overrides) --- */
  --glow-sm: 0 0 12px -4px var(--c-gold-a35);
  --glow-md: 0 0 22px -6px rgba(226, 113, 44, 0.55);
  --glow-lg: 0 0 46px -8px rgba(226, 113, 44, 0.45);

  /* --- CB accent aliases (semantic names for COMBINE-only CSS) --- */
  --cb-accent: var(--c-gold);
  --cb-accent-bright: var(--c-gold-bright);
  --cb-accent-dim: var(--c-gold-dim);
  --cb-accent-deep: var(--c-gold-deep);

  /* --- Court / material --- */
  --cb-line-white: #f2ece0;
  --cb-line-white-dim: #b8b0a2;
  --cb-hardwood: #1a120b;
  --cb-hardwood-2: #241809;
  --cb-leather: #c25c22;
  --cb-net: #e8e4dc;
  --cb-grain: rgba(226, 113, 44, 0.03);

  /* --- Skill category hues (referenced by string from js/combine-data.js,
     do not rename) --- */
  --cb-cat-shooting: #f2a93b;
  --cb-cat-finishing: #e2603a;
  --cb-cat-playmaking: #4fb6d8;
  --cb-cat-defense: #7d8fdc;
  --cb-cat-rebounding: #55c48c;
  --cb-cat-athleticism: #b57de0;
  --cb-cat-intangibles: #d9cdb6;

  /* --- Overall-rating tier colors (referenced by string from
     js/combine-ratings.js, do not rename). Orange ramp (98/90/--cb-accent)
     covers SUPERSTAR/ALL-STAR/STARTER; the muted ramp below (68/0) covers
     ROTATION/FRINGE (FRINGE now absorbs the old unreachable BENCH tier —
     see combine-ratings.js OVERALL_TIERS). STARTER paints --cb-accent
     directly so it is guaranteed to match. The muted ramp's floor is
     raised so every tier stays >=3:1 against --c-panel-2 (#171514) for the
     badge number / tier pill text — the original 68/0/fringe values
     computed as low as 1.38:1. --cb-tier-0 is pushed darker (was 22 levels
     off --cb-tier-68, indistinguishable at 10px chip size) so the two
     remaining bottom steps stay legible while holding >=3:1. --- */
  --cb-tier-98: #ffc47a;
  --cb-tier-90: #ff9a4d;
  --cb-tier-68: #948a7d;
  --cb-tier-0: #5c5348;

  /* --- Letter-grade colors (referenced by string from data.GRADE_COLORS
     in js/combine-ratings.js, do not rename). A Fortnite item-rarity ramp:
     F=Common(grey) D=Uncommon(green) C=Rare(blue) B=Epic(purple)
     A=Legendary(orange/gold) — deliberately distinct from the orange
     OVERALL_TIERS ramp above so the grade badge doesn't just repaint the
     same hue. --- */
  --cb-grade-f: #9099a3;
  --cb-grade-d: #4fd07a;
  --cb-grade-c: #4d9fff;
  --cb-grade-b: #b34dff;
  --cb-grade-a: #ffa62b;

  /* --- Archetype tag colors (referenced by string from data.ARCHETYPES[].tag
     in js/combine-data.js, do not rename): boost = net-positive archetype,
     flawed = net-negative, mixed = real tradeoff either way, legendary =
     the rarest, no-downside pulls (e.g. THE KING). --- */
  --cb-arch-boost: #55c48c;
  --cb-arch-flawed: #e2543a;
  --cb-arch-mixed: #b57de0;
  --cb-arch-legendary: #ffc94a;

  /* --- Attribute bar geometry --- */
  --cb-bar-h: 6px;
  --cb-bar-r: var(--r-xs);
  --cb-bar-track: #201c19;
  --cb-bar-track-2: #2a2522;

  /* --- Player card geometry --- */
  --cb-card-w: 340px;
  --cb-card-pad: var(--s-4);
  --cb-badge-size: 92px;
  --cb-headshot-h: 190px;

  /* --- Motion (spin-specific, layered on top of tokens.css's --dur*
     which stay as-is) --- */
  --cb-dur-spin: 1400ms;
  --cb-dur-land: 420ms;
  --cb-ease-spin: cubic-bezier(0.12, 0.8, 0.16, 1);
  --cb-ease-land: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Fonts (alias only; --font-display/--font-body/--font-mono are
     inherited from tokens.css) --- */
  --cb-font-num: var(--font-mono);
}

/* combine.html doesn't load pitch-base.css's [hidden] reset, and base.css's
   `img, svg, picture { display: block; }` author rule beats the UA
   stylesheet's default `[hidden] { display: none }` — without this, the
   hidden icon-sprite <svg> renders as a real 300x150 box at the top of
   every COMBINE screen. Scoped globally (not under [data-app="combine"])
   since [hidden] should never be visible regardless of app. */
[hidden] {
  display: none !important;
}

/* --- Legendary (grade A / Fortnite gold) shimmer + glow, shared by
   combine-card.css, combine-team.css, and combine-lineup.css so all three
   "grade A" surfaces read consistently. cb-legendary-sweep is a clipped
   diagonal highlight sweeping across a card; cb-legendary-pulse is a
   breathing gold glow for surfaces (like the tall reveal card) where
   clipping would fight a sticky-positioned child. --- */
@keyframes cb-legendary-sweep {
  0% {
    transform: translateX(-140%) skewX(-20deg);
  }
  55%, 100% {
    transform: translateX(220%) skewX(-20deg);
  }
}
@keyframes cb-legendary-pulse {
  0%, 100% {
    box-shadow: 0 0 14px -4px color-mix(in srgb, var(--cb-grade-a) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 28px 2px color-mix(in srgb, var(--cb-grade-a) 85%, transparent);
  }
}
/* Epic (grade B) — a slow, quiet radiating pulse, deliberately not the
   legendary sweep banner. Weaker spread/opacity than cb-legendary-pulse so
   it reads as a glimmer, not a glow. */
@keyframes cb-epic-pulse {
  0%, 100% {
    box-shadow: 0 0 5px -3px color-mix(in srgb, var(--cb-grade-b) 40%, transparent);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 14px 0px color-mix(in srgb, var(--cb-grade-b) 60%, transparent);
    filter: brightness(1.22);
  }
}