/**
 * 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
 */
:root {
  /* 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;

  /* 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;
}