/* ============================================================
   VULU — Design Tokens + Shell
   Dark-first, flat, restrained. Color only when it means something.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Canvas & surfaces — neutral black/gray (no green cast) */
  --bg:        #040404;
  --surface:   #0A0A0A;
  --raised:    #141414;
  --raised-2:  #1A1A1A;
  --border:    #272727;
  --divider:   #272727;

  /* Text — neutral white/gray */
  --text:      #F6F7F6;
  --text-2:    #ABABAB;
  --muted:     #9A9A9A;

  /* Accents — semantic only */
  /* Green is a SEMANTIC status color again (online presence, cash, success).
     Backgrounds/surfaces are neutral black; green-tint/line stay neutral so
     there are no green panel backgrounds. */
  --green:     #4ADE80; /* online / cash / success (status only) */
  --blue:      #3B82F6; /* watching a live */
  --green-ink: #032012; /* dark text on green */
  --green-tint:rgba(255,255,255,0.12); /* neutral — no green backgrounds */
  --green-line:rgba(255,255,255,0.30); /* neutral — no green backgrounds */
  --purple:    #C77DFF; /* gems / premium — matches --gem + the liquid-glass value so it's stable regardless of load order */
  --gold:      #F2D24A; /* leaderboard / rewards */
  --red:       #FF4458; /* LIVE / danger */
  --grey-dot:  #94A3B8; /* neutral status */

  /* Inputs */
  --input-bg:  #090909;

  /* Neutral fills */
  --fill:      rgba(255,255,255,0.04);
  --fill-hover:rgba(255,255,255,0.07);

  /* Radii */
  --r-card:    14px;
  --r-ctl:     10px;
  --r-pill:    999px;

  /* Type */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Motion — premium ease-out, no bounce */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  200ms;

  /* Layout metrics */
  --rail-w:    72px;
  --sidebar-w: 280px;
  --rightpanel-w: 320px;
  --topbar-h:  60px;
  --tabbar-h:  64px;
  --main-max:  860px;
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

button { font-family: inherit; }

/* Universal focus ring — green, always visible, keyboard-driven */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--green-tint); color: var(--text); }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--raised-2);
  border-radius: 999px;
  border: 3px solid var(--bg);
}
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}