/* ============================================================================
   JCC — Ponte Bootstrap 5.3 ↔ Design Tokens

   Faz o Bootstrap consumir os tokens de jcc-tokens.css em vez das cores padrão
   dele. Nenhuma cor literal vive aqui: toda regra aponta para um token
   semântico. Trocar o token muda o Bootstrap inteiro.

   ORDEM DE CARGA (obrigatória):
     1. bootstrap.min.css      ← framework
     2. jcc-tokens.css         ← define os tokens
     3. jcc-bootstrap.css      ← este arquivo, religa um no outro

   POR QUE EXISTEM DUAS PARTES:
   - O Bootstrap 5.3 expõe vars globais (--bs-primary, --bs-body-bg…) que basta
     redefinir no :root.
   - Mas cada componente (.btn-primary, .alert-danger…) redeclara as PRÓPRIAS
     vars com valores compilados do Sass. Essas precisam de override explícito,
     senão o azul #0d6efd volta. É a Parte 2.
   ========================================================================= */

/* ============================================================================
   PARTE 1 — Vars globais do Bootstrap
   ========================================================================= */

:root {
  /* ── Cores de marca ───────────────────────────────────────────────────── */
  --bs-primary:       var(--brand-primary);
  --bs-primary-rgb:   var(--brand-primary-rgb);
  --bs-secondary:     var(--brand-secondary);
  --bs-secondary-rgb: var(--brand-secondary-rgb);

  /* ── Cores de status ──────────────────────────────────────────────────── */
  --bs-success:     var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-danger:      var(--danger);
  --bs-danger-rgb:  var(--danger-rgb);
  --bs-warning:     var(--warning);
  --bs-warning-rgb: var(--warning-rgb);
  --bs-info:        var(--info);
  --bs-info-rgb:    var(--info-rgb);

  /* ── Superfície e texto ───────────────────────────────────────────────── */
  --bs-body-bg:            var(--surface-page);
  --bs-body-bg-rgb:        var(--cream-200-rgb);
  --bs-body-color:         var(--text-primary);
  --bs-body-color-rgb:     var(--text-primary-rgb);
  --bs-secondary-color:    var(--text-secondary);
  --bs-tertiary-color:     var(--text-muted);
  --bs-emphasis-color:     var(--text-primary);
  --bs-heading-color:      var(--text-primary);

  --bs-secondary-bg:       var(--surface-raised);
  --bs-tertiary-bg:        var(--surface-raised);

  /* ── Bordas ───────────────────────────────────────────────────────────── */
  --bs-border-color:             var(--border-subtle);
  --bs-border-color-translucent: var(--border-subtle);

  --bs-border-radius:    var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-full);

  /* ── Links ────────────────────────────────────────────────────────────── */
  --bs-link-color:           var(--brand-primary);
  --bs-link-color-rgb:       var(--brand-primary-rgb);
  --bs-link-hover-color:     var(--brand-hover);
  --bs-link-hover-color-rgb: var(--brand-hover-rgb);

  /* ── Foco ─────────────────────────────────────────────────────────────── */
  --bs-focus-ring-color:  color-mix(in srgb, var(--border-focus) 25%, transparent);
  --bs-focus-ring-width:  3px;
  --bs-focus-ring-opacity: 1;

  /* ── Tipografia ───────────────────────────────────────────────────────── */
  --bs-font-sans-serif:   var(--font-body);
  --bs-body-font-family:  var(--font-body);
  --bs-body-font-size:    var(--font-size-base);
  --bs-body-font-weight:  var(--font-weight-regular);
  --bs-body-line-height:  1.5;
  --bs-font-monospace:    var(--font-family-mono);

  /* ── Sombra ───────────────────────────────────────────────────────────── */
  --bs-box-shadow:    var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);
}

/* Títulos usam a fonte display da marca (Oswald). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-title);
}

/* ============================================================================
   PARTE 2 — Componentes
   Cada bloco redefine as vars de componente do próprio Bootstrap.
   ========================================================================= */

/* ── Button: primary ──────────────────────────────────────────────────────
   Preenchido não tem borda visível (regra do DS): border-color = bg.
   ---------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg:                  var(--button-primary-bg);
  --bs-btn-border-color:        var(--button-primary-bg);
  --bs-btn-color:               var(--button-primary-label);
  --bs-btn-hover-bg:            var(--button-primary-bg-hover);
  --bs-btn-hover-border-color:  var(--button-primary-bg-hover);
  --bs-btn-hover-color:         var(--button-primary-label);
  --bs-btn-active-bg:           var(--button-primary-bg-hover);
  --bs-btn-active-border-color: var(--button-primary-bg-hover);
  --bs-btn-active-color:        var(--button-primary-label);
  --bs-btn-disabled-bg:         var(--button-primary-bg);
  --bs-btn-disabled-border-color: var(--button-primary-bg);
  --bs-btn-disabled-color:      var(--button-primary-on-disabled);
  --bs-btn-focus-shadow-rgb:    var(--brand-primary-rgb);
}

/* ── Button: secondary (dourado) ──────────────────────────────────────── */
.btn-secondary {
  --bs-btn-bg:                  var(--button-secondary-bg);
  --bs-btn-border-color:        var(--button-secondary-bg);
  --bs-btn-color:               var(--button-secondary-label);
  --bs-btn-hover-bg:            var(--gold-700);
  --bs-btn-hover-border-color:  var(--gold-700);
  --bs-btn-hover-color:         var(--button-secondary-label);
  --bs-btn-active-bg:           var(--gold-700);
  --bs-btn-active-border-color: var(--gold-700);
  --bs-btn-disabled-bg:         var(--button-secondary-bg);
  --bs-btn-disabled-border-color: var(--button-secondary-bg);
  --bs-btn-disabled-color:      var(--button-secondary-on-disabled);
  --bs-btn-focus-shadow-rgb:    var(--brand-secondary-rgb);
}

/* ── Button: outline ──────────────────────────────────────────────────────
   Regra imutável do DS: stroke e label da MESMA var.
   ---------------------------------------------------------------------- */
.btn-outline-primary {
  --bs-btn-color:               var(--button-outline-primary-label);
  --bs-btn-border-color:        var(--button-outline-primary-line);
  --bs-btn-hover-bg:            var(--brand-primary);
  --bs-btn-hover-border-color:  var(--brand-primary);
  --bs-btn-hover-color:         var(--brand-on-primary);
  --bs-btn-active-bg:           var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-active-color:        var(--brand-on-primary);
  --bs-btn-disabled-color:      var(--text-disabled);
  --bs-btn-disabled-border-color: var(--text-disabled);
  --bs-btn-focus-shadow-rgb:    var(--brand-primary-rgb);
}

.btn-outline-secondary {
  --bs-btn-color:               var(--button-outline-secondary-label);
  --bs-btn-border-color:        var(--button-outline-secondary-line);
  --bs-btn-hover-bg:            var(--text-secondary);
  --bs-btn-hover-border-color:  var(--text-secondary);
  --bs-btn-hover-color:         var(--surface-default);
  --bs-btn-disabled-color:      var(--text-disabled);
  --bs-btn-disabled-border-color: var(--text-disabled);
}

/* ── Button: status ───────────────────────────────────────────────────── */
.btn-success {
  --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: var(--emerald-900); --bs-btn-hover-border-color: var(--emerald-900);
  --bs-btn-focus-shadow-rgb: var(--success-rgb);
}
.btn-danger {
  --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--red-900); --bs-btn-hover-border-color: var(--red-900);
  --bs-btn-focus-shadow-rgb: var(--danger-rgb);
}
.btn-warning {
  --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning);
  --bs-btn-color: var(--neutral-900); --bs-btn-hover-color: var(--neutral-900);
  --bs-btn-hover-bg: var(--amber-700); --bs-btn-hover-border-color: var(--amber-700);
  --bs-btn-focus-shadow-rgb: var(--warning-rgb);
}

/* ── Button: geometria comum ──────────────────────────────────────────── */
.btn {
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-font-weight:   var(--font-weight-semibold);
  --bs-btn-padding-x:     var(--space-control-padding-x-md);
  --bs-btn-padding-y:     var(--space-control-padding-y-md);
  transition: background-color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease);
}
.btn-sm {
  --bs-btn-padding-x: var(--space-control-padding-x-sm);
  --bs-btn-padding-y: var(--space-control-padding-y-sm);
}
.btn-lg {
  --bs-btn-padding-x: var(--space-control-padding-x-lg);
  --bs-btn-padding-y: var(--space-control-padding-y-lg);
  --bs-btn-border-radius: var(--radius-lg);
}

/* ── Formulários ──────────────────────────────────────────────────────────
   O foco do .form-control não usa var no Bootstrap — precisa de regra real.
   ---------------------------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--input-bg);
  border-color:     var(--input-border);
  color:            var(--text-primary);
  border-radius:    var(--radius-md);
  padding-inline:   var(--input-padding-x);
}
.form-control::placeholder { color: var(--input-placeholder); }

.form-control:focus,
.form-select:focus {
  border-color: var(--input-border-focus);
  box-shadow:   0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-label {
  color:       var(--input-label);
  font-weight: var(--font-weight-medium);
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color:     var(--brand-primary);
}
.form-check-input:focus {
  border-color: var(--input-border-focus);
  box-shadow:   0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Mensagens de validação do ASP.NET (jquery-validation-unobtrusive) */
.invalid-feedback,
.field-validation-error,
span.text-danger { color: var(--danger-text); }

.input-validation-error {
  border-color: var(--danger);
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.card {
  --bs-card-bg:            var(--card-bg);
  --bs-card-border-color:  var(--card-border);
  --bs-card-border-radius: var(--card-radius);
  --bs-card-color:         var(--text-primary);
  --bs-card-cap-bg:        var(--surface-raised);
  --bs-card-spacer-x:      var(--card-padding);
  --bs-card-spacer-y:      var(--card-padding);
}

/* ── Alert ────────────────────────────────────────────────────────────────
   Fundo "soft" via color-mix sobre a cor de status — nunca hex fixo.
   ---------------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: var(--radius-md);
}
.alert-success {
  --bs-alert-bg:           var(--success-soft);
  --bs-alert-border-color: var(--success-border);
  --bs-alert-color:        var(--success-text);
}
.alert-danger {
  --bs-alert-bg:           var(--danger-soft);
  --bs-alert-border-color: var(--danger-border);
  --bs-alert-color:        var(--danger-text);
}
.alert-warning {
  --bs-alert-bg:           var(--warning-soft);
  --bs-alert-border-color: var(--warning-border);
  --bs-alert-color:        var(--warning-text);
}
.alert-info {
  --bs-alert-bg:           var(--info-soft);
  --bs-alert-border-color: var(--info-border);
  --bs-alert-color:        var(--info-text);
}

/* ── Badge ────────────────────────────────────────────────────────────── */
.badge {
  --bs-badge-border-radius: var(--badge-radius);
  --bs-badge-font-weight:   var(--font-weight-semibold);
}
/* text-bg-* usa a cor sólida + texto calculado pelo BS; forçamos o par correto */
.text-bg-secondary,
.text-bg-warning { color: var(--brand-on-secondary) !important; }

/* ── Tabela ───────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg:          var(--surface-default);
  --bs-table-color:       var(--text-primary);
  --bs-table-border-color: var(--border-subtle);
  --bs-table-striped-bg:  var(--surface-raised);
  --bs-table-hover-bg:    color-mix(in srgb, var(--brand-primary) 6%, transparent);
}

/* ── Navbar / dropdown ────────────────────────────────────────────────── */
.navbar {
  --bs-navbar-color:        var(--text-inverse);
  --bs-navbar-hover-color:  var(--brand-accent);
  --bs-navbar-active-color: var(--brand-accent);
  --bs-navbar-brand-color:  var(--brand-accent);
}
.dropdown-menu {
  --bs-dropdown-bg:          var(--surface-default);
  --bs-dropdown-border-color: var(--border-subtle);
  --bs-dropdown-link-color:  var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--surface-raised);
  --bs-dropdown-link-active-bg: var(--brand-primary);
  --bs-dropdown-link-active-color: var(--brand-on-primary);
  --bs-dropdown-border-radius: var(--radius-md);
}

/* ── Modal / offcanvas ────────────────────────────────────────────────── */
.modal {
  --bs-modal-bg:            var(--surface-default);
  --bs-modal-border-color:  var(--border-subtle);
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-color:         var(--text-primary);
}

/* ── Paginação ────────────────────────────────────────────────────────── */
.pagination {
  --bs-pagination-color:            var(--text-secondary);
  --bs-pagination-bg:               var(--surface-default);
  --bs-pagination-border-color:     var(--border-subtle);
  --bs-pagination-hover-bg:         var(--surface-raised);
  --bs-pagination-active-bg:        var(--brand-primary);
  --bs-pagination-active-border-color: var(--brand-primary);
  --bs-pagination-active-color:     var(--brand-on-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* ── Foco global consistente ──────────────────────────────────────────────
   focus-visible (não :focus) — evita anel ao clicar com o mouse.
   ---------------------------------------------------------------------- */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
  outline: var(--bs-focus-ring-width) solid var(--border-focus);
  outline-offset: 2px;
  box-shadow: none;
}