/* ============================================================================
 * Espaço Casa Design System (ECDS) — Bootstrap 5.3 Overrides
 * ----------------------------------------------------------------------------
 * Story 4.1 / EPIC-004
 *
 * Mapeia os tokens ECDS para as variáveis CSS do Bootstrap 5.3, herdando
 * automaticamente em todos os componentes nativos (.btn, .card, .table,
 * .form-control etc.) sem precisar reescrevê-los.
 *
 * Carregar SEMPRE depois de bootstrap.min.css e tokens.css.
 *
 * Restrição absoluta: zero serifa no projeto.
 * ========================================================================= */

:root {
  /* ─── Cores primárias do Bootstrap → ECDS ───────────────────────────── */
  --bs-primary:           var(--ec-yellow);
  --bs-primary-rgb:       255, 230, 0;

  /* Body */
  --bs-body-bg:           var(--ec-white);
  --bs-body-color:        var(--ec-black);
  --bs-body-color-rgb:    26, 26, 26;
  --bs-body-font-family:  var(--ec-font-sans);
  --bs-body-font-size:    15px;
  --bs-body-font-weight:  400;
  --bs-body-line-height:  1.7;

  /* Bordas */
  --bs-border-color:        var(--ec-gray-100);
  --bs-border-color-translucent: rgba(232, 230, 224, 0.5);
  --bs-border-radius:       var(--ec-radius-md);
  --bs-border-radius-sm:    var(--ec-radius-sm);
  --bs-border-radius-lg:    var(--ec-radius-lg);
  --bs-border-radius-pill:  var(--ec-radius-pill);

  /* Links */
  --bs-link-color:        var(--ec-black);
  --bs-link-color-rgb:    26, 26, 26;
  --bs-link-hover-color:  var(--ec-black);
}

/* ============================================================================
 * Botão Primário — override crítico
 *
 * Bootstrap default usa texto branco sobre cor primária. Para o EY,
 * o CTA primário é texto PRETO sobre fundo amarelo. Esta sobrescrita é
 * obrigatória — sem ela o botão fica ilegível (branco sobre amarelo).
 * ========================================================================= */
.btn-primary {
  --bs-btn-bg:                var(--ec-yellow);
  --bs-btn-color:             var(--ec-black);
  --bs-btn-border-color:      var(--ec-yellow);
  --bs-btn-hover-bg:          #FFED33;
  --bs-btn-hover-color:       var(--ec-black);
  --bs-btn-hover-border-color: #FFED33;
  --bs-btn-active-bg:         #E6CF00;
  --bs-btn-active-color:      var(--ec-black);
  --bs-btn-active-border-color: #E6CF00;
  --bs-btn-disabled-bg:       var(--ec-gray-100);
  --bs-btn-disabled-color:    var(--ec-gray-600);
  --bs-btn-disabled-border-color: var(--ec-gray-100);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Botão secundário (outline-dark) — borda preta, fundo transparente */
.btn-outline-dark {
  --bs-btn-color:             var(--ec-black);
  --bs-btn-border-color:      var(--ec-black);
  --bs-btn-hover-bg:          var(--ec-gray-50);
  --bs-btn-hover-color:       var(--ec-black);
  --bs-btn-hover-border-color: var(--ec-black);
  --bs-btn-active-bg:         var(--ec-gray-100);
  --bs-btn-active-color:      var(--ec-black);
  border-width: 1.5px;
  font-weight: 500;
}

/* Botão destrutivo: usar `.btn-outline-danger` mas com tom bordô EY */
.btn-outline-danger {
  --bs-btn-color:             var(--ec-state-error);
  --bs-btn-border-color:      var(--ec-state-error);
  --bs-btn-hover-bg:          var(--ec-state-error);
  --bs-btn-hover-color:       var(--ec-white);
  --bs-btn-hover-border-color: var(--ec-state-error);
  border-width: 1.5px;
  font-weight: 500;
}

/* ============================================================================
 * Cards — sombra sutil, bordas neutras
 * ========================================================================= */
.card {
  border: 0.5px solid var(--ec-gray-100);
  border-radius: var(--ec-radius-md);
  background-color: var(--ec-white);
}

.card:hover {
  /* sombra sutil só em cards interativos (controlado pela classe pai) */
}

/* ============================================================================
 * Tabelas — densidade EY, sem listras coloridas
 * ========================================================================= */
.table {
  --bs-table-bg:           transparent;
  --bs-table-border-color: var(--ec-gray-100);
  --bs-table-hover-bg:     var(--ec-gray-50);
  --bs-table-color:        var(--ec-black);
}

.table > thead {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ec-gray-600);
}

/* Proibido — listras coloridas violam parcimônia EY.
   Stripped tables ficam neutralizadas; usar `.ec-table--compact` no futuro. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--ec-gray-50);
}

/* ============================================================================
 * Formulários — foco amarelo, raios pequenos, neutros
 * ========================================================================= */
.form-control,
.form-select {
  border: 1px solid var(--ec-gray-100);
  border-radius: var(--ec-radius-sm);
  font-size: 15px;
  color: var(--ec-black);
  background-color: var(--ec-white);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ec-yellow);
  box-shadow: 0 0 0 0.2rem rgba(255, 230, 0, 0.25);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--ec-state-error);
}

.invalid-feedback {
  color: var(--ec-state-error);
}

/* ============================================================================
 * Modais e Offcanvas — sombra ECDS, cabeçalhos limpos
 * ========================================================================= */
.modal-content,
.offcanvas {
  border: none;
  border-radius: var(--ec-radius-md);
  box-shadow: var(--ec-shadow-modal);
}

.modal-header,
.offcanvas-header {
  border-bottom: 0.5px solid var(--ec-gray-100);
  padding: var(--ec-space-4) var(--ec-space-6);
}

.modal-title,
.offcanvas-title {
  font-family: var(--ec-font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ============================================================================
 * Navbar — neutralizada para os layouts que ainda usam navbar-dark
 * ========================================================================= */
.navbar.bg-dark {
  --bs-navbar-color:        rgba(255, 255, 255, 0.85);
  --bs-navbar-hover-color:  var(--ec-yellow);
  --bs-navbar-active-color: var(--ec-white);
  background-color: var(--ec-black) !important;
}

/* ============================================================================
 * Cabeçalhos editoriais sem serifa — reforço do reset em tokens.css
 * (necessário porque o Bootstrap também define h1-h6)
 * ========================================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ec-font-sans) !important;
}

/* ============================================================================
 * Links — sem azul Bootstrap, herdam preto + underline amarelo no hover
 * ========================================================================= */
a {
  color: var(--ec-black);
  text-decoration: none;
}

a:hover {
  color: var(--ec-black);
  text-decoration: underline;
  text-decoration-color: var(--ec-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Exceção: links da navbar não recebem underline amarelo */
.navbar a:hover,
.nav a:hover {
  text-decoration: none;
}

/* ============================================================================
 * Skip link de acessibilidade (já existente em layout.html)
 * ========================================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--ec-space-2);
  background: var(--ec-yellow);
  color: var(--ec-black);
  padding: var(--ec-space-2) var(--ec-space-4);
  border-radius: var(--ec-radius-sm);
  font-weight: 500;
  z-index: 9999;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: var(--ec-space-2);
}