/* vq-tokens.css · nagad88.ing · FINAL design tokens (HOME_SPEC.md, 14.10.2026), linked LAST (after vq-fonts, vq-core, vq-ui, vq-home), so it wins.
   Source of the :root blocks: _design/vq-tokens.css; the Bengali typography below them is kept from the engine.
   Direction: deep indigo-violet ground (from the operator's blue-violet header gradient) + orange accent.
   Contrast (WCAG 2.x) is given against --vq-night / --vq-panel / --vq-ticket-b. */

:root {
  /* ── grounds and surfaces ── */
  --vq-night: #120A35;          /* page ground */
  --vq-night-2: #180F45;        /* alternating band */
  --vq-night-rgb: 18, 10, 53;
  --vq-well: #0B0626;           /* sunken: inputs, table heads */
  --vq-panel: #221760;          /* card */
  --vq-raise: #2C1E74;          /* raised card, hover */
  --vq-dusk: #26126E;           /* dark violet band / menu panel */
  --vq-ember: #33180D;          /* warm hint panel (notes) */
  --vq-ember-line: #7A3D12;
  --vq-c-wine: #2A1352;

  /* ── borders ── */
  --vq-line: #392B80;
  --vq-line-hi: #5544AE;
  --vq-line-ctl: #8E80D8;       /* control border: 5.6 night · 4.6 panel (>= 3) */

  /* ── text ── */
  --vq-ink: #F6F3FF;            /* 17.1 night · 14.1 panel · 9.1 ticket-b */
  --vq-ink-2: #D5CEF2;          /* 12.4 · 10.3 · 6.6 */
  --vq-ink-3: #B3A9DD;          /* 8.6 · 7.1 · not on the ticket */
  --vq-ink-4: #A69BD4;          /* 7.4 · 6.1 · not on the ticket */
  --vq-link: #FFC28A;           /* 11.9 · 9.8; always underlined */

  /* ── accent 1: operator blue-violet — fills, never text on dark ── */
  --vq-red: #4537D6;            /* white on it 7.6 */
  --vq-red-hi: #4F3FE6;         /* white 6.6 */
  --vq-red-deep: #3D2FCC;       /* white 8.5 */
  --vq-red-rgb: 69, 55, 214;
  --vq-royal: #4537D6;
  --vq-royal-rgb: 69, 55, 214;
  --vq-ticket-a: #1C2AA8;       /* hero receipt card, top (operator blue) */
  --vq-ticket-b: #4A1FB0;       /* hero receipt card, bottom (violet) */

  /* ── accent 2: orange — main button, amounts, accent text ── */
  --vq-flame: #FF8A1F;          /* text on night 7.9 · panel 6.6; on ticket 4.2 → button fill only */
  --vq-flame-hi: #FFA24D;       /* hover */
  --vq-flame-deep: #F07300;     /* pressed */
  --vq-flame-rgb: 255, 138, 31;
  --vq-on-flame: #1D0D00;       /* text on orange 8.0 · on hi 9.5 · on deep 6.5 */
  --vq-gold: #FFD27A;           /* amounts: 13.2 night · 10.9 panel · 7.0 ticket-b */

  /* ── states ── */
  --vq-ok: #157F3D;             /* white 5.1 */
  --vq-ok-hi: #5FD08A;          /* 9.7 night */
  --vq-alert: #FF8A80;          /* 8.2 night */
  --vq-amber: #FFB454;
  --vq-focus: #FFD27A;          /* 2 px outline + 2 px offset */

  /* ── category marks (engine keeps the names; home uses no ribbons) ── */
  --vq-cat-slot: #C2185B;       /* white 5.9 */
  --vq-cat-sport: #2F5FD6;      /* white 5.6 */
  --vq-cat-special: #6D3BD1;    /* white 6.6 */
  --vq-cat-vip: #E3B341;        /* dark text 9.7 */
  --vq-cat-new: #4537D6;        /* white 7.6 */

  /* ── ranks and colour marks (VIP table) ── */
  --vq-c-bronze: #E59A55;
  --vq-c-silver: #C3BDBB;
  --vq-c-cyan: #5FD6DE;
  --vq-c-blue: #7FB2FF;
  --vq-c-violet: #C3A6FF;

  /* ── band marker (HOME_SPEC: 4 px orange bar left of H2, no number chip) ── */
  --vq-mark-w: 4px;
  --vq-mark-c: var(--vq-flame);
  --vq-glow: radial-gradient(60% 70% at 85% 10%, rgba(69, 55, 214, 0.35), transparent 70%);
  --vq-perf: 2px dashed var(--vq-line-hi);   /* receipt tear line in the hero card */

  /* ── fonts (self-hosted in vq-fonts.css) ── */
  --vq-display: "Anek Bangla", "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI", "Vrinda", Tahoma, system-ui, sans-serif;
  --vq-text: "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI", "Vrinda", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vq-num: "Anek Bangla", "Hind Siliguri", Tahoma, system-ui, sans-serif;
  --vq-w-text: 400;
  --vq-w-strong: 600;
  --vq-w-head: 700;
  --vq-w-num: 700;

  /* ── sizes, >= 900 px (phone below); nothing under 16 px ── */
  --vq-fs-h1: 46px;   --vq-lh-h1: 1.4;
  --vq-fs-h2: 32px;   --vq-lh-h2: 1.4;
  --vq-fs-h3: 21px;   --vq-lh-h3: 1.45;
  --vq-fs-lead: 19px; --vq-lh-lead: 1.75;
  --vq-fs-body: 17px; --vq-lh-body: 1.75;
  --vq-fs-small: 16px; --vq-lh-small: 1.7;
  --vq-fs-tag: 16px;  --vq-lh-tag: 1.6;
  --vq-fs-btn: 17px;  --vq-lh-btn: 1.7;
  --vq-fs-num: 40px;  --vq-lh-num: 1.4;
  --vq-btn-h: 52px;
  --vq-measure: 760px;          /* max width of paragraphs (intro, body) */

  /* ── radii ── */
  --vq-r-pill: 10px;            /* buttons and inputs: rectangle, not a pill */
  --vq-r-card: 14px;
  --vq-r-tile: 10px;
  --vq-r-tag: 6px;
  --vq-r-ticket: 18px;
  --vq-r-round: 999px;

  /* ── shadows ── */
  --vq-sh-card: 0 1px 0 rgba(246, 243, 255, 0.05) inset, 0 12px 28px -18px rgba(0, 0, 0, 0.8);
  --vq-sh-raise: 0 18px 44px -20px rgba(0, 0, 0, 0.85);
  --vq-sh-ticket: 0 28px 60px -28px rgba(69, 55, 214, 0.65), 0 1px 0 rgba(255, 210, 122, 0.16) inset;
  --vq-sh-btn: 0 3px 0 #B85200;
  --vq-sh-btn-press: 0 1px 0 #B85200;

  /* ── grid and spacing ── */
  --vq-wrap: 1160px;
  --vq-gutter: 24px;
  --vq-col-gap: 24px;
  --vq-band-y: 72px;
  --vq-gmin: 240px;
  --vq-hero-card: 440px;        /* hero receipt column at >= 900 px */
  --vq-hero-gap: 48px;
  --vq-s1: 4px; --vq-s2: 8px; --vq-s3: 12px; --vq-s4: 16px; --vq-s5: 24px; --vq-s6: 32px; --vq-s7: 48px; --vq-s8: 72px;
  --vq-head-h: 68px;
}

@media (max-width: 899px) {
  :root {
    --vq-fs-h1: 28px;   --vq-lh-h1: 1.4;
    --vq-fs-h2: 24px;   --vq-lh-h2: 1.4;
    --vq-fs-h3: 19px;   --vq-lh-h3: 1.45;
    --vq-fs-lead: 16px; --vq-lh-lead: 1.7;
    --vq-fs-body: 16px; --vq-lh-body: 1.75;
    --vq-fs-btn: 16px;
    --vq-fs-num: 30px;
    --vq-btn-h: 48px;
    --vq-gutter: 16px;
    --vq-band-y: 44px;
    --vq-r-ticket: 14px;
    --vq-head-h: 56px;
    --vq-hero-card: 100%;
    --vq-hero-gap: 16px;
  }
}

/* ══ Bengali typography ══
   Matras above and below the line and conjunct ligatures need air: text >= 1.7, headings >= 1.35.
   Letter-spacing breaks ligatures, uppercase does not exist: both are off for the whole site. */
html:lang(bn) {
  font-family: var(--vq-text);
  font-size: var(--vq-fs-body);
  line-height: var(--vq-lh-body);
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html:lang(bn) body,
html:lang(bn) body * {
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-style: normal !important;
  hyphens: manual;
  -webkit-hyphens: manual;
}
html:lang(bn) body {
  word-break: normal;
  line-break: auto;
  overflow-wrap: break-word;
}
html:lang(bn) p,
html:lang(bn) li,
html:lang(bn) dd,
html:lang(bn) td,
html:lang(bn) th,
html:lang(bn) figcaption,
html:lang(bn) blockquote,
html:lang(bn) summary,
html:lang(bn) label {
  line-height: max(1.7, var(--vq-lh-body));
}
html:lang(bn) h1,
html:lang(bn) h2,
html:lang(bn) h3,
html:lang(bn) h4 {
  font-family: var(--vq-display);
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
  padding-block: 0.06em;
}
html:lang(bn) h1 { font-size: var(--vq-fs-h1); line-height: max(1.4, var(--vq-lh-h1)); }
html:lang(bn) h2 { font-size: var(--vq-fs-h2); line-height: max(1.4, var(--vq-lh-h2)); }
html:lang(bn) h3 { font-size: var(--vq-fs-h3); line-height: max(1.4, var(--vq-lh-h3)); font-weight: 600; }
html:lang(bn) h4 { line-height: 1.5; font-weight: 600; }
html:lang(bn) a[href^="/go/"],
html:lang(bn) button,
html:lang(bn) [role="button"],
html:lang(bn) summary {
  font-family: var(--vq-text);
  line-height: var(--vq-lh-btn);
  white-space: normal;
  text-wrap: balance;
}
html:lang(bn) [data-vq-num],
html:lang(bn) table td,
html:lang(bn) output,
html:lang(bn) time {
  font-variant-numeric: tabular-nums lining-nums;
}
html:lang(bn) :focus-visible {
  outline: 2px solid var(--vq-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html:lang(bn) *,
  html:lang(bn) *::before,
  html:lang(bn) *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}