/* ==========================================================================
   Bingo Again — design tokens
   Dark chrome, crimson accent. Every colour used by the app resolves to a
   token here so the palette can be retuned in one place.
   ========================================================================== */

:root {
  /* Base surfaces — deep neutral with a faint warm cast */
  --bg-root:        #0a0608;
  --bg-shell:       #120a0d;
  --bg-panel:       #1a0e12;
  --bg-panel-2:     #231216;
  --bg-raised:      #2b161b;
  --bg-inset:       rgba(10, 6, 8, 0.48);

  /* Crimson accent ramp */
  --red-50:         #ffe9ec;
  --red-200:        #ff9aa6;
  --red-300:        #ff6b7d;
  --red-400:        #f8394f;
  --red-500:        #e11d34;
  --red-600:        #bd1328;
  --red-700:        #8f0c1d;
  --red-900:        #4a0510;

  --accent:         var(--red-400);
  --accent-strong:  var(--red-500);
  --accent-soft:    rgba(248, 57, 79, 0.14);
  --accent-line:    rgba(248, 57, 79, 0.42);
  --accent-glow:    rgba(225, 29, 52, 0.30);

  /* Secondary glow — warm amber, used sparingly opposite the crimson */
  --ember:          #ff8a3d;
  --ember-glow:     rgba(255, 138, 61, 0.20);

  /* Text */
  --text:           #fdf3f4;
  --text-muted:     #d4a8ae;
  --text-dim:       #9a7278;
  --text-faint:     #6d4d53;

  /* Status */
  --win:            #22c55e;
  --win-soft:       rgba(34, 197, 94, 0.14);
  --loss:           #ef4444;
  --loss-soft:      rgba(239, 68, 68, 0.14);
  --warn:           #f5a524;
  --warn-soft:      rgba(245, 165, 36, 0.13);

  /* Lines & elevation */
  --line:           rgba(255, 154, 166, 0.13);
  --line-strong:    rgba(255, 154, 166, 0.24);
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:      0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:      0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-accent:  0 8px 32px rgba(225, 29, 52, 0.28);

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

  /* Type */
  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 140ms;
  --med:  260ms;
}

/* The app is dark by design. A light preference only softens the backdrop
   slightly rather than inverting a trading UI that must stay legible. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg-root:  #0d080a;
    --bg-shell: #150c0f;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg-root);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Ambient field behind the whole shell */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(225, 29, 52, 0.20), transparent 62%),
    radial-gradient(900px 520px  at 92% 8%,   rgba(255, 138, 61, 0.10), transparent 58%),
    radial-gradient(760px 520px  at 50% 104%, rgba(143, 12, 29, 0.22), transparent 62%);
}

/* Faint grid, echoing a market chart */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.30;
  background-image:
    linear-gradient(rgba(255, 154, 166, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 154, 166, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 78%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--red-300); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 154, 166, 0.16);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 154, 166, 0.30); background-clip: content-box; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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


/* ---- Light theme ----------------------------------------------------- */
:root[data-theme="light"] {
  --bg-root:        #f6f1f2;
  --bg-shell:       #ffffff;
  --bg-panel:       #ffffff;
  --bg-panel-2:     #fbf5f6;
  --bg-raised:      #ffffff;
  --bg-inset:       rgba(225, 29, 52, 0.05);
  --text:           #22090e;
  --text-muted:     #5b3a41;
  --text-dim:       #8a666c;
  --text-faint:     #b59ca0;
  --win:            #15803d;
  --win-soft:       rgba(34, 197, 94, 0.14);
  --loss:           #dc2626;
  --loss-soft:      rgba(239, 68, 68, 0.12);
  --warn:           #d97706;
  --warn-soft:      rgba(245, 165, 36, 0.16);
  --line:           rgba(225, 29, 52, 0.14);
  --line-strong:    rgba(225, 29, 52, 0.28);
  --accent-soft:    rgba(225, 29, 52, 0.09);
  --accent-line:    rgba(225, 29, 52, 0.38);
  --shadow-sm:      0 1px 2px rgba(60, 10, 20, 0.08);
  --shadow-md:      0 8px 24px rgba(60, 10, 20, 0.10);
  --shadow-lg:      0 24px 60px rgba(60, 10, 20, 0.16);
  --shadow-accent:  0 8px 24px rgba(225, 29, 52, 0.22);
  color-scheme: light;
}