/**
 * Sistema de diseño "Safeguard Industrial" (Comercial Andexport).
 * Fuente: safeguard_design_system.json. Todo lo que no sea layout específico
 * de una sección debería salir de acá — un color o un tamaño de texto nuevo
 * se agrega en este archivo, no se escribe suelto en otro.
 */
:root {
    /* Fuentes: Manrope en todo el sitio, sin excepción — el sistema definía
       Nunito Sans para las etiquetas de UI, pero se descartó. --font-body
       queda igual a --font-heading para que ninguna referencia futura pueda
       reintroducir Nunito Sans por accidente. */
    --font-heading: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --font-body: var(--font-heading);

    /* Colores de marca */
    --color-brand-red: #de1a1c;
    --color-brand-red-dark: #b91517;
    --color-brand-red-texto: #d81719;      /* el rojo de marca como TEXTO sobre grises claros (4.5:1+); casi igual al de siempre */
    --color-brand-red-sobre-oscuro: #ea3c3e; /* el rojo de marca sobre fondos casi negros: 4.7:1 (el normal da 3.8:1) */
    --color-ink: #121212;          /* "black" del sistema */

    /* Neutros de superficie */
    --color-charcoal: #202224;
    --color-deep-blue: #052845;
    --color-gray-01: #626262;
    --color-gray-02: #989898;       /* solo bordes, íconos y fondos: como texto da 2.9:1 (no pasa) */
    --color-gray-texto: #6b6b6b;    /* gris para texto y placeholders: 5.3:1 sobre blanco, 4.9:1 sobre #f5f5f5 */
    --color-gray-03: #d9d9d9;
    --color-surface-01: #f3f4f6;
    --color-white: #ffffff;
    --color-fondo: #F5F5F5;
    --color-footer: #F8F8F8;

    /* Alias semánticos: lo que usan los componentes */
    --color-body: var(--color-charcoal);
    --color-muted: var(--color-gray-01);
    --color-border: var(--color-gray-03);
    --color-bg-muted: var(--color-surface-01);

    /* Colores por marca/división (topbar, tarjetas de sub-marca) */
    --color-chiller: #2f68af;
    --color-chiller-dark: #285895;   /* hover de los botones azules de Chiller */
    --color-envasados: #3c758c;      /* antes #5595ae: el blanco encima daba 3.3:1; ahora 5.1:1 */
    --color-envasados-dark: #31647a; /* hover de los botones de Envasados, mismo factor (~85%) que -chiller-dark */
    --color-anticorte: #da1c28;
    --color-anticorte-dark: #b91822; /* hover de los botones de Anticorte, mismo factor (~85%) que -chiller-dark */
    --color-tecser: #1f5da5;
    --color-tecser-dark: #1a4f8c; /* hover de los botones de Tecserchile, mismo factor (~85%) que -chiller-dark */
    --color-automatizacion: #da1c28;
    --color-automatizacion-dark: #b91822; /* mismo rojo que --color-anticorte(-dark): mismo valor de origen (#da1c28) */

    /* ItalZip: no es una de las 6 divisiones del home, es una marca aparte
       que solo aparece en "Conócenos" de Nosotros — color propio igual
       para el botón "Explorar página". */
    --color-italzip: #3a8030;        /* antes #4a9b3c (3.5:1 como texto); ahora 4.9:1 */

    /* Estado (botón "danger_cta" del sistema, ej. EMERGENCIA) */
    --color-warning: #f5a623;

    /* WhatsApp: no es del sistema de diseño, pero se repite (flotante + CTAs) */
    --color-whatsapp: #00801E;
    --color-whatsapp-dark: #006B18;

    /* LinkedIn: mismo criterio que WhatsApp — color de marca, no del sistema. */
    --color-linkedin: #0A66C2;
    --color-linkedin-dark: #084d8f;

    /* Tipografía: escala del sistema, en rem sobre base 16px */
    --text-display-h1: 3rem;        /* 48px · Manrope 700 */
    --text-header-h2: 2.25rem;      /* 36px · Manrope 700 */
    --text-header-h3: 1.875rem;     /* 30px · Manrope 700 */
    --text-title-h4: 1.5rem;        /* 24px · Manrope 700 */
    --text-title-h5: 1.25rem;       /* 20px · Manrope 700 */
    --text-title-h6: 1.125rem;      /* 18px · Manrope 700 */
    --text-body-lg: 1rem;           /* 16px · Manrope 400 */
    --text-body: 0.875rem;          /* 14px · Manrope 400 */
    --text-body-sm: 0.75rem;        /* 12px · Manrope 400 */
    --text-label: 1rem;             /* 16px · Manrope 700 */
    --text-label-sm: 0.875rem;      /* 14px · Manrope 700 */
    --text-caption: 0.75rem;        /* 12px · Manrope 400 */

    /* Espaciado: misma escala para gap/padding/margin en todo el sitio */
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;
    --space-64: 4rem;

    /* Radios: nombrados por el sistema + alias por uso */
    --radius-sharp: 0px;
    --radius-subtle: 2px;
    --radius-soft: 4px;
    --radius-standard: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-xlarge: 24px;    /* no estaba en el sistema original; se agrega acá y no suelto en el CSS que la necesitó (ver .producto-tabs) */
    --radius-pill: 30px;
    --radius-full: 50%;

    --radius: var(--radius-standard);      /* tarjetas, imágenes */
    --radius-sm: var(--radius-subtle);     /* detalles chicos */
    --radius-btn: var(--radius-medium);    /* botones */

    /* Layout */
    --container-width: 1280px;
    --container-padding: 1rem;

    /* Breakpoints (referencia — los media query no pueden leer variables) */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* Encabezados más chicos en teléfono: se cambian los tokens (no cada h1/h2/h3)
   para que todo lo que los usa —base.css y las hojas de cada sección— baje
   junto. 1.875rem en h2 es el mismo tamaño que ya usaba .section-head. */
@media (max-width: 639px) {
    :root {
        --text-display-h1: 2.25rem;  /* 36px, igual al .hero-title del inicio */
        --text-header-h2: 1.875rem;  /* 30px */
        --text-header-h3: 1.5rem;    /* 24px */
    }
}