/* ============================================================
   tokens.css
   The single source of truth for colour, shape, motion and depth.

   THEME LOCK  : dark only, by brief (black and white gradient).
   ACCENT LOCK : the page is pure monochrome. The only colour is the
                 Discord presence dot, which carries real semantic state.
   SHAPE RULE  : card 20px, inner panels 14px, interactive elements pill.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#08090a;
  --surface:rgba(255,255,255,.048);
  --surface-2:rgba(255,255,255,.028);
  --surface-solid:#141518;      /* reduced-transparency fallback */
  --bubble-bg:#2b2d31;          /* solid chat balloon fill */
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);

  /* text (all pass WCAG AA against --bg) */
  --text:#f4f5f6;
  --text-dim:#9ba0a6;
  --text-faint:#767b81;

  /* semantic presence state, not decoration */
  --online:#23a55a;
  --idle:#f0b232;
  --dnd:#f23f43;
  --offline:#80848e;

  /* shape */
  --r-card:20px;
  --r-inner:14px;
  --r-art:10px;
  --r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-fast:.3s;
  --dur-mid:.45s;
  --dur-slow:.85s;

  /* depth. The bloom must sit UNDER the canvas: both used to share
     z-index 0, and since the bloom comes later in the DOM it painted
     straight over the particles and hid them completely. */
  --z-bloom:0;
  --z-field:1;
  --z-page:10;
  --z-grain:40;
  --z-gate:50;

  /* rhythm */
  --pad-x:clamp(1.15rem,4vw,1.6rem);

  /* avatar geometry. The decoration frame derives from --avatar-size,
     so changing one value keeps everything aligned.

     TUNING THE DECORATION. Discord's preset frames are 1.25 times the
     avatar, which is the default below and should be right for most
     assets. A few are drawn with extra padding or deliberately off
     centre, so these three values exist:
       --deco-scale  bigger number = looser frame
       --deco-x      positive moves the frame right
       --deco-y      positive moves the frame down
     Nudge in 0.02 and 1px steps. If changing --deco-scale appears to
     do nothing, check that `.deco` in card.css still carries
     `max-width:none`: without it `img{max-width:100%}` from base.css
     pins the frame at avatar size and swallows the whole setting. */
  --avatar-size:96px;
  --avatar-ring:5px;
  --deco-scale:1.2;
  --deco-x:0px;
  --deco-y:0px;
}