/* ============================================================
   CLIENT CONFIG — Romero's Home Improvement
   Cambiar SOLO este archivo para re-tematizar el sitio completo.
   ============================================================ */
:root {
  /* Colores globales de marca */
  --brand-blue: #1800AD;
  --brand-blue-light: #3524d6;
  --brand-blue-dark: #10007a;
  --brand-gray: #A2A2A3;
  --brand-gray-light: #e9e9ea;
  --brand-gray-dark: #58585a;
  --brand-black: #000000;
  --brand-white: #FFFFFF;

  /* Semánticos, derivados de la paleta global */
  --color-bg: var(--brand-white);
  --color-bg-alt: #f5f5f7;
  --color-bg-dark: var(--brand-black);
  --color-text: #17171a;
  --color-text-muted: var(--brand-gray-dark);
  --color-text-on-dark: var(--brand-white);
  --color-accent: var(--brand-blue);
  --color-accent-contrast: var(--brand-white);
  --color-border: var(--brand-gray-light);

  /* Overlay para garantizar contraste sobre imágenes */
  --overlay-dark: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 100%);
  --overlay-dark-strong: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 100%);
  --overlay-brand: linear-gradient(135deg, rgba(24,0,173,.85) 0%, rgba(0,0,0,.75) 100%);

  /* Tipografía */
  --font-heading: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Espaciado / radios */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-card: 0 10px 30px rgba(0,0,0,.12);
  --shadow-card-hover: 0 20px 45px rgba(24,0,173,.22);

  /* Transiciones */
  --ease-smooth: cubic-bezier(.16,.84,.44,1);
}