/* ============================================================
   WhatsApp Colors — Color tokens
   Raw palette + light/dark semantic aliases.
   Semantic tokens are what components should reference.
   Dark theme activates on [data-theme="dark"] or .theme-dark.
   ============================================================ */

:root {
  /* ---- Brand green ---- */
  --wa-green:            #25d366;  /* signature WhatsApp green — primary accent (light) */
  --wa-green-dark:       #128c7e;  /* deep teal-green — accent in dark theme */
  --wa-green-teal:       #075e54;  /* classic WhatsApp header teal */
  --wa-green-bubble:     #d9fdd3;  /* outgoing message bubble (light) */
  --wa-green-bubble-dk:  #005c4b;  /* outgoing message bubble (dark) */

  /* ---- Neutrals (light) ---- */
  --wa-white:      #ffffff;
  --wa-panel:      #f0f2f5;  /* header / panel surfaces */
  --wa-canvas:     #f7f9fb;  /* app background wash */
  --wa-hover:      #f5f6f6;  /* row hover */
  --wa-line:       #e9edef;  /* hairline borders */
  --wa-chip:       #eef0f1;  /* chip / kbd fill */
  --wa-ink:        #111b21;  /* primary text */
  --wa-slate:      #667781;  /* secondary text */
  --wa-slate-2:    #8696a0;  /* tertiary text / disabled */
  --wa-scroll:     #d3d9dc;  /* scrollbar thumb */

  /* ---- Neutrals (dark ramp — WhatsApp Web night) ---- */
  --wa-ink-900:    #0b141a;  /* darkest canvas */
  --wa-ink-800:    #111b21;  /* dark surface / nav */
  --wa-ink-700:    #202c33;  /* dark panel / hover */
  --wa-ink-600:    #2a3942;  /* dark selected */
  --wa-ink-500:    #374248;  /* dark scrollbar */

  /* ---- Semantic status ---- */
  --wa-success:    #25d366;  --wa-success-dk:  #128c7e;
  --wa-warning:    #e8902e;  --wa-warning-dk:  #f0a33e;
  --wa-danger:     #e2453c;  --wa-danger-dk:   #f15c6d;
  --wa-info:       #3497f0;  --wa-info-dk:     #5ab0f5;
  --wa-violet:     #8b5cf6;  --wa-violet-dk:   #a78bfa;
  --wa-cyan:       #06b6d4;  --wa-cyan-dk:     #2bc6df;

  /* ---- Link ---- */
  --wa-link:       #027eb5;  --wa-link-dk:  #53bdeb;

  /* ---- Category accents (also the avatar / author palette) ---- */
  --wa-cat-realestate: #00a884;
  --wa-cat-software:   #3497f0;
  --wa-cat-services:   #8b5cf6;
  --wa-cat-leasing:    #f0a33e;
  --wa-cat-insurance:  #ea5b6f;
  --wa-cat-legal:      #64748b;
  --wa-cat-consulting: #ff7a59;
  --wa-cat-telecom:    #06b6d4;

  /* ============ Semantic aliases — LIGHT (default) ============ */
  --wa-bg:            var(--wa-white);
  --wa-surface:       var(--wa-white);
  --wa-surface-panel: var(--wa-panel);
  --wa-surface-canvas:var(--wa-canvas);
  --wa-surface-hover: var(--wa-hover);
  --wa-surface-sel:   var(--wa-panel);
  --wa-nav-bg:        var(--wa-white);

  --wa-border:        var(--wa-line);
  --wa-border-strong: #d5dbdf;

  --wa-text:          var(--wa-ink);
  --wa-text-2:        var(--wa-slate);
  --wa-text-3:        var(--wa-slate-2);
  --wa-on-accent:     #ffffff;

  --wa-accent:        var(--wa-green);
  --wa-accent-strong: var(--wa-green);
  --wa-accent-soft:   rgba(37,211,102,.16);
  --wa-accent-line:   rgba(37,211,102,.30);

  --wa-bubble:        var(--wa-green-bubble);
  --wa-bubble-text:   var(--wa-ink);
  --wa-bubble-in:     var(--wa-panel);

  --wa-link-color:    var(--wa-link);
  --wa-chip-bg:       var(--wa-chip);
  --wa-scroll-thumb:  var(--wa-scroll);
}

/* ================= Semantic aliases — DARK ================= */
[data-theme="dark"], .theme-dark {
  --wa-bg:            var(--wa-ink-800);
  --wa-surface:       var(--wa-ink-800);
  --wa-surface-panel: var(--wa-ink-700);
  --wa-surface-canvas:var(--wa-ink-900);
  --wa-surface-hover: var(--wa-ink-700);
  --wa-surface-sel:   var(--wa-ink-600);
  --wa-nav-bg:        var(--wa-ink-800);

  --wa-border:        var(--wa-ink-600);
  --wa-border-strong: #3a4a54;

  --wa-text:          #e9edef;
  --wa-text-2:        #8696a0;
  --wa-text-3:        #667781;
  --wa-on-accent:     #ffffff;

  --wa-accent:        var(--wa-green-dark);
  --wa-accent-strong: var(--wa-green-dark);
  --wa-accent-soft:   rgba(18,140,126,.28);
  --wa-accent-line:   rgba(18,140,126,.45);

  --wa-bubble:        var(--wa-green-bubble-dk);
  --wa-bubble-text:   #e9edef;
  --wa-bubble-in:     var(--wa-ink-700);

  --wa-link-color:    var(--wa-link-dk);
  --wa-chip-bg:       var(--wa-ink-700);
  --wa-scroll-thumb:  var(--wa-ink-500);

  --wa-success: var(--wa-success-dk); --wa-warning: var(--wa-warning-dk);
  --wa-danger:  var(--wa-danger-dk);  --wa-info:    var(--wa-info-dk);
  --wa-violet:  var(--wa-violet-dk);  --wa-cyan:    var(--wa-cyan-dk);
}