/* =============================================================
   COLOR THEME · Sistema de Gestão de Clínica + CRM WhatsApp
   Paleta base: #021A54 · #FF85BB · #FFCEE3 · #F5F5F5
   Vanilla CSS · CSS Custom Properties
   ============================================================= */

:root {
  /* =============================================================
     1. PALETA DE MARCA · escalas tonais 50–900
     ============================================================= */

  /* --- Primary · Azul Marinho (confiança, autoridade clínica) --- */
  --primary-50:  #E5E7EF;
  --primary-100: #C0C3D3;
  --primary-200: #818DAA;
  --primary-300: #41527F;
  --primary-400: #1B3165;
  --primary-500: #021A54;   /* ◀ base da paleta */
  --primary-600: #02174C;
  --primary-700: #02143F;
  --primary-800: #010D2A;
  --primary-900: #010714;

  /* --- Secondary · Rosa (acolhimento, cuidado, modernidade) --- */
  --secondary-50:  #FFF4F9;
  --secondary-100: #FFE0EE;
  --secondary-200: #FFCEE3;   /* ◀ base da paleta (rosa claro) */
  --secondary-300: #FFC2DD;
  --secondary-400: #FFA3CC;
  --secondary-500: #FF85BB;   /* ◀ base da paleta (rosa) */
  --secondary-600: #E678A8;
  --secondary-700: #BF648C;
  --secondary-800: #80435E;
  --secondary-900: #40212F;

  /* --- Neutral · Cinzas --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F5;     /* ◀ base da paleta */
  --neutral-200: #EBEBEB;
  --neutral-300: #D6D6D6;
  --neutral-400: #B8B8B8;
  --neutral-500: #8C8C8C;
  --neutral-600: #666666;
  --neutral-700: #4D4D4D;
  --neutral-800: #333333;
  --neutral-900: #1A1A1A;


  /* =============================================================
     2. CORES SEMÂNTICAS · status / feedback
     ============================================================= */

  /* --- Success (consultas confirmadas, pagamentos aprovados) --- */
  --success-50:  #E8F6EE;
  --success-100: #C5E8D2;
  --success-500: #1FAB4F;
  --success-600: #178B40;
  --success-700: #0F6B30;

  /* --- Warning (lembretes, pendências) --- */
  --warning-50:  #FFF8E5;
  --warning-100: #FFEDB8;
  --warning-500: #F5A623;
  --warning-600: #D48B12;
  --warning-700: #A36C0A;

  /* --- Error / Danger (cancelamentos, falhas) --- */
  --error-50:  #FDECEC;
  --error-100: #F9C9C9;
  --error-500: #E53935;
  --error-600: #C62828;
  --error-700: #962020;

  /* --- Info (avisos neutros, dicas) --- */
  --info-50:  #E3F2FD;
  --info-100: #BBDEFB;
  --info-500: #1E88E5;
  --info-600: #1565C0;
  --info-700: #0D47A1;


  /* =============================================================
     3. CORES WHATSAPP · CRM / mensageria
     ============================================================= */
  --whatsapp-green:        #25D366;   /* verde oficial */
  --whatsapp-green-dark:   #128C7E;   /* headers, botões pressionados */
  --whatsapp-green-darker: #075E54;   /* ações primárias do app */
  --whatsapp-teal:         #34B7F1;   /* tick lido (azul) */
  --whatsapp-bubble-out:   #DCF8C6;   /* balão de mensagem enviada */
  --whatsapp-bubble-in:    #FFFFFF;   /* balão de mensagem recebida */
  --whatsapp-chat-bg:      #ECE5DD;   /* fundo da conversa */


  /* =============================================================
     4. TOKENS FUNCIONAIS · use estes nas views
     ============================================================= */

  /* --- Superfícies / fundos --- */
  --bg-body:        var(--neutral-100);
  --bg-surface:     var(--neutral-0);
  --bg-elevated:    var(--neutral-0);
  --bg-subtle:      var(--neutral-50);
  --bg-muted:       var(--neutral-200);
  --bg-inverse:     var(--primary-500);

  --bg-brand:       var(--primary-500);
  --bg-brand-soft:  var(--primary-50);
  --bg-accent:      var(--secondary-500);
  --bg-accent-soft: var(--secondary-200);
  --bg-highlight:   var(--secondary-50);

  /* --- Texto --- */
  --text-primary:    var(--primary-900);
  --text-secondary:  var(--neutral-700);
  --text-tertiary:   var(--neutral-500);
  --text-disabled:   var(--neutral-400);
  --text-on-brand:   var(--neutral-0);
  --text-on-accent:  var(--primary-500);
  --text-link:       var(--primary-500);
  --text-link-hover: var(--secondary-500);

  /* --- Bordas --- */
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-subtle:  var(--neutral-100);
  --border-focus:   var(--secondary-500);
  --border-brand:   var(--primary-500);
  --border-error:   var(--error-500);


  /* =============================================================
     5. COMPONENTES · tokens prontos
     ============================================================= */

  /* --- Botões --- */
  --btn-primary-bg:         var(--primary-500);
  --btn-primary-bg-hover:   var(--primary-600);
  --btn-primary-bg-active:  var(--primary-700);
  --btn-primary-text:       var(--neutral-0);

  --btn-secondary-bg:         var(--secondary-500);
  --btn-secondary-bg-hover:   var(--secondary-600);
  --btn-secondary-bg-active:  var(--secondary-700);
  --btn-secondary-text:       var(--neutral-0);

  --btn-ghost-bg:        transparent;
  --btn-ghost-bg-hover:  var(--secondary-50);
  --btn-ghost-text:      var(--primary-500);

  --btn-whatsapp-bg:        var(--whatsapp-green);
  --btn-whatsapp-bg-hover:  var(--whatsapp-green-dark);
  --btn-whatsapp-text:      var(--neutral-0);

  --btn-danger-bg:        var(--error-500);
  --btn-danger-bg-hover:  var(--error-600);
  --btn-danger-text:      var(--neutral-0);

  /* --- Sidebar / Navegação --- */
  --sidebar-bg:               var(--primary-500);
  --sidebar-text:             var(--neutral-100);
  --sidebar-text-muted:       var(--primary-200);
  --sidebar-item-hover:       var(--primary-600);
  --sidebar-item-active:      var(--secondary-500);
  --sidebar-item-active-text: var(--neutral-0);
  --sidebar-border:           var(--primary-700);

  /* --- Topbar --- */
  --topbar-bg:           var(--neutral-0);
  --topbar-border:       var(--border-default);
  --topbar-text:         var(--text-primary);
  --topbar-icon:         var(--neutral-600);
  --topbar-icon-hover:   var(--primary-500);

  /* --- Cards --- */
  --card-bg:           var(--neutral-0);
  --card-border:       var(--border-default);
  --card-shadow:       0 1px 3px rgba(2, 26, 84, .06), 0 1px 2px rgba(2, 26, 84, .04);
  --card-shadow-hover: 0 4px 12px rgba(2, 26, 84, .10), 0 2px 4px rgba(2, 26, 84, .06);

  /* --- Inputs --- */
  --input-bg:               var(--neutral-0);
  --input-bg-disabled:      var(--neutral-100);
  --input-border:           var(--neutral-300);
  --input-border-hover:     var(--neutral-400);
  --input-border-focus:     var(--secondary-500);
  --input-border-error:     var(--error-500);
  --input-text:             var(--text-primary);
  --input-placeholder:      var(--neutral-500);
  --input-shadow-focus:     0 0 0 3px rgba(255, 133, 187, .25);

  /* --- Badges / Status de paciente / consulta --- */
  --badge-confirmed-bg:   var(--success-50);
  --badge-confirmed-text: var(--success-700);
  --badge-pending-bg:     var(--warning-50);
  --badge-pending-text:   var(--warning-700);
  --badge-cancelled-bg:   var(--error-50);
  --badge-cancelled-text: var(--error-700);
  --badge-attended-bg:    var(--primary-50);
  --badge-attended-text:  var(--primary-700);
  --badge-new-bg:         var(--secondary-100);
  --badge-new-text:       var(--secondary-800);

  /* --- Avatar (fallback colorido) --- */
  --avatar-bg:    var(--secondary-200);
  --avatar-text:  var(--primary-500);

  /* --- Chat WhatsApp dentro do CRM --- */
  --chat-bg:                var(--whatsapp-chat-bg);
  --chat-bubble-incoming:   var(--whatsapp-bubble-in);
  --chat-bubble-outgoing:   var(--whatsapp-bubble-out);
  --chat-bubble-text:       var(--neutral-900);
  --chat-timestamp:         var(--neutral-500);
  --chat-tick-sent:         var(--neutral-400);
  --chat-tick-delivered:    var(--neutral-500);
  --chat-tick-read:         var(--whatsapp-teal);
  --chat-input-bg:          var(--neutral-0);
  --chat-header-bg:         var(--primary-500);
  --chat-header-text:       var(--neutral-0);
  --chat-unread-badge:      var(--secondary-500);


  /* =============================================================
     6. SOMBRAS · tonalizadas com o navy da marca
     ============================================================= */
  --shadow-xs:   0 1px 2px  rgba(2, 26, 84, .04);
  --shadow-sm:   0 1px 3px  rgba(2, 26, 84, .08), 0 1px 2px rgba(2, 26, 84, .04);
  --shadow-md:   0 4px 6px  rgba(2, 26, 84, .07), 0 2px 4px rgba(2, 26, 84, .04);
  --shadow-lg:   0 10px 15px rgba(2, 26, 84, .08), 0 4px 6px  rgba(2, 26, 84, .04);
  --shadow-xl:   0 20px 25px rgba(2, 26, 84, .10), 0 8px 10px rgba(2, 26, 84, .04);
  --shadow-pink: 0 6px 16px rgba(255, 133, 187, .35);  /* CTA destacado */
}


/* =============================================================
   7. DARK MODE · opcional, ative com [data-theme="dark"] no <html>
   ============================================================= */
[data-theme="dark"] {
  --bg-body:        var(--primary-900);
  --bg-surface:     var(--primary-800);
  --bg-subtle:      var(--primary-700);
  --bg-brand:       var(--secondary-500);
  --bg-accent-soft: var(--primary-700);

  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-tertiary:  var(--neutral-400);
  --text-on-brand:  var(--primary-900);
  --text-link:      var(--secondary-400);

  --border-default: var(--primary-700);
  --border-focus:   var(--secondary-500);

  --card-bg:        var(--primary-800);
  --card-border:    var(--primary-700);
  --topbar-bg:      var(--primary-800);
  --input-bg:       var(--primary-700);
  --input-border:   var(--primary-600);
  --input-text:     var(--neutral-50);
}