/* ============================================================
   SIFA · theme tokens
   ------------------------------------------------------------
   Single source of truth for every shared color token.
   Both chat.css and admin.css consume from here — change a
   value once, every surface picks it up.

   Component-specific tokens (radius, motion, bubbles, wallpaper,
   channels, layout, elevation) live in their owning stylesheet.

   Two themes:
     :root                       → dark (WhatsApp-dark palette)
     :root[data-theme="light"]   → light (WhatsApp-web palette)

   Palette source: WhatsApp Web. The chat shell deliberately
   mirrors WhatsApp's chrome so youths who already use WhatsApp
   land in a familiar interface. The brand mark (the SIFA logo
   in the rail) keeps its rust accent via --brand-mark so the
   product identity isn't lost.
   ============================================================ */

/* ---------- DARK (WhatsApp Web dark) ---------- */
:root {
  /* Surfaces */
  --bg:              #0B141A;
  --panel:           #111B21;
  --panel-2:         #1F2C33;
  --panel-3:         #2A3942;
  --hover:           #1F2C33;
  --border:          #2A3942;
  --hairline:        rgba(233,237,239,0.06);
  --hairline-strong: rgba(233,237,239,0.12);

  /* Text */
  --text:    #E9EDEF;
  --muted:   #8696A0;
  --muted-2: #AEBAC1;

  /* Brand — WhatsApp green */
  --primary:         #00A884;
  --primary-dim:     #008069;
  --primary-soft:    rgba(0,168,132,0.16);
  --primary-glow:    rgba(0,168,132,0.34);
  --accent:          #53BDEB;          /* WhatsApp read-receipt blue, used as accent */
  --brand-mark:      #BC6946;          /* SIFA mark stays rust */
  --brand-mark-soft: rgba(188,105,70,0.16);

  /* Status */
  --mint:        #06CF9C;
  --warn:        #FFB949;
  --warn-soft:   rgba(255,185,73,0.12);
  --err:         #F15C6D;
  --alert:       #F15C6D;
  --alert-soft:  rgba(241,92,109,0.12);
}

/* ---------- LIGHT (WhatsApp Web light) ---------- */
:root[data-theme="light"] {
  /* Surfaces */
  --bg:              #EFEAE2;          /* WhatsApp chat-area beige */
  --panel:           #FFFFFF;          /* Sidebar / header surface */
  --panel-2:         #F0F2F5;          /* Hover / muted panel */
  --panel-3:         #E9EDEF;          /* Selected / pressed */
  --hover:           #F5F6F6;
  --border:          #D1D7DB;
  --hairline:        rgba(11,20,26,0.08);
  --hairline-strong: rgba(11,20,26,0.16);

  /* Text */
  --text:    #111B21;
  --muted:   #667781;
  --muted-2: #3B4A54;

  /* Brand — WhatsApp green for SIFA's primary surface chrome.
     Channel-specific tokens (--ch-whatsapp-*) keep their own
     values where they represent the actual channel. */
  --primary:         #00A884;
  --primary-dim:     #008069;
  --primary-soft:    rgba(0,168,132,0.12);
  --primary-glow:    rgba(0,168,132,0.22);
  --accent:          #027EB5;          /* WA dark-mode link blue, works on light */
  --brand-mark:      #BC6946;          /* SIFA mark stays rust */
  --brand-mark-soft: rgba(188,105,70,0.12);

  /* Status */
  --mint:        #06CF9C;
  --warn:        #D97706;
  --warn-soft:   rgba(217,119,6,0.10);
  --err:         #E11D48;
  --alert:       #E11D48;
  --alert-soft:  rgba(225,29,72,0.10);
}