/*
 * Tokens da base comum do protótipo (elementos NOVOS: botões, campos, badges, abas, toasts, modais...).
 *
 * O tema fica no wrapper `.mr-theme[data-theme="escuro|claro"]`, nunca no :root, porque o CSS do canvas
 * (`canvas.css`) casa com `[data-theme="claro"]`. O escuro também vale no :root como reserva, para
 * elementos que um script acrescente fora do wrapper.
 *
 * Contraste: todo par texto/fundo abaixo tem razão >= 4,5:1 nos dois temas (medido com fundos
 * translúcidos compostos sobre o pior caso do degradê da página). Sobre o acento #0071FF o branco só
 * chega a 4,37:1, por isso o preenchimento de botão usa --mr-accent-solid (#0068F0, 4,95:1).
 */

:root,
.mr-theme {
  color-scheme: dark;

  /* Superfícies */
  --mr-bg: #0A101E;
  --mr-surface: rgba(255, 255, 255, 0.06);
  --mr-surface-2: rgba(255, 255, 255, 0.10);
  --mr-surface-solid: #111B33;
  --mr-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  --mr-glass-fallback: #15213A;
  --mr-glass-border: rgba(255, 255, 255, 0.20);
  --mr-glass-blur: blur(14px) saturate(135%);
  --mr-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 12px 36px rgba(0, 0, 0, 0.42);
  --mr-glass-drop: rgba(255, 255, 255, 0.20);
  --mr-glass-drop-border: rgba(255, 255, 255, 0.30);
  --mr-glass-drop-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 3px rgba(0, 0, 0, 0.12);
  --mr-border: rgba(255, 255, 255, 0.14);
  --mr-border-strong: rgba(255, 255, 255, 0.40);
  --mr-field-bg: rgba(2, 6, 23, 0.42);
  --mr-field-border: rgba(255, 255, 255, 0.42);
  --mr-scrim: rgba(2, 6, 23, 0.66);
  --mr-skel: rgba(255, 255, 255, 0.10);
  --mr-skel-hi: rgba(255, 255, 255, 0.22);

  /* Texto */
  --mr-text: #F8FAFC;
  --mr-text-2: #CBD5E1;
  --mr-text-3: #A9B6CA;

  /* Acento */
  --mr-accent: #0071FF;              /* anel de foco, bordas, ícones (não carrega texto branco) */
  --mr-accent-solid: #0068F0;        /* fundo de botão com texto branco */
  --mr-accent-solid-hover: #005FD6;
  --mr-accent-solid-active: #0056C2;
  --mr-on-accent: #FFFFFF;
  --mr-accent-text: #7DB6FF;         /* link e texto de destaque */
  --mr-accent-soft: rgba(0, 113, 255, 0.20);
  --mr-accent-line: rgba(96, 165, 250, 0.45);

  /* Status: texto, fundo translúcido e linha */
  --mr-ok: #6EE7B7;
  --mr-ok-bg: rgba(52, 211, 153, 0.14);
  --mr-ok-line: rgba(52, 211, 153, 0.34);
  --mr-warn: #FCD34D;
  --mr-warn-bg: rgba(251, 191, 36, 0.12);
  --mr-warn-line: rgba(251, 191, 36, 0.32);
  --mr-err: #FCA5A5;
  --mr-err-bg: rgba(248, 113, 113, 0.12);
  --mr-err-line: #F87171;
  --mr-info: #93C5FD;
  --mr-info-bg: rgba(96, 165, 250, 0.16);
  --mr-info-line: rgba(96, 165, 250, 0.38);

  /* Sombras */
  --mr-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 32px 64px rgba(2, 6, 23, 0.55);
  --mr-shadow-pop: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 48px rgba(2, 6, 23, 0.6);
  --mr-shadow-accent: 0 12px 30px rgba(0, 113, 255, 0.35);

  /* Raios */
  --mr-radius-sm: 10px;
  --mr-radius-md: 14px;
  --mr-radius-lg: 28px;
  --mr-radius-xl: 32px;
  --mr-radius-pill: 999px;

  /* Vidro */
  --mr-blur: blur(16px) saturate(135%);

  /* Espaçamentos */
  --mr-space-1: 4px;
  --mr-space-2: 8px;
  --mr-space-3: 12px;
  --mr-space-4: 16px;
  --mr-space-5: 24px;
  --mr-space-6: 32px;

  /* Movimento */
  --mr-dur-fast: 180ms;
  --mr-dur: 200ms;
  --mr-dur-slow: 220ms;
  --mr-ease: cubic-bezier(.2, .8, .2, 1);

  /* Tipografia e camadas */
  --mr-font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mr-z-badge: 800;
  --mr-z-modal: 900;
  --mr-z-toast: 1000;
}

.mr-theme[data-theme="claro"] {
  color-scheme: light;

  --mr-bg: #F3F6FB;
  --mr-surface: rgba(255, 255, 255, 0.72);
  --mr-surface-2: rgba(15, 23, 42, 0.06);
  --mr-surface-solid: #FFFFFF;
  --mr-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66));
  --mr-glass-fallback: #FFFFFF;
  --mr-glass-border: rgba(15, 23, 42, 0.22);
  --mr-glass-blur: blur(14px) saturate(135%);
  --mr-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(15, 23, 42, 0.04), 0 12px 36px rgba(15, 23, 42, 0.16);
  --mr-glass-drop: rgba(255, 255, 255, 0.96);
  --mr-glass-drop-border: rgba(0, 86, 196, 0.34);
  --mr-glass-drop-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 1px 3px rgba(15, 23, 42, 0.08);
  --mr-border: rgba(15, 23, 42, 0.10);
  --mr-border-strong: rgba(15, 23, 42, 0.46);
  --mr-field-bg: rgba(255, 255, 255, 0.92);
  --mr-field-border: rgba(15, 23, 42, 0.52);
  --mr-scrim: rgba(15, 23, 42, 0.45);
  --mr-skel: rgba(15, 23, 42, 0.08);
  --mr-skel-hi: rgba(15, 23, 42, 0.16);

  --mr-text: #0F172A;
  --mr-text-2: #334155;
  --mr-text-3: #475569;

  --mr-accent: #0071FF;
  --mr-accent-solid: #0068F0;
  --mr-accent-solid-hover: #005FD6;
  --mr-accent-solid-active: #0056C2;
  --mr-on-accent: #FFFFFF;
  --mr-accent-text: #0056C4;
  --mr-accent-soft: rgba(0, 113, 255, 0.12);
  --mr-accent-line: rgba(0, 96, 221, 0.45);

  --mr-ok: #065F46;
  --mr-ok-bg: rgba(5, 150, 105, 0.12);
  --mr-ok-line: rgba(5, 150, 105, 0.38);
  --mr-warn: #92400E;
  --mr-warn-bg: rgba(217, 119, 6, 0.14);
  --mr-warn-line: rgba(180, 83, 9, 0.42);
  --mr-err: #B91C1C;
  --mr-err-bg: rgba(220, 38, 38, 0.08);
  --mr-err-line: #DC2626;
  --mr-info: #1D4ED8;
  --mr-info-bg: rgba(37, 99, 235, 0.10);
  --mr-info-line: rgba(37, 99, 235, 0.40);

  --mr-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 40px rgba(15, 23, 42, 0.08);
  --mr-shadow-pop: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 20px 48px rgba(15, 23, 42, 0.18);
  --mr-shadow-accent: 0 10px 24px rgba(0, 113, 255, 0.28);
}

/*
 * Complemento do tema claro do canvas: cores de texto das telas que o canvas.css não mapeia.
 * Sem isto, os tons pastel somem no fundo claro. Mesmo padrão de seletor do canvas (texto exato do style).
 */
[data-theme="claro"] [style*="color: #BFDBFE"],[data-theme="claro"] [style*="color:#BFDBFE"]{color:#1E3A8A !important}
[data-theme="claro"] [style*="color: #E0F2FE"],[data-theme="claro"] [style*="color:#E0F2FE"]{color:#075985 !important}
[data-theme="claro"] [style*="color: #FCE7F3"],[data-theme="claro"] [style*="color:#FCE7F3"]{color:#9D174D !important}
[data-theme="claro"] [style*="color: #EDE9FE"],[data-theme="claro"] [style*="color:#EDE9FE"]{color:#5B21B6 !important}
[data-theme="claro"] [style*="color: #64748B"],[data-theme="claro"] [style*="color:#64748B"]{color:#475569 !important}

/* Texto branco sobre o azul sólido de ações e avatares nos dois temas. */
.mr-theme[data-theme="claro"] [style*="background: #0068F0"][style*="color: #FFFFFF"]:not(.btn){color:#FFFFFF !important}