/* BMVP-THEME-OK — integrity sentinel, must stay line 1 */
/* ================================================================
   BATTLE MVP - theme.css
   Single source of colour tokens. MUST load before every other CSS.
   Dark is the default (:root). Light is opt-in via html[data-theme="light"].
   Rule for all page CSS: never hardcode a hex. Read a --bm-* token.
   ================================================================ */

:root{
  /* -- Surfaces -------------------------------------------------- */
  --bm-bg:#050b12;
  --bm-bg2:#080f18;
  --bm-bg0:#040810;
  --bm-card:#0c1218;
  --bm-card2:#0e1620;
  --bm-elev:#111b26;
  --bm-overlay:rgba(0,0,0,.55);
  --bm-hdr:#06111d;

  /* -- Washes: translucent fills. Lighten on dark, darken on light. */
  --bm-w1:rgba(255,255,255,.025);
  --bm-w0:rgba(255,255,255,.010);
  --bm-w2:rgba(255,255,255,.04);
  --bm-w3:rgba(255,255,255,.055);
  --bm-w4:rgba(255,255,255,.09);

  /* -- Hairlines ------------------------------------------------- */
  --bm-l1:rgba(255,255,255,.04);
  --bm-l2:rgba(255,255,255,.07);
  --bm-l3:rgba(255,255,255,.12);
  --bm-l4:rgba(255,255,255,.20);

  /* -- Text ------------------------------------------------------ */
  --bm-tx:#eaf1ff;
  --bm-ink-base:#eaf1ff;
  --bm-ink-rgb:234,241,255;
  --bm-wash-base:#ffffff;
  --bm-tx2:#c8dde9;
  --bm-mu:#7d8fa3;
  --bm-mu2:#4a6070;
  --bm-mu3:#1a2830;
  --bm-line:#1a2730;
  --bm-txt:#eaf1ff;

  /* -- Accent: green. -ink is for TEXT, plain is for FILL. ------- */
  --bm-acc:#00ffa6;
  --bm-acc-ink:#00ffa6;
  --bm-acc-dim:rgba(0,255,166,.12);
  --bm-acc-glow:rgba(0,255,166,.20);
  --bm-acc-bdr:rgba(0,255,166,.25);
  --bm-on-acc:#06231a;

  /* -- Accent: blue ---------------------------------------------- */
  --bm-blue:#5b7fff;
  --bm-blue-ink:#5b7fff;
  --bm-blue-dim:rgba(91,127,255,.12);
  --bm-blue-bdr:rgba(91,127,255,.25);

  /* -- Status ---------------------------------------------------- */
  --bm-live:#ff4444;
  --bm-live-ink:#ff4444;
  --bm-live-dim:rgba(255,68,68,.10);
  --bm-warn:#ffb800;
  --bm-warn-ink:#ffb800;
  --bm-off:#3a5060;
  --bm-gold:#ffd700;
  --bm-gold-ink:#ffd700;
  --bm-gold2:#e8b84b;
  --bm-gold2-ink:#e8b84b;
  --bm-gold2-dim:rgba(232,184,75,.10);

  /* -- Depth ----------------------------------------------------- */
  --bm-shadow:none;
  --bm-shadow-lg:0 4px 20px rgba(0,0,0,.45);
  --bm-shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --bm-shadow-xl:0 8px 40px rgba(0,0,0,.5);
  --bm-shadow-acc:0 0 20px rgba(0,255,166,.15);

  /* -- Media panels: photographic art stays on a dark plate in BOTH
        themes. Deliberate - the art assets are shot for black. ---- */
  --bm-media:#0c1218;
  --bm-media-tx:#eaf1ff;
  --bm-media-mu:#7d8fa3;
  --bm-media-line:rgba(255,255,255,.08);

  /* -- Header component ------------------------------------------ */
  --bm-hdr-line:rgba(0,255,166,.10);
  --bm-hdr-shadow:0 1px 0 rgba(0,255,166,.06), 0 4px 20px rgba(0,0,0,.45);
  --bm-hdr-search:rgba(255,255,255,.04);
  --bm-hdr-drop:#0a1826;
  --bm-cyan:#00d8ff;
  --bm-cyan-ink:#00d8ff;
}

/* ================================================================
   LIGHT
   ================================================================ */
html[data-theme="light"]{
  --bm-bg:#eef2f7;
  --bm-bg2:#f6f9fc;
  --bm-bg0:#e4e9f0;
  --bm-card:#ffffff;
  --bm-card2:#f9fbfd;
  --bm-elev:#ffffff;
  --bm-overlay:rgba(13,23,33,.35);
  --bm-hdr:#ffffff;

  --bm-w1:rgba(13,23,33,.025);
  --bm-w0:rgba(13,23,33,.018);
  --bm-w2:rgba(13,23,33,.040);
  --bm-w3:rgba(13,23,33,.055);
  --bm-w4:rgba(13,23,33,.090);

  --bm-l1:rgba(13,23,33,.06);
  --bm-l2:rgba(13,23,33,.10);
  --bm-l3:rgba(13,23,33,.16);
  --bm-l4:rgba(13,23,33,.26);

  --bm-tx:#0d1721;
  --bm-ink-base:#0d1721;
  --bm-ink-rgb:13,23,33;
  --bm-wash-base:#0d1721;
  --bm-tx2:#2b3a4a;
  --bm-mu:#59697b;
  --bm-mu2:#7b8b9c;
  --bm-mu3:#9aa8b6;
  --bm-line:rgba(13,23,33,.14);
  --bm-txt:#0d1721;

  /* #00ffa6 on white is ~1.3:1 - unreadable. Fill and ink split here. */
  --bm-acc:#00e39a;
  --bm-acc-ink:#00714c;
  --bm-acc-dim:rgba(0,180,120,.14);
  --bm-acc-glow:rgba(0,180,120,.22);
  --bm-acc-bdr:rgba(0,140,95,.35);
  --bm-on-acc:#06231a;

  --bm-blue:#4a6ef0;
  --bm-blue-ink:#2f4bc4;
  --bm-blue-dim:rgba(74,110,240,.12);
  --bm-blue-bdr:rgba(74,110,240,.30);

  --bm-live:#e0342f;
  --bm-live-ink:#b8241f;
  --bm-live-dim:rgba(224,52,47,.10);
  --bm-warn:#f0a500;
  --bm-warn-ink:#8a5600;
  --bm-off:#8496a6;
  --bm-gold:#e0b400;
  --bm-gold-ink:#8a6a00;
  --bm-gold2:#c99a2e;
  --bm-gold2-ink:#7a5a00;
  --bm-gold2-dim:rgba(180,140,40,.14);

  --bm-shadow:0 1px 2px rgba(13,23,33,.06);
  --bm-shadow-lg:0 8px 24px rgba(13,23,33,.10);
  --bm-shadow-sm:0 1px 3px rgba(13,23,33,.08);
  --bm-shadow-xl:0 12px 40px rgba(13,23,33,.14);
  --bm-shadow-acc:0 0 20px rgba(0,180,120,.18);

  --bm-hdr-line:rgba(13,23,33,.10);
  --bm-hdr-shadow:0 1px 0 rgba(13,23,33,.04), 0 4px 18px rgba(13,23,33,.08);
  --bm-hdr-search:rgba(13,23,33,.045);
  --bm-hdr-drop:#ffffff;
  --bm-cyan:#00b4d8;
  --bm-cyan-ink:#00708a;

  /* Light variants for brand.css tokens. brand.css loads last and
     wins :root, but [data-theme] outranks :root - so dark stays
     exactly as brand.css defines it and only light is overridden. */
  --bm-surface:#ffffff;
  --bm-surface-2:#f9fbfd;
  --bm-surface-3:#f2f6fa;
  --bm-border:rgba(13,23,33,.14);
  --bm-border-strong:rgba(13,23,33,.26);
  --bm-text:#0d1721;
  --bm-text-muted:#59697b;
  --bm-text-dim:#7b8b9c;
}

/* Colour transition on theme flip only - not on hover states. */
html.bm-theme-anim,
html.bm-theme-anim body{
  transition:background-color .18s linear, color .18s linear;
}