/* BRMaioli — identidade visual consumida do repositório `design-system` (fonte da
   verdade: design-system/DESIGN-SYSTEM.md). Não redefinir a marca aqui — só aplicar. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Cor primária — Azul BRMaioli */
  --color-primary-50:  #F2F6FD;
  --color-primary-100: #D3E1F8;
  --color-primary-200: #9DBDF0;
  --color-primary-300: #5D93E9;
  --color-primary-400: #1C68E3;
  --color-primary-500: #1349A0;
  --color-primary-600: #0E3A80;
  --color-primary-700: #0B2C60;
  --color-primary-800: #071D40;
  --color-primary-900: #041125;

  /* Acento — Verde BRMaioli (uso restrito, ver "o que não fazer") */
  --color-accent:       #1D9422;
  --color-accent-muted: #16A34A;

  /* Neutros */
  --color-gray-950: #0A0F1E;
  --color-gray-900: #0F172A;
  --color-gray-700: #334155;
  --color-gray-500: #64748B;
  --color-gray-400: #94A3B8;
  --color-gray-300: #CBD5E1;
  --color-gray-200: #E2E8F0;
  --color-gray-100: #F1F5F9;
  --color-gray-50:  #F8FAFC;
  --color-white:    #FFFFFF;

  /* Semânticas */
  --color-success-bg:   #F0FDF4;
  --color-success:      #16A34A;
  --color-success-dark: #15803D;
  --color-warning-bg:   #FFFBEB;
  --color-warning:      #D97706;
  --color-warning-dark: #B45309;
  --color-error-bg:     #FEF2F2;
  --color-error:        #DC2626;
  --color-error-dark:   #B91C1C;
  --color-error-darker: #991B1B;
  --color-info-bg:      #F2F6FD;
  --color-info:         #1349A0;

  /* Tipografia */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Espaçamento (grid 4px) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03);

  /* Grid e layout */
  --container-max: 1280px;
  --content-max-width: 720px;

  /* Overrides do Bootstrap 5.3 (design-system, seção 11) */
  --bs-primary:          var(--color-primary-500);
  --bs-primary-rgb:      19, 73, 160;
  --bs-font-sans-serif:  'Inter', system-ui, -apple-system, sans-serif;
  --bs-border-radius:    var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-body-bg:          var(--color-gray-50);
  --bs-body-color:       var(--color-gray-700);
  --bs-secondary-color:  var(--color-gray-500);
  --bs-border-color:     var(--color-gray-300);
}

body {
  font-family: var(--bs-font-sans-serif);
}

/* Alvo de toque mínimo em mobile (spec Seção 1 — WCAG 2.5.5 / Apple HIG, 44x44px) */
@media (max-width: 767.98px) {
  .btn,
  .nav-link,
  a.card-cta,
  .navbar-toggler {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Botões — design-system §7 */
.btn-primary {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  font-weight: var(--font-medium);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}
.btn-outline-primary {
  color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  border-width: 1.5px;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary-500);
  color: var(--color-white);
}

/* Cards — design-system §7 */
.card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Nav Tabs — design-system §7 (usar nav-tabs, nunca nav-pills) */
.nav-tabs .nav-link.active {
  background-color: #EEF4FF;
  color: var(--color-primary-500);
  font-weight: var(--font-semibold);
  border-bottom-color: #EEF4FF;
}

/* Badge de desconto anual — design-system §7 */
.badge-desconto {
  background-color: var(--color-success-bg);
  color: var(--color-success-dark);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  display: inline-block;
}

/* Card de plano recomendado — destaque de borda (spec Seção 5) */
.plano-recomendado {
  border-color: var(--color-primary-500);
  border-width: 2px;
  position: relative;
}
.plano-recomendado .selo-recomendado {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-primary-500);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 2px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Hero institucional — design-system §10 (fundo escuro, headline branca, acento verde) */
.hero-institucional {
  background-color: var(--color-gray-900);
  color: var(--color-white);
  padding: var(--space-24) 0;
}
.hero-institucional .acento-verde {
  color: var(--color-accent-muted);
}
.hero-institucional h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}
.hero-institucional p.lead {
  color: var(--color-gray-300);
  font-size: var(--text-lg);
}

@media (max-width: 767.98px) {
  .hero-institucional {
    padding: var(--space-16) 0;
  }
  .hero-institucional h1 {
    font-size: var(--text-3xl);
  }
}

/* Seção alternada de fundo (design-system §10 — fundo geral gray-50, seções brancas) */
.section-alt {
  background-color: var(--color-white);
}

/* Placeholder de feature fictícia (spec Seção 5 — remover antes do lançamento) */
.feature-placeholder {
  color: var(--color-gray-500);
}