/* ══════════════════════════════════════
   COLORS & CSS VARIABLES
══════════════════════════════════════ */

:root {
  --app-bg:#08080d; --panel:#0f0f18; --panel-alt:#13131f; --border:#1c1c2e;
  --accent:#e63946; --accent2:#f4a261; --accent-glow:rgba(230,57,70,.15);
  --text:#f0f0f5; --dim:#7a7a8e; --dim2:#5a5a6e;
  --input:#141420; --iborder:#252538; --ifocus:#e63946;
  --r:10px; --r-lg:14px; --r-sm:7px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 8px 30px rgba(0,0,0,.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,.6);
  --glass:rgba(255,255,255,.03);
  --glass-border:rgba(255,255,255,.06);
  --transition-fast:.15s cubic-bezier(.4,0,.2,1);
  --transition-med:.25s cubic-bezier(.4,0,.2,1);
  --transition-slow:.4s cubic-bezier(.4,0,.2,1);

  /* Card reference width for font scaling */
  --card-ref-w: 480;
}

/* ── SELECTION ── */
::selection{background:var(--accent);color:#fff}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a2a3e;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#3a3a5e}

/* ── FOCUS VISIBLE ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:focus:not(:focus-visible){outline:none}