/* ═══════════════════════════════════════════════════════════════════════════
   Plataforma de Recarga EV — Design tokens
   Cores, espaçamento, tipografia. A cor da plataforma é verde; quando o
   tenant tem cor própria, ela substitui --tenant-primary.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — Plataforma (Amazônia Plug, default) */
  --brand-primary: #00A651;          /* verde Amazônia — marca, em ícones e destaques */
  --brand-primary-dark: #008A43;     /* fundo de botão: branco por cima dá 4,45:1 */
  --brand-primary-darker: #007A3B;   /* hover do botão (o -dark virou o estado normal) */
  --brand-primary-light: #E8F7EF;
  --brand-accent: #0F1F3D;           /* azul-marinho profundo */

  /* Tenant override (operador) — recebe valor do mock */
  --tenant-primary: var(--brand-primary);
  --tenant-primary-dark: var(--brand-primary-dark);
  --tenant-primary-darker: var(--brand-primary-darker);
  --tenant-primary-soft: var(--brand-primary-light);
  --tenant-on-primary: #ffffff;

  /* Surface — neutros quentes, baixa saturação */
  --bg-page: #F7F8F6;
  --bg-card: #FFFFFF;
  --bg-elevated: #FBFBF9;
  --bg-subtle: #F1F2EE;
  --bg-muted: #E9EBE5;

  /* Text */
  --text-primary: #0E1614;
  --text-secondary: #4A554F;
  --text-tertiary: #7A857F;
  --text-disabled: #B5BCB7;
  --text-inverse: #FFFFFF;

  /* Borders */
  --border-subtle: rgba(14, 22, 20, 0.06);
  --border-default: rgba(14, 22, 20, 0.10);
  --border-strong: rgba(14, 22, 20, 0.20);

  /* Status */
  --status-success: #00A651;
  --status-success-soft: #E8F7EF;
  --status-warning: #D97706;
  --status-warning-soft: #FEF3E2;
  --status-danger: #DC2626;
  --status-danger-soft: #FEE7E7;
  --status-info: #0369A1;
  --status-info-soft: #E0F2FE;
  --status-neutral: #6B7280;
  --status-neutral-soft: #F3F4F6;

  /* Radii — sistema globalmente arredondado */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* Shadows — discretas, modernas */
  --shadow-sm: 0 1px 2px rgba(14,22,20,0.04), 0 1px 3px rgba(14,22,20,0.04);
  --shadow-md: 0 2px 4px rgba(14,22,20,0.04), 0 4px 12px rgba(14,22,20,0.06);
  --shadow-lg: 0 4px 8px rgba(14,22,20,0.05), 0 12px 32px rgba(14,22,20,0.08);
  --shadow-card: 0 1px 0 rgba(14,22,20,0.02), 0 1px 3px rgba(14,22,20,0.05), 0 8px 24px rgba(14,22,20,0.04);

  /* Largura do app. O desenho é mobile-first; sem teto, num desktop o campo de CPF
     chega a 1380px e a tela fica estranha. Com teto, o app se comporta como aplicativo
     centralizado e continua fluido abaixo disso. */
  --app-max-w: 420px;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Type */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
}

/* Reset minimal */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Utilities used inside the screens */
.evx-screen {
  width: 100%;
  height: 100%;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  color: var(--text-primary);
  overflow-y: auto;
  overflow-x: hidden;
}
.evx-screen::-webkit-scrollbar { width: 0; display: none; }

.evx-card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.evx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--r-lg);
  border: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
  width: 100%;
}
.evx-btn:active { transform: translateY(1px); }
.evx-btn-primary {
  /* -dark, não o tom cheio da marca: texto branco sobre #00A651 dá 3,19:1, abaixo do 4,5:1
     que o WCAG AA pede para texto normal (este botão é 16px/600, não conta como texto
     grande). Sobre #008A43 sobe para 4,45:1. A marca #00A651 segue valendo em ícones,
     barras e destaques, onde não há texto por cima. */
  background: var(--tenant-primary-dark);
  color: var(--tenant-on-primary);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,138,67,0.18);
}
/* O hover precisou descer um degrau: o -dark virou o estado normal e o botão ficaria sem
   resposta visual ao toque. */
.evx-btn-primary:hover { background: var(--tenant-primary-darker); }
.evx-btn-primary:disabled {
  background: var(--bg-muted); color: var(--text-disabled);
  box-shadow: none; cursor: not-allowed;
}
.evx-btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.evx-btn-secondary:hover { background: var(--bg-subtle); }
.evx-btn-danger {
  background: #fff;
  color: var(--status-danger);
  border: 1px solid var(--status-danger);
}
.evx-btn-danger:hover { background: var(--status-danger-soft); }

.evx-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  font-size: 16px;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.evx-input:focus {
  border-color: var(--tenant-primary);
  box-shadow: 0 0 0 4px var(--tenant-primary-soft);
}

.evx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Animations */
@keyframes evx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes evx-spin { to { transform: rotate(360deg); } }
@keyframes evx-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes evx-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes evx-bolt-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 currentColor); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 16px currentColor); }
}
@keyframes evx-progress-flow {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}
@keyframes evx-low-pulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50%      { opacity: 0.55; filter: brightness(1.25); }
}
@keyframes evx-shine {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Striped placeholder */
.evx-placeholder {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bg-subtle), var(--bg-subtle) 8px,
    var(--bg-muted) 8px, var(--bg-muted) 16px
  );
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  border-radius: var(--r-md);
}