/* TAKKAR! design tokens.
   Raat Ink "night match" base, Genda Marigold for "you and now" (focus, selection,
   progress, the clock, primary actions), Rani pink only for the ball and the big
   moments (GOAL, LIVE, VS), Chalk text. The older variable names (--ink, --paper,
   --accent, --crimson, --gold...) are kept with TAKKAR! values, so style.css, hud.css
   and controls.css pick the brand up unchanged.
   The self-hosted OFL fonts (assets/brand/fonts/fonts.css) are linked by index.html,
   not imported here, so they download in parallel with this sheet.
   Contrast (WCAG): Chalk on Ink 16.5:1, Marigold on Ink 9.9:1, Ink on Marigold 9.9:1,
   Haze on Ink 7.4:1, Rani on Ink 5.3:1, Chalk on Marigold only 1.7:1 (never do that). */

:root {
  /* ---- TAKKAR! palette (brand names) ---- */
  --raat-ink: #17123B;        /* night-match indigo: menus, HUD panels, app tile, sticker keyline */
  --ink-2: #251E57;           /* raised: cards, sheets, the squad list, pressed states */
  --ink-3: #2F2769;           /* raised further: hover, selected rows */
  --ink-4: #3B3280;           /* chips and tracks on raised surfaces */
  --genda-marigold: #FFB400;  /* hero: wordmark face, primary buttons, clock, selected player */
  --marigold-deep: #E89F00;   /* pressed marigold */
  --rani-pink: #FF3D7F;       /* the ball, GOAL / LIVE / VS, badges. Never small text, never on grass */
  --rani-deep: #E0306C;       /* pressed rani */
  --haze: #A9A3CC;            /* secondary text, labels, inactive tabs, dividers (7.4:1 on ink) */
  --pitch-ref: #2C7A3A;       /* reference grass for QA only: never a UI colour */
  --on-accent: #17123B;       /* text and icons on Marigold (9.9:1) */
  --on-rani: #17123B;         /* text and icons on Rani (5.3:1) */
  --hud-panel: rgba(23, 18, 59, 0.92); /* ink panel over the pitch */

  /* ---- Older names, TAKKAR! values ---- */
  --ink: var(--raat-ink);
  --paper: #FFF6E6;           /* was white: the UI uses it as primary text on dark, so it is Chalk */
  --card: #FBF0DC;            /* light card (print, store art) */
  --stone: #E9DFC9;           /* light border / second light tone */
  --graphite: #938DBF;        /* muted text, a step under Haze (5.7:1 on ink, 4.9:1 on ink-2) */
  --steel: #6E6898;           /* neutral bars, away legend, inactive fills */
  --accent: var(--genda-marigold);
  --accent-deep: var(--marigold-deep);
  --danger: #FF5A4E;          /* errors and red-card moments; kept clear of Rani (5.8:1 on ink) */

  --night: var(--raat-ink);
  --night-2: var(--ink-2);
  --panel: var(--hud-panel);
  --panel-solid: #1D1749;
  --line: rgba(255, 246, 230, 0.14);
  --chalk: #FFF6E6;
  --muted: var(--haze);
  --crimson: var(--accent);   /* old accent name */
  --crimson-deep: var(--accent-deep);
  --gold: var(--genda-marigold); /* old highlight name */
  --grass: var(--pitch-ref);
  --good: #3DDC84;
  --warn: #FFD25E;            /* yellow-card and caution data, lighter than Marigold */
  --bad: var(--danger);

  /* ---- Type: Anek Bangla (display), Hind Siliguri (UI), Barlow Condensed (numbers),
     Baloo Da 2 (shouts). Latin and Bangla share one voice in each role. ---- */
  --font-display: 'Anek Bangla', 'Hind Siliguri', -apple-system, 'Segoe UI', Roboto, 'Noto Sans Bengali', 'Noto Sans', Arial, sans-serif;
  --font-ui: 'Hind Siliguri', -apple-system, 'Segoe UI', Roboto, 'Noto Sans Bengali', 'Noto Sans', Arial, sans-serif;
  --font-num: 'Barlow Condensed', 'Anek Bangla', 'Hind Siliguri', 'Arial Narrow', Arial, sans-serif; /* Bengali digits fall through to Anek Bangla */
  --font-shout: 'Baloo Da 2', 'Anek Bangla', 'Hind Siliguri', sans-serif; /* GOAL! / গোল!, rewards, stickers only */
  --num-features: 'tnum' 1;   /* tabular figures: the clock and score never jitter */
  --display-weight: 800;
  --display-tracking: 0.02em; /* Latin uppercase only; Bangla is never uppercased or tracked */
  --display-stretch: 87.5%;   /* 75% for the tightest headers (font-stretch: condensed) */
  --label-size: 12px;
  --label-weight: 600;
  --label-tracking: 0.14em;
  --body-size: 15px;
  /* Phone type floor: labels and meta never drop under 11 px, body under 13 px. */
  --label-size-phone: 11px;
  --label-tracking-phone: 0.12em;
  --meta-size-phone: 11px;
  --body-size-phone: 13px;
  --body-line: 1.35;

  /* ---- Shape: the slab (12 degree lean) and the 45 degree kick cut ---- */
  --slant: -12deg;            /* transform: skewX(var(--slant)) on slabs and Latin display lines */
  --slant-tan: 0.2126;        /* horizontal run per unit of height for a 12 degree lean */
  --kick-s: 8px;              /* kick-cut chamfer on the top-right corner: chips */
  --kick-m: 14px;             /* buttons and cards */
  --kick-l: 24px;             /* hero cards and panels */
  --clip-kick: polygon(0 0, calc(100% - var(--kick-m)) 0, 100% var(--kick-m), 100% 100%, 0 100%);
  --radius: 6px;              /* touch targets only; the app tile and avatar chips are the only round shapes */
  --hit: 48px;                /* minimum hit area */
  --gap: 12px;
  --shadow: 0 12px 32px rgba(8, 5, 28, 0.5);
  --sticker-keyline: 3px;     /* sticker cards (rewards, collectibles, shop only): ink keyline */
  --sticker-drop: 4px 5px 0 var(--raat-ink); /* and a hard ink drop */

  /* ---- Motion: the HUD stops exactly, menus and celebrations bounce ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* fast start, exact stop: HUD and general UI */
  --ease-bounce: cubic-bezier(0.2, 1.4, 0.4, 1); /* "street bounce": menu enters, rewards, the ball-dot */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);       /* exits */
  --dur-fast: 160ms;
  --dur-mid: 260ms;
  --dur-slow: 450ms;
  --dur-exit: 120ms;

  /* ---- Logos (assets/brand) ---- */
  --logo-mark: url('../assets/brand/mark.webp');                   /* chalk T!, Rani ball, 1000x1000 */
  --logo-mark-color: url('../assets/brand/mark-color.webp');       /* Marigold T!, Rani ball */
  --logo-mark-ink: url('../assets/brand/mark-ink.webp');           /* Ink T!, for light grounds */
  --logo-mark-small: url('../assets/brand/mark-small.svg');        /* 24 px drawing: badges, 24 px and under */
  --logo-wordmark: url('../assets/brand/wordmark.webp');           /* chalk TAKKAR!, 1200 wide */
  --logo-wordmark-color: url('../assets/brand/wordmark-color.webp');
  --logo-wordmark-ink: url('../assets/brand/wordmark-ink.webp');
  --logo-wordmark-sticker: url('../assets/brand/wordmark-sticker.webp'); /* hero */
  --logo-wordmark-bangla: url('../assets/brand/wordmark-bangla.webp');   /* টক্কর! */
  --logo-lockup: url('../assets/brand/lockup-horizontal.webp');
  --logo-lockup-stacked: url('../assets/brand/lockup-stacked.webp');

  /* ---- Sponsor: ই-ঠিকানা (eThikana), assets/sponsors/ethikana. Its colours belong to its
     artwork only (Blue on light, Night Blue on dark), never to TAKKAR!'s own UI. Use the
     drawn art for the name; the Latin name is never upper-cased (no text-transform). ---- */
  --sponsor-blue: #2B5CF5;
  --sponsor-night-blue: #5B80FF;
  --sponsor-night: #07080B;
  --sponsor-fog: #EDEDF0;
  --sponsor-mark: url('../assets/sponsors/ethikana/logo/mark-on-dark.svg');               /* 30:44 */
  --sponsor-lockup: url('../assets/sponsors/ethikana/logo/lockup-bn-on-dark.svg');        /* 4.70:1, 22 px tall minimum */
  --sponsor-lockup-latin: url('../assets/sponsors/ethikana/logo/lockup-latin-on-dark.svg'); /* 6.47:1, 16 px tall minimum */
  --sponsor-lockup-stacked: url('../assets/sponsors/ethikana/logo/lockup-stacked-bn-on-dark.svg'); /* 1.48:1, 50 px minimum */
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-bounce: var(--ease-out); /* bounces become plain eases; pair with fades in components */
    --dur-slow: 260ms;
  }
}

/* ------------------------------------------------------------------------------------
   Compatibility layer for the component sheets written before the rebrand. Their accent
   was a dark blue, so several rules put --paper (now Chalk) text on --accent (now
   Marigold): 1.7:1, unreadable. These rules put Ink on it instead, swap the leftover
   hard-coded blues for Marigold, and give the menu's local grey ramp the indigo ramp.
   The `html` prefix only raises specificity so these win over the component sheets
   loaded after this one. Owners of style.css, hud.css and controls.css: once a sheet
   uses --on-accent and the indigo surfaces itself, delete its selectors here. */
html .hf-menu {
  --ink-2: #251E57;
  --ink-3: #2F2769;
  --ink-4: #3B3280;
  --line-2: rgba(255, 246, 230, 0.22);
}
html .hf-touch { --glow: rgba(255, 180, 0, 0.55); }

html .hf-touch .hf-touch__btn.is-down .hf-touch__key,
html .hf-touch .hf-touch__btn.is-latched .hf-touch__face,
html .hf-hud .hf-sb__added,
html .hf-hud .hf-wl--rcv .hf-wl__num,
html .hf-hud .hf-aim.is-curl .hf-aim__curl,
html .hf-menu .hf-tag--you,
html .hf-menu--kbd .hf-btn--primary:focus,
html .hf-menu--kbd .hf-step__value:focus,
html .hf-menu--kbd .hf-rail__item--primary:focus,
html .hf-menu .hf-pc__cap,
html .hf-menu .hf-pc__label,
html .hf-menu .hf-tile__flag,
html .hf-menu--kbd .hf-tile--primary:focus,
html .hf-menu .hf-ticker__tag,
html .hf-menu--kbd .hf-hero:focus .hf-hero__cta,
html .hf-menu .hf-hero:hover .hf-hero__cta,
html .hf-menu .hf-mini__cap,
html .hf-menu .hf-benchp.is-picked,
html .hf-menu .hf-pick__cap,
html .hf-menu .hf-pick__tag {
  color: var(--on-accent);
}

/* LIVE is a big moment: Rani, with Ink text. */
html .hf-menu .hf-live__tag {
  background: var(--rani-pink);
  color: var(--on-rani);
}

/* The scorebug's brand cell is the mark badge on Ink (the chalk mark on Marigold would vanish). */
html .hf-hud .hf-sb__brand {
  background: var(--logo-mark-color) center / 58% no-repeat, var(--raat-ink);
}

/* Hard-coded blues from before the rebrand. */
html .hf-hud .hf-aim__dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px rgba(255, 180, 0, 0.3); }
html .hf-hud .hf-aim__dive { background: rgba(255, 180, 0, 0.5); }
html .hf-menu--kbd .hf-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255, 180, 0, 0.4); }
html .hf-menu .hf-table tr.is-user td { background: rgba(255, 180, 0, 0.14); }

/* BEGIN neutral remap (generated from the component sheets on 2026-10-22) */
/* The old hard-coded near-black surfaces, re-declared in Raat Ink / Ink 2 with the same alpha. */
/* css/style.css */
html .hf-menu {
  --ink-2: #251E57;
  --ink-3: #2F2769;
  --ink-4: #3B3280;
}
html .hf-menu__shade {
  background: rgba(23, 18, 59, 0.86);
}
html .hf-menu--title .hf-menu__shade {
  background: linear-gradient(180deg, rgba(23, 18, 59, 0.7) 0%, rgba(23, 18, 59, 0.35) 40%, rgba(23, 18, 59, 0.82) 100%);
}
html .hf-menu--main .hf-menu__shade {
  background: linear-gradient(90deg, rgba(23, 18, 59, 0.9) 0%, rgba(23, 18, 59, 0.72) 55%, rgba(23, 18, 59, 0.6) 100%);
}
html .hf-menu--pause .hf-menu__shade,
html .hf-menu--halftime .hf-menu__shade,
html .hf-menu--fulltime .hf-menu__shade,
html .hf-menu--versus .hf-menu__shade,
html .hf-menu--champion .hf-menu__shade {
  background: rgba(23, 18, 59, 0.95);
}
html .hf-menu--pause .hf-menu__shade {
  background: rgba(23, 18, 59, 0.9);
}
html .hf-menu .hf-panel {
  background: rgba(37, 30, 87, 0.92);
}
html .hf-menu .hf-back {
  background: rgba(23, 18, 59, 0.6);
}
html .hf-menu .hf-btn {
  background: rgba(23, 18, 59, 0.7);
}
html .hf-menu .hf-cyc {
  background: rgba(23, 18, 59, 0.7);
}
html .hf-menu .hf-step__value .hf-cyc__pips i {
  background: rgba(23, 18, 59, 0.18);
}
html .hf-menu .hf-badge.hf-badge > b {
  background: rgba(23, 18, 59, 0.82);
}
html .hf-menu .hf-pc--common {
  --pc-bg: #2F2769;
}
html .hf-menu .hf-pc--elite .hf-pc__attrs {
  border-top-color: rgba(23, 18, 59, 0.14);
}
html .hf-menu .hf-title__scrim {
  background: radial-gradient(closest-side, rgba(23, 18, 59, 0.62) 0, rgba(23, 18, 59, 0.55) 50%, rgba(23, 18, 59, 0) 100%);
}
html .hf-menu .hf-live {
  background: rgba(23, 18, 59, 0.72);
}
html .hf-menu .hf-tile {
  background: rgba(37, 30, 87, 0.92);
}
html .hf-menu .hf-ticker {
  background: rgba(23, 18, 59, 0.94);
}
html .hf-menu .hf-side {
  background: rgba(37, 30, 87, 0.94);
}
html .hf-menu .hf-mini--common {
  --mini-bg: #2F2769;
}
html .hf-menu .hf-pick--common {
  background: #2F2769;
}
html .hf-menu .hf-tdiag__pause path {
  fill: rgba(23, 18, 59, 0.6);
}
html .hf-menu .hf-tdiag__base {
  fill: rgba(23, 18, 59, 0.4);
}
html .hf-menu .hf-tdiag__disc {
  fill: rgba(23, 18, 59, 0.55);
}
html .hf-menu .hf-tdiag__btn--b .hf-tdiag__disc {
  fill: rgba(23, 18, 59, 0.7);
}
html .hf-menu .hf-guide__card {
  background: rgba(37, 30, 87, 0.92);
}
html .hf-menu .hf-confirm {
  background: rgba(23, 18, 59, 0.76);
}
/* css/hud.css */
html .hf-hud {
  --plate: rgba(23, 18, 59, 0.9);
  --plate-solid: #17123B;
  --home-on: #17123B;
  --away-on: #17123B;
}
html .hf-hud .hf-sb__progress {
  background: rgba(23, 18, 59, 0.7);
}
html .hf-hud .hf-wl__chip {
  background: rgba(23, 18, 59, 0.86);
}
html .hf-hud .hf-wl--rcv .hf-wl__chip {
  background: rgba(23, 18, 59, 0.7);
}
html .hf-hud .hf-arc__track {
  stroke: rgba(23, 18, 59, 0.72);
}
html .hf-hud .hf-arc__label {
  background: rgba(23, 18, 59, 0.8);
}
html .hf-hud .hf-call--penalty {
  background: rgba(23, 18, 59, 0.92);
}
html .hf-hud .hf-goal__band {
  background: rgba(23, 18, 59, 0.95);
}
html .hf-hud .hf-ban__panel {
  background: rgba(23, 18, 59, 0.94);
}
html .hf-hud .hf-st {
  background: rgba(23, 18, 59, 0.97);
}
html .hf-hud .hf-pw__track::after {
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(23, 18, 59, 0.6) calc(10% - 1px) 10%);
}
html .hf-hud .hf-rp__bar {
  background: rgba(23, 18, 59, 0.7);
}
html .hf-hud .hf-rp__skip {
  background: rgba(23, 18, 59, 0.6);
}
html .hf-hud .hf-lu {
  background: rgba(23, 18, 59, 0.93);
}
html .hf-hud.hf-hud--short .hf-lu {
  background: rgba(23, 18, 59, 0.95);
}
/* css/controls.css */
html .hf-touch {
  --glass: rgba(23, 18, 59, 0.5);
  --glass-hi: rgba(23, 18, 59, 0.64);
}
html .hf-touch .hf-touch__track {
  stroke: rgba(23, 18, 59, 0.55);
}
html .hf-touch .hf-touch__pause-chip::before {
  background: rgba(23, 18, 59, 0.78);
}
/* END neutral remap */