/* ==========================================
   RC Design Tokens — FIX-86 (Fase 2 hoja de ruta)
   repuestoscalderas.com
   Carga: DESPUÉS de theme.css, ANTES de rc-responsive-final-*.css
   Objetivo: eliminar guerra de specificity con Bootstrap .btn-primary
   ========================================== */

:root {
  /* === RC Brand palette === */
  --rc-navy: #1a2b4a;
  --rc-navy-hover: #0f1d37;
  --rc-navy-dark: #0a1322;

  --rc-red: #c82333;
  --rc-red-hover: #a71d2a;

  --rc-success: #28a745;
  --rc-warning: #ff9a52;
  --rc-gray-text: #6c757d;

  /* === RC Component tokens (semánticos) === */
  --rc-cta-bg: var(--rc-navy);
  --rc-cta-bg-hover: var(--rc-red);
  --rc-cta-color: #fff;

  --rc-link: var(--rc-navy);
  --rc-link-hover: var(--rc-red);

  --rc-card-bg: #fff;
  --rc-card-border: #e9ecef;
  --rc-card-radius: 12px;
  --rc-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --rc-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* === Override Bootstrap 4 vars del tema Warehouse === */
  --primary: var(--rc-navy);
  --danger: var(--rc-red);
}

/* ==========================================
   Component overrides (specificity mínima = 1 clase)
   Ganan a theme.css por orden de cascada
   ========================================== */

/* Botón primario unificado — elimina CTA azul brillante en toda la web */
.btn-primary,
.btn-primary:focus {
  background-color: var(--rc-cta-bg);
  border-color: var(--rc-cta-bg);
  color: var(--rc-cta-color);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--rc-cta-bg-hover);
  border-color: var(--rc-cta-bg-hover);
  color: var(--rc-cta-color);
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(26, 43, 74, 0.5);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--rc-cta-bg);
  border-color: var(--rc-cta-bg);
  color: var(--rc-cta-color);
  opacity: 0.65;
}

/* Enlaces alineados con brand */
a {
  color: var(--rc-link);
}
a:hover {
  color: var(--rc-link-hover);
}
