/* ============================================================
   PIIPS — COLOR SYSTEM
   The world, in digital rain. Pure signal green on pure black.
   Base values + semantic aliases. Values taken from the
   Piips UI Figma usage inventory (not the polluted library tokens).
   ============================================================ */

:root {
  /* ---- Brand / signal -------------------------------------- */
  --piip-green:        #00FF00;   /* the wordmark, the pulse, digital rain  */
  --piip-green-600:    #15C215;   /* pressed / deeper green                 */
  --piip-green-100:    #BCFFB1;   /* soft green (audiomoji, glows)          */
  --piip-green-glow:   rgba(0,255,0,0.35);

  --piip-cyan:         #00FFFF;   /* secondary signal — links live, seen    */
  --piip-amber:        #FF9500;   /* channel names (p/...)                  */
  --piip-yellow:       #FFCC00;   /* highlights, badges                     */
  --piip-red:          #FF2C2C;   /* likes (filled heart), "me" bubbles     */
  --piip-violet:       #9747FF;   /* rare accent / pro flourish             */

  /* ---- Ink (black canvas → white text) --------------------- */
  --black:             #000000;   /* the void the rain falls through        */
  --grey-950:          #0A0A0A;
  --grey-900:          #0F0F0F;   /* near-black raised surface              */
  --grey-850:          #111111;   /* popups, sheets                         */
  --grey-800:          #1C1C1E;   /* cards                                  */
  --grey-750:          #1F1F22;   /* inputs, search, chips                  */
  --grey-700:          #2D2D2D;   /* elevated surface / brand canvas        */
  --grey-600:          #434343;   /* hairline borders, dividers             */
  --grey-500:          #595959;
  --grey-400:          #77787B;   /* secondary text                         */
  --grey-300:          #BCBCBC;   /* tertiary text / disabled               */
  --grey-200:          #E7E7E7;
  --white:             #FFFFFF;   /* primary text                           */

  /* ---- Semantic: surfaces ---------------------------------- */
  --surface-base:       var(--black);
  --surface-raised:     var(--grey-900);
  --surface-card:       var(--grey-800);
  --surface-sheet:      var(--grey-850);
  --surface-input:      var(--grey-750);
  --surface-elevated:   var(--grey-700);
  --surface-scrim:      rgba(0,0,0,0.80);   /* + blur(4px) under popups */

  /* ---- Semantic: text -------------------------------------- */
  --text-primary:       var(--white);
  --text-secondary:     var(--grey-400);
  --text-tertiary:      var(--grey-300);
  --text-disabled:      var(--grey-500);
  --text-brand:         var(--piip-green);   /* usernames, active, $prices */
  --text-channel:       var(--piip-amber);   /* p/channel names           */
  --text-link:          var(--piip-cyan);

  /* ---- Semantic: lines & borders --------------------------- */
  --border-hairline:    var(--grey-600);
  --border-subtle:      rgba(255,255,255,0.08);
  --divider:            var(--grey-800);

  /* ---- Semantic: interactive / status ---------------------- */
  --accent:             var(--piip-green);
  --accent-press:       var(--piip-green-600);
  --on-accent:          var(--black);          /* black text on green     */
  --like:               var(--piip-red);
  --success:            var(--piip-green);
  --danger:             var(--piip-red);
  --warning:            var(--piip-amber);
  --seen:               var(--piip-cyan);

  /* ---- Toggles (from Figma tokens) ------------------------- */
  --toggle-on:          #00B058;
  --toggle-off:         var(--grey-700);
  --toggle-handle:      var(--white);
}