/* =====================================================================
   DIGREJA — Design Tokens (fonte única da verdade)
   Arquitetura em 3 camadas (ver REFACTOR-LOGIN-DASHBOARD / PADRAO-PREMIUM-TELAS):

     1. PRIMITIVOS  — paleta crua, constantes. Nunca mudam.
     2. MARCA        — --brand/--brand-2: ÚNICA costura white-label.
                       Default = marca DIGREJA; sobrescrito por tenant inline.
     3. SEMÂNTICOS   — papéis (--color-text, --color-primary...). Componentes
                       consomem SOMENTE estes (ou os aliases de compat abaixo).

   White-label: cada página tenant-aware injeta inline, ANTES de consumir:
       <style>:root{--brand:<?= cor_primaria ?>;--brand-2:<?= cor_secundaria ?>;}</style>
   Os tons -strong/-soft derivam via color-mix, então o tenant só informa 2 cores.

   Migração sem quebra: os nomes curtos atuais do dashboard (--b,--o,--tx...)
   continuam funcionando como ALIASES (seção 4). Migrar tela a tela para os
   nomes semânticos e então remover os aliases.
   ===================================================================== */

:root {
  /* ---- 1. PRIMITIVOS ------------------------------------------------ */
  /* Marca DIGREJA (default do produto) */
  --dg-blue:          #0085ca;
  --dg-blue-strong:   #005293;
  --dg-blue-soft:     #29abe2;
  --dg-orange:        #e87e04;
  --dg-orange-strong: #c66b00;
  --dg-orange-soft:   #f7a643;

  /* Cores de apoio - Manual de Identidade v1.0 */
  --dg-navy:            #062b49;
  --dg-gray-text:       #66717d;
  --dg-surface-neutral: #f4f7f9;

  /* Neutros — escala slate do Tailwind (numeração CORRIGIDA, antes deslocada) */
  --dg-slate-50:  #f8fafc;
  --dg-slate-100: #f1f5f9;
  --dg-slate-200: #e2e8f0;
  --dg-slate-300: #cbd5e1;
  --dg-slate-400: #94a3b8;
  --dg-slate-500: #64748b;
  --dg-slate-600: #475569;
  --dg-slate-700: #334155;
  --dg-slate-800: #1e293b;
  --dg-slate-900: #0f172a;

  /* Status / acentos */
  --dg-green:  #27ae60;
  --dg-red:    #e74c3c;
  --dg-amber:  #f39c12;
  --dg-cyan:   #0891b2;
  --dg-purple: #7c3aed;
  --dg-pink:   #ec4899;

  /* ---- 2. MARCA (tenant) ------------------------------------------- */
  /* Default = DIGREJA. Sobrescrito inline por tenant (white-label).      */
  --brand:   var(--dg-blue);
  --brand-2: var(--dg-orange);
  /* Tons derivados — acompanham o tenant automaticamente */
  --brand-strong:   color-mix(in srgb, var(--brand) 82%, #000);
  --brand-soft:     color-mix(in srgb, var(--brand) 68%, #fff);
  --brand-2-strong: color-mix(in srgb, var(--brand-2) 82%, #000);
  --brand-2-soft:   color-mix(in srgb, var(--brand-2) 70%, #fff);

  /* ---- 3. SEMÂNTICOS (papel) — o que os componentes devem usar ----- */
  --color-primary:        var(--brand);
  --color-primary-strong: var(--brand-strong);
  --color-primary-soft:   var(--brand-soft);
  --color-secondary:      var(--brand-2);
  --color-secondary-strong: var(--brand-2-strong);
  --color-secondary-soft:   var(--brand-2-soft);

  --color-text:        var(--dg-slate-700);
  --color-text-muted:  var(--dg-slate-500);
  --color-text-strong: var(--dg-slate-900);

  --color-bg:        var(--dg-slate-100);
  --color-surface:   #ffffff;
  --color-border:    var(--dg-slate-200);

  --color-success: var(--dg-green);
  --color-danger:  var(--dg-red);
  --color-warning: var(--dg-amber);
  --color-info:    var(--dg-cyan);

  /* Layout (não-cor) */
  --radius:    16px;
  --shadow:    0 2px 12px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.1);

  /* ---- 4. ALIASES DE COMPAT (dashboard) — remover após migração ---- */
  --b:   var(--color-primary);
  --bd:  var(--color-primary-strong);
  --o:   var(--color-secondary);
  --g:   var(--dg-green);
  --r:   var(--dg-red);
  --p:   var(--dg-purple);
  --t:   var(--dg-cyan);
  --pk:  var(--dg-pink);
  --sl:  var(--dg-slate-900);
  --tx:  var(--color-text);
  --txl: var(--color-text-muted);
  --bg:  var(--color-bg);
  --cd:  var(--color-surface);
  --br:  var(--color-border);
  --rd:  var(--radius);
  --sh:  var(--shadow);
  --shl: var(--shadow-lg);
}

/* Dark mode (tema manual via data-theme="dark", como o resto do app).
   A MARCA não inverte — só os neutros semânticos. Conferir integração com
   style-dark*.css ao fazer o wiring. */
[data-theme="dark"] {
  --color-text:        var(--dg-slate-200);
  --color-text-muted:  var(--dg-slate-400);
  --color-text-strong: #ffffff;
  --color-bg:          #121624;
  --color-surface:     var(--dg-slate-800);
  --color-border:      var(--dg-slate-700);
}