/* ==============================================
   EZCALE BRAND GUIDE - CSS Variables
   Baseado no manual oficial da marca
   Data: 2026-01-07
   ============================================== */

:root {
  /* Cores Principais do Brand Guide */
  --ezcale-green: #A8EA99;           /* Verde-limão: Destaque principal, CTAs, sucesso */
  --ezcale-blue-electric: #3A42FE;   /* Azul elétrico: Ação, botões primários, links */
  --ezcale-blue-light: #8FCEEE;      /* Azul claro: Backgrounds suaves, secundário */
  --ezcale-gray: #5B5A5B;            /* Cinza neutro: Texto secundário, bordas */
  --ezcale-black: #000000;           /* Preto: Texto principal, backgrounds dark */
  --ezcale-light: #E2E1E0;           /* Tom neutro claro: Backgrounds, espaços em branco */

  /* Tipografia */
  --font-primary: 'JUST Sans Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', Georgia, serif;

  /* Espaçamentos baseados no manual */
  --border-radius-small: 8px;
  --border-radius-medium: 16px;
  --border-radius-large: 24px;
  --border-radius-pill: 999px;       /* Formas arredondadas (pills/cápsulas) */

  /* Sombras */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.16);
}

/* Utilitários de cor */
.bg-green { background-color: var(--ezcale-green); }
.bg-blue-electric { background-color: var(--ezcale-blue-electric); }
.bg-blue-light { background-color: var(--ezcale-blue-light); }
.bg-gray { background-color: var(--ezcale-gray); }
.bg-black { background-color: var(--ezcale-black); }
.bg-light { background-color: var(--ezcale-light); }

.text-green { color: var(--ezcale-green); }
.text-blue-electric { color: var(--ezcale-blue-electric); }
.text-blue-light { color: var(--ezcale-blue-light); }
.text-gray { color: var(--ezcale-gray); }
.text-black { color: var(--ezcale-black); }

/* Elementos de Brand - Formas Geométricas */
.brand-pill {
  border-radius: var(--border-radius-pill);
  padding: 8px 20px;
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
}

.brand-pill-blue-light {
  background-color: var(--ezcale-blue-light);
  color: var(--ezcale-black);
}

.brand-pill-blue-electric {
  background-color: var(--ezcale-blue-electric);
  color: white;
}

.brand-circle-green {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--ezcale-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-circle-gray {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--ezcale-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cards estilizados conforme brand */
.brand-card-green {
  background-color: var(--ezcale-green);
  border: 3px solid var(--ezcale-black);
  border-radius: var(--border-radius-medium);
  padding: 24px;
  position: relative;
}

.brand-card-green::before {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  background-color: var(--ezcale-black);
  color: var(--ezcale-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

/* Ícones do sistema conforme brand guide */
.brand-icon-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid white;
  color: white;
  font-weight: bold;
}

.brand-icon-dollar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--ezcale-green);
  color: var(--ezcale-green);
  font-size: 24px;
  font-weight: bold;
}

/* Botões padronizados conforme brand */
.btn-brand-primary {
  background-color: var(--ezcale-blue-electric);
  color: white;
  border: none;
  border-radius: var(--border-radius-small);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-primary);
}

.btn-brand-primary:hover {
  background-color: #2A32DE;
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.btn-brand-secondary {
  background-color: transparent;
  color: var(--ezcale-blue-electric);
  border: 2px solid var(--ezcale-blue-electric);
  border-radius: var(--border-radius-small);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-primary);
}

.btn-brand-secondary:hover {
  background-color: var(--ezcale-blue-electric);
  color: white;
}

.btn-brand-accent {
  background-color: var(--ezcale-green);
  color: var(--ezcale-black);
  border: none;
  border-radius: var(--border-radius-small);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-primary);
}

.btn-brand-accent:hover {
  background-color: #92D17D;
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* Tags/Chips estilizados "Não Somos / Somos" */
.brand-tag-gray-dark {
  background-color: var(--ezcale-gray);
  color: white;
  padding: 6px 16px;
  border-radius: var(--border-radius-pill);
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  margin: 4px;
}

.brand-tag-gray-light {
  background-color: var(--ezcale-light);
  color: var(--ezcale-gray);
  padding: 6px 16px;
  border-radius: var(--border-radius-pill);
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  margin: 4px;
}

.brand-tag-white {
  background-color: white;
  color: var(--ezcale-gray);
  border: 2px solid var(--ezcale-light);
  padding: 6px 16px;
  border-radius: var(--border-radius-pill);
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  margin: 4px;
}

.brand-tag-blue {
  background-color: var(--ezcale-blue-electric);
  color: white;
  padding: 6px 16px;
  border-radius: var(--border-radius-pill);
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  margin: 4px;
}