/* ==========================================================================
   VIEW — tokens.css
   The whole palette, in one place.

   The look is deliberate: near-black zinc, one white accent, hairline borders
   and mono figures — the same restraint usepaid.app uses, because VIEW makes
   the same kind of promise (fees accrue, payouts are recorded) and it should
   read as a ledger, not a casino. There is no light theme: a launchpad that
   shows trader figures in two palettes is a launchpad whose screenshots
   disagree with each other.
   ========================================================================== */

:root {
  /* surfaces — zinc, stepping up from the page */
  --bg: #09090b;
  --bg-2: #0f0f11;
  --panel: #131316;
  --panel-2: #18181b;
  --panel-3: #1f1f23;
  --line: #26262b;
  --line-2: #333339;

  /* ink */
  --ink: #fafafa;
  --ink-2: #d4d4d8;
  --muted: #a1a1aa;
  --dim: #71717a;
  --faint: #52525b;

  /* accent — white is the brand; the eye glows, nothing else does */
  --accent: #ffffff;
  --accent-ink: #09090b;
  --accent-soft: rgba(255, 255, 255, 0.08);
  --accent-line: rgba(255, 255, 255, 0.22);

  /* signal colours, used only for state, never for decoration */
  --ok: #4ade80;
  --ok-bg: rgba(74, 222, 128, 0.10);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.10);
  --err: #f87171;
  --err-bg: rgba(248, 113, 113, 0.10);

  /* type */
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* scale */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: clamp(40px, 7vw, 68px);

  /* shape — pills for actions, soft rounds for surfaces */
  --r-pill: 999px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;

  /* space */
  --gap: 16px;
  --wrap: 1120px;
  --wrap-narrow: 760px;

  /* elevation — borders do the work; shadows are for things that float */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-2: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 8px 28px -6px rgba(0, 0, 0, 0.65);

  --topbar-h: 60px;
  --side-w: 244px;
  --side-w-mini: 64px;
}