/* ============================================================
   EU MONITORO — Design Tokens
   Fonte: Brand Guide v1.2 (eumonitoro\resources\views\pages\admin\brand-guide.blade.php)
   ============================================================ */

:root {
  /* ── Primária (Vermelho Brand) ── */
  --em-p50:  #FFF5F5;
  --em-p100: #FED7D7;
  --em-p200: #FEB2B2;
  --em-p300: #FC8181;
  --em-p400: #F56565;
  --em-p500: #E53E3E;
  --em-p600: #C53030;
  --em-p700: #9B2C2C;
  --em-p800: #822727;
  --em-p900: #63171B;

  /* ── Secundária (Verde Floresta) ── */
  --em-s50:  #F0FAF4;
  --em-s100: #C6F0D5;
  --em-s200: #9ADEBA;
  --em-s300: #68C791;
  --em-s400: #40916C;
  --em-s500: #086C4E;
  --em-s600: #065C41;
  --em-s700: #054D36;

  /* ── Acento (Âmbar Dados) ── */
  --em-a50:  #FFFBEB;
  --em-a400: #FBBF24;
  --em-a500: #F59E0B;
  --em-a600: #D97706;
  --em-a700: #B45309;

  /* ── Neutros (Slate) ── */
  --em-n50:  #F8FAFC;
  --em-n100: #F1F5F9;
  --em-n200: #E2E8F0;
  --em-n300: #CBD5E1;
  --em-n400: #94A3B8;
  --em-n500: #64748B;
  --em-n600: #475569;
  --em-n700: #334155;
  --em-n800: #1E293B;
  --em-n900: #0F172A;

  /* ── Semânticas ── */
  --em-success: #38A169;
  --em-warning: #D97706;
  --em-error:   #C53030;
  --em-info:    #2B6CB0;

  /* ── Superfícies (Light) ── */
  --em-bg:        var(--em-n50);
  --em-bg-alt:    var(--em-n100);
  --em-surface:   #FFFFFF;
  --em-border:    var(--em-n200);
  --em-border-s:  var(--em-n300);

  /* ── Texto (Light) ── */
  --em-text:      var(--em-n900);
  --em-text2:     var(--em-n600);
  --em-muted:     var(--em-n400);
  --em-inverse:   #FFFFFF;

  /* ── Tipografia ── */
  --em-font:      'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --em-mono:      'Geist Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* ── Sombras ── */
  --em-sh-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --em-sh-md:  0 4px 6px rgba(15,23,42,.05), 0 2px 4px rgba(15,23,42,.04);
  --em-sh-lg:  0 10px 15px rgba(15,23,42,.07), 0 4px 6px rgba(15,23,42,.05);
  --em-sh-p:   0 4px 16px rgba(229,62,62,.2);

  /* ── Raios ── */
  --em-r-sm:   4px;
  --em-r-md:   6px;
  --em-r-lg:   8px;
  --em-r-xl:   12px;
  --em-r-2xl:  16px;
  --em-r-full: 9999px;

  /* ── Transições ── */
  --em-ease:   cubic-bezier(.4, 0, .2, 1);
  --em-dur:    150ms;
}

/* ============================================================
   Dark Mode Tokens
   ============================================================ */
[data-theme="dark"] {
  --em-bg:       var(--em-n900);
  --em-bg-alt:   var(--em-n800);
  --em-surface:  var(--em-n800);
  --em-border:   var(--em-n700);
  --em-border-s: var(--em-n600);

  --em-text:     var(--em-n50);
  --em-text2:    var(--em-n400);
  --em-muted:    var(--em-n500);
  --em-inverse:  var(--em-n900);

  /* Tons claros da marca (fundos de chips/ícones) — tints translúcidos no escuro */
  --em-p50: rgba(229, 62, 62, .12);
  --em-s50: rgba(8, 108, 78, .15);
  --em-a50: rgba(245, 158, 11, .12);

  /* Neutros claros (fundos/bordas de chips neutros) — nunca usados como texto */
  --em-n100: rgba(255, 255, 255, .06);
  --em-n200: rgba(255, 255, 255, .10);

  --em-sh-sm:  0 1px 3px rgba(0,0,0,.3);
  --em-sh-md:  0 4px 6px rgba(0,0,0,.25);
  --em-sh-lg:  0 10px 15px rgba(0,0,0,.35);
  --em-sh-p:   0 4px 16px rgba(229,62,62,.25);
}