/*
 * LEON'S BIKES Y ELECTRO
 * Capa final de marca para unificar pantallas nuevas y templates heredados.
 * Los colores canónicos viven en variables.css.
 */

html {
  background: var(--leons-bg);
}

body {
  background: var(--leons-bg);
  color: var(--leons-text);
}

::selection {
  background: rgba(255, 106, 0, .26);
  color: var(--leons-ink-strong);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(255, 106, 0, .32);
  outline-offset: 2px;
}

/* Componentes heredados de la tienda. */
.btn-primary,
.ss-btn-primary,
.okb-btn-primary {
  border-color: var(--leons-orange) !important;
  background: var(--leons-orange) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(255, 106, 0, .2);
}

.btn-primary:hover,
.ss-btn-primary:hover,
.okb-btn-primary:hover {
  border-color: var(--leons-orange-hover) !important;
  background: var(--leons-orange-hover) !important;
}

.btn-secondary,
.ss-btn-secondary,
.okb-btn-secondary {
  border-color: var(--leons-border-strong) !important;
  background: #fff !important;
  color: var(--leons-ink) !important;
}

.btn-secondary:hover,
.ss-btn-secondary:hover,
.okb-btn-secondary:hover {
  border-color: var(--leons-orange) !important;
  color: var(--leons-orange-hover) !important;
}

.card {
  border-color: var(--leons-border);
  background: var(--leons-surface);
  color: var(--leons-text);
  box-shadow: var(--shadow-sm);
}

.card :where(h1, h2, h3, h4) {
  color: var(--leons-ink);
}

.input,
input.input,
select.input,
textarea.input {
  border-color: var(--leons-border);
  background: #fff;
  color: var(--leons-text);
}

.input:focus,
input.input:focus,
select.input:focus,
textarea.input:focus {
  border-color: var(--leons-orange);
  box-shadow: 0 0 0 4px rgba(255, 106, 0, .12);
}

/* Compatibilidad con las capas OKB/Mateo que aún usan algunos parciales. */
.okb-cart-page {
  --okb-cart-brown: var(--leons-orange);
  --okb-cart-brown-dark: var(--leons-orange-hover);
  --okb-cart-camel: var(--leons-border-strong);
  --okb-cart-beige: var(--leons-orange-soft);
  --okb-cart-cream: var(--leons-bg);
  --okb-cart-black: var(--leons-ink);
  --okb-cart-gray: var(--leons-muted);
  --okb-cart-border: var(--leons-border);
  --okb-cart-surface: var(--leons-surface);
}

.mateo-pdp {
  --okb-pdp-brown: var(--leons-orange);
  --okb-pdp-brown-dark: var(--leons-orange-hover);
  --okb-pdp-camel: var(--leons-border-strong);
  --okb-pdp-beige: var(--leons-orange-soft);
  --okb-pdp-cream: var(--leons-bg);
  --okb-pdp-black: var(--leons-ink);
  --okb-pdp-gray: var(--leons-muted);
  --okb-pdp-border: var(--leons-border);
  --okb-pdp-surface: var(--leons-surface);
}

/* Normalización de utilidades Tailwind con colores de identidades anteriores. */
.bg-\[\#FAF7F1\],
.bg-\[\#FFFDF9\] {
  background-color: var(--leons-bg) !important;
}

.bg-\[\#F2EBD7\],
.bg-\[\#F4EAD6\],
.bg-\[\#FFFCF6\] {
  background-color: var(--leons-orange-soft) !important;
}

.bg-\[\#6E5437\],
.bg-\[\#8A6A3F\] {
  background-color: var(--leons-orange) !important;
}

.bg-\[\#5A4630\],
.bg-\[\#6F5430\],
.bg-\[\#181818\],
.bg-\[\#071b49\] {
  background-color: var(--leons-ink) !important;
}

.text-\[\#6E5437\],
.text-\[\#8A6A3F\],
.text-\[\#6F5430\] {
  color: var(--leons-orange-hover) !important;
}

.text-\[\#1C1C1E\],
.text-\[\#181818\],
.text-\[\#111111\],
.text-\[\#071b49\],
.text-\[\#0F172A\] {
  color: var(--leons-ink) !important;
}

.text-\[\#8E857A\],
.text-\[\#7A7167\],
.text-\[\#6B7280\],
.text-\[\#405174\] {
  color: var(--leons-muted) !important;
}

.border-\[\#D2B48C\],
.border-\[\#D8C7AD\],
.border-\[\#E1D5C7\],
.border-\[\#dfe4ec\] {
  border-color: var(--leons-border) !important;
}

.hover\:bg-\[\#5A4630\]:hover,
.hover\:bg-\[\#6F5430\]:hover {
  background-color: var(--leons-orange-hover) !important;
}

.hover\:bg-\[\#F2EBD7\]:hover,
.hover\:bg-\[\#E9DDC7\]:hover {
  background-color: var(--leons-orange-soft) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}