/* =========================================
   YELOSE TECH — VARIABLES GLOBALES
   Este archivo contiene las variables CSS globales
   y compartidas de toda la web corporativa.
   ========================================= */

:root {

    /* =========================================
       COLORES — ESCALA PRIMARIA (Morado Yelose)
       ========================================= */

    --color-primary-10: #fcf8fb; /* Fondos muy muy claros */
    --color-primary-50: #f0e3ed; /* Fondos muy claros */
    --color-primary-100: #d9bad0;
    --color-primary-200: #bc8eb0;
    --color-primary-300: #9c608f;
    --color-primary-400: #823c72;
    --color-primary-500: #6b1756; /* Color base */
    --color-primary-600: #60144d;
    --color-primary-700: #501140;
    --color-primary-800: #400e33;
    --color-primary-900: #2b0922; /* Textos muy oscuros */

    /* =========================================
       COLORES — ESCALA SECUNDARIA (Turquesa Yelose)
       ========================================= */

    --color-secondary-50: #e3eceb; /* Fondos de secciones alternas */
    --color-secondary-100: #bad0ce;
    --color-secondary-200: #8dafac;
    --color-secondary-300: #5e8d89a0;
    --color-secondary-400: #3a7570;
    --color-secondary-500: #16635C; /* Color base */
    --color-secondary-600: #145953; /* Hover de botones secundarios */
    --color-secondary-700: #114b46;
    --color-secondary-800: #0d3e3a;
    --color-secondary-900: #092a27; /* Detalles profundos */
    --color-secondary-light: #a4f2e7; /* Color iluminado de onda de sección */

    /* =========================================
       COLORES — NEUTROS
       ========================================= */

    --color-white: #ffffff;
    --color-black: #000000;

    /* =========================================
       TIPOGRAFÍA
       ========================================= */

       --font-size: clamp(1rem, 1.1vw + 0.4rem, 1.375rem);

    /* =========================================
       LAYOUT
       ========================================= */

    --content-padding-inline: 10%;

    /* =========================================
       ONDAS — clip-path
       ========================================= */

    --onda-superior-clara: shape(
        from 0% 100%,
        line to 100% 100%,
        line to 100% 60%,
        curve to 84% 32% with 93% 60% / 90% 44%,
        smooth to 62% 10% with 74% 10%,
        smooth to 26% 44% with 40% 32%,
        smooth to 0% 60% with 12% 60%,
        line to 0% 100%,
        close
    );
    --onda-superior-oscura-alargada: shape(
        from 0% 100%,
        line to calc(100% + 2rem) 100%,
        line to calc(100% + 2rem) 62%,
        curve to 86% 36% with 95% 62% / 91% 48%,
        smooth to 64% 14% with 76% 14%,
        smooth to 28% 46% with 42% 34%,
        smooth to 0% 62% with 12% 62%,
        line to 0% 100%,
        close
    );
    --onda-superior-oscura-contacto: shape(
        from 0% 100%,
        line to 100% 100%,
        line to 100% 62%,
        curve to 86% 36% with 95% 62% / 91% 48%,
        smooth to 64% 14% with 76% 14%,
        smooth to 28% 46% with 42% 34%,
        smooth to 0% 62% with 12% 62%,
        line to 0% 100%,
        close
    );
    --onda-inferior-clara: shape(
        from 0% 0%,
        line to 100% 0%,
        line to 100% 40%,
        curve to 84% 68% with 93% 40% / 90% 56%,
        smooth to 62% 90% with 74% 90%,
        smooth to 26% 56% with 40% 68%,
        smooth to 0% 40% with 12% 40%,
        line to 0% 0%,
        close
    );
    --onda-inferior-oscura-alargada: shape(
        from 0% 0%,
        line to calc(100% + 2rem) 0%,
        line to calc(100% + 2rem) 38%,
        curve to 86% 64% with 95% 38% / 91% 52%,
        smooth to 64% 86% with 76% 86%,
        smooth to 28% 54% with 42% 66%,
        smooth to 0% 38% with 12% 38%,
        line to 0% 0%,
        close
    );
}