/* ============================================
   DESIGN TOKENS — WhatsApp Theme (Android)
   AG Radiografar — Gra PoC
   ============================================ */

:root {
  /* === CORES PRIMÁRIAS === */
  --wa-green-dark:     #075E54;
  --wa-green-darker:   #064D44;
  --wa-green-light:    #25D366;
  --wa-green-teal:     #128C7E;

  /* === CORES DE FUNDO === */
  --wa-bg-chat:        #E5DDD5;
  --wa-bg-doodle:      #D4CFC6;
  --wa-bg-desktop:     #111B21;

  /* === BOLHAS === */
  --wa-bubble-sent:    #DCF8C6;
  --wa-bubble-recv:    #FFFFFF;
  --wa-bubble-shadow:  rgba(0, 0, 0, 0.13);
  --wa-bubble-radius:  7.5px;

  /* === TEXTO === */
  --wa-text-primary:   #303030;
  --wa-text-secondary: #667781;
  --wa-text-time:      #999999;
  --wa-text-header:    #FFFFFF;
  --wa-text-subtitle:  rgba(255, 255, 255, 0.7);
  --wa-text-link:      #039BE5;

  /* === CHECK MARKS === */
  --wa-check-sent:     #999999;
  --wa-check-read:     #4FC3F7;

  /* === INPUT BAR === */
  --wa-input-bg:       #FFFFFF;
  --wa-input-bar-bg:   #F0F0F0;
  --wa-input-border:   #E0E0E0;
  --wa-input-placeholder: #999999;

  /* === ÍCONES === */
  --wa-icon-default:   #919191;
  --wa-icon-active:    #075E54;

  /* === TIPOGRAFIA === */
  --wa-font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --wa-font-header:    17px;
  --wa-font-subtitle:  13px;
  --wa-font-message:   14.2px;
  --wa-font-time:      11px;
  --wa-font-input:     16px;
  --wa-font-date-sep:  12px;
  --wa-line-height:    1.4;

  /* === ESPAÇAMENTOS === */
  --wa-header-height:  56px;
  --wa-input-height:   52px;
  --wa-avatar-size:    40px;
  --wa-avatar-header:  40px;
  --wa-bubble-max-w:   75%;
  --wa-bubble-padding: 6px 7px 8px 9px;
  --wa-bubble-gap-same:    2px;
  --wa-bubble-gap-diff:    12px;
  --wa-bubble-margin-side: 8%;
  --wa-chat-padding:   8px;

  /* === LAYOUT === */
  --wa-mobile-max-w:   420px;
  --wa-mobile-max-h:   812px;

  /* === ANIMAÇÕES === */
  --wa-anim-bubble:    200ms ease-out;
  --wa-anim-typing:    1.2s ease-in-out infinite;
  --wa-anim-scroll:    300ms ease;
  --wa-anim-fade:      150ms ease;

  /* === SOMBRAS === */
  --wa-shadow-bubble:  0 1px 0.5px var(--wa-bubble-shadow);
  --wa-shadow-header:  0 1px 3px rgba(0, 0, 0, 0.15);
  --wa-shadow-phone:   0 4px 24px rgba(0, 0, 0, 0.3);
  --wa-shadow-date:    0 1px 0.5px rgba(0, 0, 0, 0.1);

  /* === BORDER RADIUS === */
  --wa-radius-input:   21px;
  --wa-radius-btn:     50%;
  --wa-radius-phone:   12px;
  --wa-radius-date:    8px;
  --wa-radius-attach:  12px;

  /* === Z-INDEX === */
  --wa-z-header:       100;
  --wa-z-input:        100;
  --wa-z-overlay:      200;
  --wa-z-modal:        300;
}