/* ============================================================
   ROBINTRADE — design tokens for the dashboard (/app).
   The homepage is the built SPA and does not load this file;
   these values mirror its palette (--xero-* in the build's
   stylesheet) so /app doesn't look like a different product.
   app.css depends on every token below.
   ============================================================ */
:root {
  --neon: #ccff00;                        /* brand accent — also the "up" colour */
  --neon-soft: rgba(204, 255, 0, 0.14);
  --ink: #1c180d;                         /* text on a neon fill */

  --bg: #0e0c08;                          /* warm near-black, same as the hero */
  --panel: #141109;
  --line: rgba(212, 208, 201, 0.12);

  --white: #ffffff;
  --bone: #d4d0c9;
  --dim: #8a8783;
  --faint: rgba(212, 208, 201, 0.42);
  --red: #ff3b30;
  --green: var(--neon);

  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --disp: var(--sans);
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--bone);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* wallet button — matches the homepage's .xero-btn-solid */
.btn-connect {
  background: var(--neon);
  color: var(--ink);
  border: 1px solid var(--neon);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  transition: 0.2s;
}
.btn-connect:hover { box-shadow: 0 6px 26px rgba(204, 255, 0, 0.32); }

/* position side badges */
.badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
}
.badge--long { background: var(--neon-soft); color: var(--neon); }
.badge--short { background: rgba(255, 59, 48, 0.14); color: var(--red); }
.badge--close { background: rgba(212, 208, 201, 0.1); color: var(--dim); }
.up { color: var(--neon); }
.down { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}