/**
 * Theme CSS Variables — dynamic brand colors.
 *
 * Override --color-primary-rgb and --color-primary-dark-rgb from
 * WP Admin → Ajustes del Tema → General → Color Primario to rebrand
 * the entire site without rebuilding Tailwind.
 *
 * Format: space-separated R G B (no commas). Example: 0 120 186
 */

/* Tipografia de marca — self-hosted (fuente variable woff2, subset latin ~27KB).
   Reemplaza la fuente del sistema por Plus Jakarta Sans en todo el sitio, sin
   peticion externa render-blocking (a diferencia de Google Fonts). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;          /* variable: un solo archivo cubre todos los pesos */
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans.woff2') format('woff2');
}

:root {
  /* Tipografia — la lee Tailwind via var(--agregos-font-sans) */
  --agregos-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --agregos-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Brand colors — RGB channels for Tailwind alpha support */
  --color-primary-rgb: 0 120 186;          /* #0078ba */
  --color-primary-dark-rgb: 0 92 140;      /* #005c8c */
  --color-primary-light-rgb: 51 159 213;   /* #339fd5 */

  /* Hex fallbacks for non-Tailwind usage (inline styles, etc.) */
  --color-primary: #0078ba;
  --color-primary-light: #339fd5;
  --color-primary-dark: #005a8c;

  /* Promo colors */
  --color-promo-red:    #ef4444;
  --color-promo-purple: #9333ea;
  --color-promo-orange: #f97316;

  /* Rojo de llamada a la accion. Es el rojo que ya usa esencialpack.com en el
     boton APLICAR del selector de provincia; no confundir con --color-promo-red
     (rojo de Tailwind) ni con `error`, que es para estados de fallo. */
  --color-cta-red:      #eb0028;
  --color-cta-red-dark: #c40022;

  /* Layout */
  --container-max: 1400px;
  --header-height: 88px;
  --mobile-header-height: 64px;
  --mobile-bottom-nav-height: 60px;

  /* Transitions */
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-overlay:  400;
  --z-drawer:   500;
  --z-modal:    600;
  --z-toast:    700;
}