/* HUNKAR design tokens: Hunkar Football's brand, as hunkar.football sets it.
   Black and white first. Hunkar Blue is "you and now" (focus, selection, progress,
   the clock, primary actions); Magma red, from the boot line, is only for the ball
   and the big moments (GOAL, LIVE, VS). Corners are square, as on the site; the
   slab keeps its 12 degree lean, the angle of the H! mark's stems.
   The component sheets read older variable names (--raat-ink, --genda-marigold,
   --rani-pink, --ink, --paper, --accent...): those stay, carrying Hunkar 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): White on Black 17.9:1, Grey on Black 7.0:1, Blue on Black 6.2:1,
   Black on Blue 6.3:1, Magma on Black 4.8:1, Black on Magma 4.8:1; White on Blue
   only 3.2:1 (never do that). */

:root {
  /* ---- Hunkar palette ---- */
  --hunkar-black: #0B0B0C;     /* menus, HUD panels, the app tile */
  --hunkar-night: #08080A;     /* the deepest ground, and type on Blue and Magma */
  --hunkar-white: #F4F4F6;     /* text, the mark and the wordmark on dark */
  --hunkar-grey: #9A9AA2;      /* secondary text, labels, inactive tabs (7.0:1 on black) */
  --hunkar-blue: #5B8CFF;      /* you and now: primary buttons, focus, the clock, your player */
  --hunkar-blue-deep: #1F5CF5; /* pressed blue, and Hunkar Blue on light grounds */
  --magma: #F0302B;            /* the ball, GOAL / LIVE / VS, badges. Never small text, never on grass */
  --magma-deep: #C81E1E;       /* pressed magma */

  /* ---- Surfaces: the black ramp ---- */
  --ink-2: #131317;            /* raised: cards, sheets, the squad list, pressed states */
  --ink-3: #1C1C21;            /* raised further: hover, selected rows */
  --ink-4: #2C2C33;            /* chips and tracks on raised surfaces */
  --pitch-ref: #2C7A3A;        /* reference grass for QA only: never a UI colour */
  --on-accent: var(--hunkar-night); /* text and icons on Blue (6.3:1) */
  --on-moment: var(--hunkar-night); /* text and icons on Magma (4.8:1) */
  --hud-panel: rgba(11, 11, 12, 0.92); /* black panel over the pitch */

  /* ---- The names the component sheets read, with Hunkar values ---- */
  --raat-ink: var(--hunkar-black);
  --genda-marigold: var(--hunkar-blue);
  --marigold-deep: var(--hunkar-blue-deep);
  --rani-pink: var(--magma);
  --rani-deep: var(--magma-deep);
  --on-rani: var(--on-moment);
  --haze: var(--hunkar-grey);
  --ink: var(--hunkar-black);
  --paper: var(--hunkar-white);
  --card: #F6F6F5;             /* light card (print, store art): hunkar.football's card */
  --stone: #E5E5E2;            /* light border / second light tone */
  --graphite: #80808A;         /* muted text, a step under Grey (5.0:1 on black, 4.7:1 on ink-2) */
  --steel: #4A4A52;            /* neutral bars, away legend, inactive fills */
  --accent: var(--hunkar-blue);
  --accent-deep: var(--hunkar-blue-deep);
  --danger: var(--magma);      /* errors and red-card moments */

  --night: var(--hunkar-black);
  --night-2: var(--ink-2);
  --panel: var(--hud-panel);
  --panel-solid: #101013;
  --line: rgba(244, 244, 246, 0.14);
  --chalk: var(--hunkar-white);
  --muted: var(--haze);
  --crimson: var(--accent);    /* old accent name */
  --crimson-deep: var(--accent-deep);
  --gold: var(--hunkar-blue);  /* old highlight name */
  --grass: var(--pitch-ref);
  --good: #3DDC84;
  --warn: #FFD25E;             /* yellow-card and caution data */
  --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, the H! stems' angle) and square corners.
     hunkar.football has no rounding and no chamfers, so the kick cut is zero: every
     shape built from it resolves to a clean rectangle. ---- */
  --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: 0px;
  --kick-m: 0px;
  --kick-l: 0px;
  --clip-kick: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --radius: 0px;
  --hit: 48px;                /* minimum hit area */
  --gap: 12px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  --sticker-keyline: 3px;     /* sticker cards (rewards, collectibles, shop only): black keyline */
  --sticker-drop: 4px 5px 0 var(--raat-ink); /* and a hard black 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): Hunkar Football's, vectorised from the official files.
     The mark is taller than wide (652 x 963): size it by height, or with contain. ---- */
  --logo-mark: url('../assets/brand/hunkar-mark.svg');            /* the white H!, for dark grounds */
  --logo-mark-color: url('../assets/brand/hunkar-mark.svg');      /* a monochrome brand: badges use the white mark */
  --logo-mark-ink: url('../assets/brand/hunkar-mark-ink.svg');    /* for light grounds */
  --logo-mark-small: url('../assets/brand/hunkar-mark.svg');      /* vector, so it holds at 24 px and under */
  --logo-wordmark: url('../assets/brand/hunkar-wordmark.svg');    /* HUNKAR, 842 x 158 */
  --logo-wordmark-ink: url('../assets/brand/hunkar-wordmark-ink.svg');
  --logo-lockup: url('../assets/brand/hunkar-lockup.svg');        /* H! HUNKAR, 3754 x 963 */
  --logo-lockup-ink: url('../assets/brand/hunkar-lockup-ink.svg');
  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 component-sheet rules that hard-code surfaces or put text on
   the accent. Text on Hunkar Blue is black (--on-accent: white on it is only 3.2:1),
   surfaces take the black ramp and glows take Hunkar Blue.
   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 black ramp itself, delete its selectors here. */
html .hf-menu {
  --ink-2: #131317;
  --ink-3: #1C1C21;
  --ink-4: #2C2C33;
  --line-2: rgba(244, 244, 246, 0.22);
}
html .hf-touch { --glow: rgba(91, 140, 255, 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: Magma, with black text. */
html .hf-menu .hf-live__tag {
  background: var(--rani-pink);
  color: var(--on-rani);
}

/* The scorebug's brand cell: the white H! on black, sized by its height (the mark is tall). */
html .hf-hud .hf-sb__brand {
  background: var(--logo-mark-color) center / auto 64% no-repeat, var(--raat-ink);
}

/* Glows and tints in Hunkar Blue. */
html .hf-hud .hf-aim__dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px rgba(91, 140, 255, 0.3); }
html .hf-hud .hf-aim__dive { background: rgba(91, 140, 255, 0.5); }
html .hf-menu--kbd .hf-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.4); }
html .hf-menu .hf-table tr.is-user td { background: rgba(91, 140, 255, 0.14); }

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