/* ============================================================
   01 — TOKENS
   Palette: NOVA

   Deep aubergine rather than void black, with a magenta → violet
   ramp running across it. The background is not neutral: there is
   purple in the black, so the accent sits IN the surface instead
   of on top of it. That is what stops a dark UI reading as a grey
   sheet with coloured stickers.

   The rule from the previous palette holds and matters more here,
   because magenta is closer to red than cyan was: the brand must
   never sit in the same hue family as profit or loss. Mint for up
   and a clearly orange-red coral for down are both kept well
   outside the ramp, and colour is never the only signal anywhere —
   a status is a dot plus a word, a direction is BUY/SELL text plus
   a colour.

   Controls are pill-shaped at this scale. A 999px radius on a
   segmented control and a 8px radius on a data panel is not
   inconsistency: one is a thing you press, the other is a thing
   you read, and the geometry says which is which before you look.
   ============================================================ */

:root{
  /* surfaces — aubergine, not black */
  --void:#0B0616;
  --deep:#120A22;
  --lift:#1A0F2E;
  --glass:rgba(255,255,255,.05);
  --glass-2:rgba(255,255,255,.085);
  --line:rgba(233,168,255,.14);
  --line-2:rgba(233,168,255,.08);

  /* text */
  --text:#F6ECFF;
  --dim:#B39EC9;
  --faint:#7C6A94;

  /* spectrum */
  --cyan:#FF4FD8;      /* hot magenta — the primary accent */
  --blue:#A855F7;      /* violet */
  --violet:#6D3BF5;    /* deep indigo-violet */
  /*  aliases, so anything written against the older names resolves */
  --magenta:#FF4FD8;
  --sky:#FF4FD8;
  --pink:#FF4FD8;
  --spectrum:linear-gradient(115deg,#FF4FD8 0%,#A855F7 48%,#6D3BF5 100%);
  --spectrum-soft:linear-gradient(115deg,rgba(255,79,216,.18),rgba(168,85,247,.15) 48%,rgba(109,59,245,.18));

  /* outcomes — outside the ramp on purpose, and now further outside it */
  --mint:#31E5A4;
  --rose:#FF6B5A;      /* pushed orange, away from the magenta ramp */
  --gold:#FFC93C;

  /* type */
  --display:"Outfit",system-ui,sans-serif;
  --ui:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"DM Mono","SFMono-Regular",ui-monospace,Menlo,monospace;

  /* geometry */
  --r-sm:6px;
  --r:12px;
  --r-lg:18px;
  --r-pill:999px;
  --side:236px;
  --row:38px;
  --pad:18px;
  --gap:22px;
  --maxw:1260px;
  /*  The app's content column. The marketing pages were contained and the
      signed-in pages were not, so a dashboard on a wide monitor stretched a
      four-column stat row across 2000px and put the first figure and the
      last one a head-turn apart.  */
  --appw:1180px;

  /* elevation is light, not shadow */
  --glow-blue:0 0 0 1px rgba(255,79,216,.34),0 18px 60px -22px rgba(255,79,216,.5);
  --glow-pink:0 0 0 1px rgba(255,79,216,.34),0 18px 60px -22px rgba(255,79,216,.5);
  --glow-soft:0 24px 70px -34px rgba(0,0,0,.9);
  --ring:0 0 0 3px rgba(255,79,216,.26);
}

html[data-theme="day"]{
  --void:#F4F6FC;
  --deep:#FFFFFF;
  --lift:#FFFFFF;
  --glass:rgba(255,255,255,.75);
  --glass-2:rgba(255,255,255,.9);
  --line:rgba(12,20,44,.12);
  --line-2:rgba(12,20,44,.06);
  --text:#0A1024;
  --dim:#4E5A78;
  --faint:#7C88A6;
  --cyan:#0092C4;
  --blue:#2352E0;
  --violet:#7040E8;
  --magenta:#2352E0;
  --sky:#0092C4;
  --spectrum:linear-gradient(115deg,#0092C4 0%,#2352E0 46%,#7040E8 100%);
  --spectrum-soft:linear-gradient(115deg,rgba(0,146,196,.14),rgba(35,82,224,.12) 46%,rgba(112,64,232,.14));
  --mint:#0E9A6B;
  --rose:#DB2A40;
  --gold:#B5750B;
  --glow-blue:0 0 0 1px rgba(35,82,224,.25),0 18px 50px -24px rgba(35,82,224,.4);
  --glow-soft:0 20px 50px -30px rgba(12,20,44,.35);
}