/* ============================================================
   DUELO — design tokens
   ============================================================ */
:root{
  /* ---- surface ramp (near-black, cool) ---- */
  --bg-0:#06070b;
  --bg-1:#0a0c12;
  --bg-2:#0f1219;
  --bg-3:#151924;
  --bg-4:#1c2130;

  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(255,255,255,.20);

  /* ---- ink ---- */
  --ink:#eef1f8;
  --ink-2:#b3bccd;
  --ink-3:#7c869a;
  --ink-4:#525b6d;

  /* ---- brand ---- */
  --accent:#5b8cff;
  --accent-2:#7c5cff;
  --hot:#ff4d6d;
  --warm:#ffb03a;
  --good:#3ddc97;
  --cool:#31d0ff;

  /* ---- player identity ---- */
  --p1:#31d0ff;
  --p1-deep:#0a5f7a;
  --p2:#ff5d7a;
  --p2-deep:#7a1f31;

  /* ---- geometry ---- */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  /* ---- type ---- */
  --font-display:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-ui:'Inter','SF Pro Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,'Menlo',monospace;

  /* ---- elevation ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 16px -4px rgba(0,0,0,.55);
  --sh-3:0 18px 50px -12px rgba(0,0,0,.75);
  --sh-glow:0 0 0 1px rgba(91,140,255,.35), 0 8px 40px -8px rgba(91,140,255,.45);

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:120ms;
  --t-mid:240ms;
  --t-slow:420ms;

  /* ---- layout ---- */
  --shell:1240px;
  --nav-h:64px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}