/**
 * Tokens del Sistema de Diseño — Recoplast
 *
 * Fuente: Figma → Sistema de diseño (nodeId 284:119)
 * Archivo: https://www.figma.com/design/1XqNuyNnFLI0p0KkK7fpIB/Recoplast
 *
 * NUNCA hardcodear valores en otros CSS — siempre usar estas variables.
 */

:root {
    /* ── Paleta de colores ── */
    --color-primary:       #004E5A;   /* Verde oscuro / Teal — color principal Recoplast */
    --color-secondary-1:   #448A2B;   /* Verde medio */
    --color-secondary-2:   #9CCBEC;   /* Azul claro */
    --color-secondary-3:   #ECF4E7;   /* Verde claro / Menta */
    --color-white:         #FFFFFF;
    --color-text:          #272626;   /* Texto principal */
    --color-text-light:    #666666;
    --color-bg:            #F6F6F6;   /* Fondo general */
    --color-bg-alt:        #FFFFFF;
    --color-overlay:       rgba(0, 78, 90, 0.80); /* Overlay hero: color primario 80% */
    --color-border:        #D9E8E4;

    /* Hero gradient (del Figma) */
    --gradient-hero: linear-gradient(
        160.74deg,
        rgb(0, 78, 90)  0%,
        rgb(0, 56, 64)  100%
    );

    /* ── Tipografía ── */
    --font-primary:    'Roboto', sans-serif;
    --font-weight-bold:    700;
    --font-weight-regular: 400;
    --font-weight-light:   300;

    /* Escala tipográfica */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-md:   1.125rem;   /* 18px */
    --text-lg:   1.25rem;    /* 20px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  1.875rem;   /* 30px */
    --text-3xl:  2.25rem;    /* 36px */
    --text-4xl:  3rem;       /* 48px */
    --text-5xl:  3.75rem;    /* 60px */

    --line-height-tight:  1.2;
    --line-height-normal: 1.6;
    --line-height-loose:  1.8;

    /* ── Espaciado ── */
    --space-xs:   0.25rem;   /* 4px  */
    --space-sm:   0.5rem;    /* 8px  */
    --space-md:   1rem;      /* 16px */
    --space-lg:   1.5rem;    /* 24px */
    --space-xl:   2rem;      /* 32px */
    --space-2xl:  3rem;      /* 48px */
    --space-3xl:  4rem;      /* 64px */
    --space-4xl:  6rem;      /* 96px */
    --space-5xl:  8rem;      /* 128px */

    /* ── Radios ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ── Sombras ── */
    --shadow-sm:  0 1px 3px rgba(0, 78, 90, 0.08);
    --shadow-md:  0 4px 12px rgba(0, 78, 90, 0.12);
    --shadow-lg:  0 8px 30px rgba(0, 78, 90, 0.16);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* ── Layout ── */
    --container-max:  1200px;
    --container-wide: 1400px;
    --header-height:  80px;
    --gutter:         1.5rem;

    /* ── Transiciones ── */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* ── Z-index ── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
}

/* ── Modo oscuro (si se necesita en el futuro) ── */
@media (prefers-color-scheme: dark) {
    /* Reservado para futura implementación */
}