/* Renova Energia Design System 2026 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --renova-azul-escuro: #003c78;
  --renova-azul-medio: #005aa0;
  --renova-azul: #0a7dc8;
  --renova-azul-claro: #00aaf0;
  --renova-cinza: #94a2aa;
  --renova-branco: #ffffff;
  --renova-preto: #0b1a28;

  --renova-fundo-azul: #d3e3f4;
  --renova-fundo: #ebf0f5;
  --renova-card-bg: #ffffff;

  --renova-erro: #f95830;
  --renova-sucesso: #3c9646;
  --renova-alerta: #fab914;
  --renova-indisponivel: #94a2aa;

  --renova-font-title: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --renova-font-text: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--renova-fundo);
  color: var(--renova-preto);
  font-family: var(--renova-font-text);
  margin: 0;
  padding: 0;
  letter-spacing: -0.015em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--renova-font-title);
  letter-spacing: -0.03em;
}

.renova-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--renova-cinza);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.renova-kicker-plus {
  color: var(--renova-azul-claro);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
}

.bg-renova-primary {
  background-color: var(--renova-azul-escuro);
}

.bg-renova-gradient {
  background: linear-gradient(135deg, #003c78 0%, #005aa0 50%, #0a7dc8 100%);
}

.text-renova-azul {
  color: var(--renova-azul);
}

.text-renova-azul-escuro {
  color: var(--renova-azul-escuro);
}

.border-renova-azul {
  border-color: var(--renova-azul);
}

.badge-renova-success {
  background-color: #eaf6ec;
  color: var(--renova-sucesso);
  border: 1px solid #c2e8c6;
}

.badge-renova-alert {
  background-color: #fef8e7;
  color: #b88204;
  border: 1px solid #fae19a;
}

.badge-renova-danger {
  background-color: #feece8;
  color: var(--renova-erro);
  border: 1px solid #fcc4b7;
}

/* Card hover soft shadow */
.renova-card {
  background: #ffffff;
  border: 1px solid #e1e8ef;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 60, 120, 0.04);
  transition: all 0.2s ease-in-out;
}

.renova-card:hover {
  box-shadow: 0 4px 12px rgba(0, 60, 120, 0.08);
}