/* ============================================================
   Espinoza Installations — TOKENS GULA (contrato de plantillas)
   Fuente de verdad visual: www.espinozainstalls.com/assets/css/style.css
   (sitio PHP original — leído como DATA, no copiado tal cual)
   Contrato de nombres: gateway/plugins/template-ingest.ts
   ============================================================ */

:root {
  /* CONTRATO GULA OBLIGATORIO (10 variables, nombres inmutables) */
  --color-bg: #f7f7f9;          /* fondo de página (style.css: --bg) */
  --color-surface: #ffffff;     /* superficies / tarjetas (style.css: --card) */
  --color-text: #000000;        /* texto base (style.css: --text) */
  --color-text-muted: #374151;  /* texto secundario (style.css: --muted) */
  --color-primary: #111827;     /* carbón oscuro — botones/header (style.css: --primary) */
  --color-secondary: #CC0000;   /* rojo marca (style.css: --secondary) */
  --color-accent: #CC0000;      /* rojo marca — highlights/links (style.css: --accent) */
  --color-border: #DDDDDD;      /* bordes (style.css: --border) */
  --font-family-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;

  /* TOKENS DERIVADOS (extensiones documentadas del contrato mínimo —
     fallback al token más cercano; patrón painterstennessee) */

  /* Rojo más oscuro para hovers del brand (style.css: --dark-red) */
  --color-secondary-hover: #B30000;

  /* Rojo claro para texto/acentos sobre fondos oscuros (hover/soft) */
  --color-secondary-soft: #ff8080;

  /* Anillo de foco (style.css: --ring) */
  --color-ring: rgba(204, 0, 0, 0.15);

  /* Gradiente de la promo bar / CTA de marca (style.css: --promo-bar-gradient) */
  --gradient-brand: linear-gradient(135deg, #CC0000 0%, #B30000 100%);

  /* Sombra estándar de tarjetas (style.css: --shadow) */
  --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.15);

  /* Radio de marca */
  --radius-brand: 10px;

  /* Blanco/negro de marca para texto sobre superficies de marca */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-black-soft: #1f2937;

  /* Texto claro sobre fondos oscuros/rojos (style.css usa rgba(255,255,255,0.8)) */
  --color-on-dark-muted: rgba(255, 255, 255, 0.8);

  /* Superficies y bordes auxiliares */
  --color-card-gray: #dddddd;   /* service-cards del home */
  --color-gray-strong: #888888; /* número circular de servicios */
  --color-border-light: #e5e5e5; /* borde del topbar */
  --color-ink: #333333;         /* texto sobre tarjetas grises */

  /* Fondo suave de hover para links de marca (promo bar) */\n  --color-secondary-soft-bg: #ffe0e0;\n\n  /* Estados funcionales */
  --color-success: #059669;     /* checks verdes de deals/estimat */
  --color-whatsapp: #25D366;    /* CTA de WhatsApp */
}