/* ==========================================================================
   Repuestos Avenida — Tokens de marca compartidos
   --------------------------------------------------------------------------
   Paleta: dorado (del logo "RA") sobre carbón oscuro.
   Este archivo se linkea ANTES de los CSS específicos (style-cliente-ui.css,
   style-home.css, sign-in.css) para que todo el portal de clientes herede
   los mismos tokens. Para rebrandear, editar SOLO las variables de :root.
   ========================================================================== */

:root {
  /* Marca */
  --ra-gold: #c9a86a;        /* dorado principal del logo */
  --ra-gold-light: #e3cb94;  /* hover / realces */
  --ra-gold-dark: #a6884e;   /* bordes / estados activos */

  /* Superficies oscuras */
  --ra-charcoal: #1a1a1d;    /* fondo oscuro principal (navbar, hero, home) */
  --ra-charcoal-2: #26262b;  /* superficies / cards oscuras */
  --ra-charcoal-3: #33333a;  /* bordes sutiles sobre oscuro */

  /* Texto */
  --ra-cream: #f5f3ef;       /* texto sobre superficies oscuras */
  --ra-cream-muted: #c8c4bc; /* texto secundario sobre oscuro */
  --ra-ink: #2a2a2e;         /* texto sobre superficies claras */

  /* Superficies claras */
  --ra-bg-light: #fafaf8;    /* fondo claro de zonas de contenido */
  --ra-border-light: #e4e0d7;

  /* Estados */
  --ra-focus: rgba(201, 168, 106, 0.35);      /* sombra de foco dorada */
  --ra-gold-soft: rgba(201, 168, 106, 0.12);  /* fondos suaves (hover filas, seleccionados) */
  --ra-shadow: rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------ */
/* Utilidades compartidas                                             */
/* ------------------------------------------------------------------ */

/* Navbar de marca: fondo carbón, texto/realces dorados */
.ra-navbar {
  background: var(--ra-charcoal) !important;
  border-bottom: 2px solid var(--ra-gold);
  box-shadow: 0 2px 8px var(--ra-shadow);
}

.ra-navbar .navbar-brand {
  color: var(--ra-gold) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ra-navbar .navbar-brand:hover {
  color: var(--ra-gold-light) !important;
}

.ra-navbar .nav-link {
  color: var(--ra-cream) !important;
}

.ra-navbar .nav-link:hover {
  color: var(--ra-gold) !important;
}

/* Botón primario de marca (dorado con texto oscuro para contraste AA) */
.ra-btn-primary {
  background: var(--ra-gold);
  color: var(--ra-charcoal);
  border: 1px solid var(--ra-gold-dark);
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ra-btn-primary:hover,
.ra-btn-primary:focus {
  background: var(--ra-gold-dark);
  color: var(--ra-charcoal);
  box-shadow: 0 0 0 0.2rem var(--ra-focus);
}

/* Tarjeta oscura con realce dorado */
.ra-card {
  background: var(--ra-charcoal-2);
  color: var(--ra-cream);
  border: 1px solid var(--ra-gold);
  border-radius: 10px;
  box-shadow: 0 4px 14px var(--ra-shadow);
}