/* ============================================================
   Azizi · 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)

   Surfaces still mirror WhatsApp Web's chrome — that is a
   deliberate UX choice, so youths who already use WhatsApp land
   in a familiar layout. Only the BRAND tokens moved to Azizi:
   primary/accent/brand-mark are teal, sampled from
   aziziafrica.com (#0D9488 primary, #06B6D4 accent) and from the
   logo itself (#19A7A4). Greys and bubbles are untouched, so
   familiarity survives the rebrand.
   ============================================================ */

/* ---------- 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:         #14B8A6;          /* Azizi teal, lifted for dark ground */
  --primary-dim:     #0D9488;          /* aziziafrica.com primary */
  --primary-soft:    rgba(20,184,166,0.16);
  --primary-glow:    rgba(20,184,166,0.34);
  --accent:          #06B6D4;          /* Azizi cyan */
  --brand-mark:      #19A7A4;          /* the logo's own teal */
  --brand-mark-soft: rgba(25,167,164,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:         #0D9488;          /* aziziafrica.com primary (teal-600) */
  --primary-dim:     #0F766E;
  --primary-soft:    rgba(13,148,136,0.12);
  --primary-glow:    rgba(13,148,136,0.22);
  --accent:          #0891B2;          /* Azizi cyan, darkened for light ground */
  --brand-mark:      #19A7A4;          /* the logo's own teal */
  --brand-mark-soft: rgba(25,167,164,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);
}