/* =============================================================================
   skin.css — PIEL del cliente Xperto Automotriz.
   Único archivo que cambia entre clientes de la fábrica SISEG.
   Override de paleta + tipografía sobre tokens.css. NO redefine spacing/
   sombras/radios/grises del sistema — esos permanecen intactos.
   Usa los nombres REALES del DS (tokens.css). Sin fallbacks hex en var().
   =============================================================================

   ESCALA DE COLOR:
     marca.colores.primary   = #FF0000  (rojo Xperto — elegido por el cliente)
     marca.colores.secondary = #000000  (negro estructural Xperto)

   Metodología de escala:
     lighter = mezcla 80 % blanco + 20 % main
     light   = mezcla 50 % blanco + 50 % main
     main    = color de marca
     dark    = mezcla 70 % main + 30 % negro
     darker  = mezcla 45 % main + 55 % negro
   (Para secondary = #000000 no hay shade más profundo → dark = darker = #000000)

   TIPOGRAFÍA — decisiones:
     marca.tipografia.titulos = "Russo One"  (Google Fonts, solo weight 400)
     marca.tipografia.cuerpo  = "Inter"      (Google Fonts, weights 400/500/600/700)

   El sitio vivo también usa "centrale Sans" (fuente OTF propia) en botones
   del header y menú desktop. Se declara abajo como @font-face con los
   archivos OTF del backup. Ver sección SELF-HOSTING para indicaciones al
   Shell-agent (Task 4).
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Paleta primaria — rojo Xperto (#FF2015)
     --------------------------------------------------------------------------- */
  --palette-primary-lighter:     #FFCCCC;   /* tint  (80% blanco + 20% main) */
  --palette-primary-light:       #FF8080;   /* tint  (50% blanco + 50% main) */
  --palette-primary-main:        #FF0000;   /* rojo Xperto — elegido por el cliente (rojo puro) */
  --palette-primary-dark:        #B30000;   /* shade (70% main + 30% negro) */
  --palette-primary-darker:      #730000;   /* shade (45% main + 55% negro) */
  --palette-primary-contrastText:#FFFFFF;

  /* ---------------------------------------------------------------------------
     Paleta secundaria — negro estructural Xperto (#000000)
     (nav, secciones oscuras, overlays; no hay shade posible por debajo de #000)
     --------------------------------------------------------------------------- */
  --palette-secondary-lighter:     #CCCCCC; /* tint 80 % */
  --palette-secondary-light:       #666666; /* tint 40 % */
  --palette-secondary-main:        #000000; /* negro de marca */
  --palette-secondary-dark:        #000000; /* no hay shade inferior al negro */
  --palette-secondary-darker:      #000000; /* ídem */
  --palette-secondary-contrastText:#FFFFFF;

  /* ---------------------------------------------------------------------------
     Shape — radio de botones (camaleón: sobreescribe --radius-md solo para .btn)
     Live site: ~3px (prácticamente cuadrado, diferente del radio de tarjetas DS)
     --------------------------------------------------------------------------- */
  --radius-btn: 3px;

  /* ---------------------------------------------------------------------------
     Tipografía de marca — self-hosted por el Shell-agent en Task 4
     (woff2 en site/assets/fonts/)
     --------------------------------------------------------------------------- */
  --font-primary:   'Inter',     system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Russo One', Georgia, 'Times New Roman', serif;
  /* --font-secondary-alt ('Sora' del core DS) no se usa en Xperto; se deja intacto. */
}

/* =============================================================================
   @font-face — Self-hosted (Task 4 — Shell-agent)
   INSTRUCCIÓN AL SHELL: convertir/copiar los archivos a site/assets/fonts/ en
   formato woff2 y completar los bloques src abajo.

   FAMILIAS Y PESOS A SELF-HOSTEAR:
   ┌─────────────┬────────────────────────────────────┬────────────────────────────────────────────────────┐
   │ Familia     │ Pesos necesarios                   │ Origen                                             │
   ├─────────────┼────────────────────────────────────┼────────────────────────────────────────────────────┤
   │ Inter       │ 400, 500, 600, 700                 │ Google Fonts → descargar woff2 variable o estáticos│
   │ Russo One   │ 400 (único disponible)             │ Google Fonts → descargar woff2                     │
   │ centrale    │ bold-italic, extra-light           │ COPIAR OTFs del backup:                            │
   │   Sans      │                                    │   Backup_Xperto_2025/wp-content/uploads/2024/11/   │
   │             │                                    │   centrale-sans-bold-italic.otf                    │
   │             │                                    │   centrale-sans-extra-light.otf                    │
   │             │                                    │ Convertir a woff2 con fonttools/pyftsubset o usar  │
   │             │                                    │ los OTF directamente (soporte moderno OK).         │
   │             │                                    │ NOTA: fuente propietaria — uso interno Xperto OK.  │
   └─────────────┴────────────────────────────────────┴────────────────────────────────────────────────────┘
   ============================================================================= */

/* Inter — cuerpo (Task 4 rellena src con rutas woff2 reales) */
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}

/* Russo One — títulos y headings (un solo weight) */
@font-face {
  font-family: 'Russo One';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/russo-one-400.woff2') format('woff2');
}

/* centrale Sans — botones de header y menú desktop (fuente propia del cliente) */
/* SHELL: copiar OTF del backup y convertir/copiar como woff2. Ver tabla arriba. */
@font-face {
  font-family: 'centrale Sans';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/centrale-sans-bold-italic.otf') format('opentype');
  /* Shell Task 4: woff2 not available; using OTF directly (modern browsers OK) */
}
@font-face {
  font-family: 'centrale Sans';
  font-style:  normal;
  font-weight: 200 500;   /* el vivo declara este OTF como peso normal (400) del menú; rango cubre 200–500 */
  font-display: swap;
  src: url('../fonts/centrale-sans-extra-light.otf') format('opentype');
  /* Shell Task 4: woff2 not available; using OTF directly (modern browsers OK) */
}