/* ==========================================================
   AMARILLO BEAUTY
   DESIGN SYSTEM
========================================================== */

:root{

    /* ======================================================
       COLORES
    ====================================================== */

    --primary:#F146A5;

    --primary-dark:#D92D8C;

    --secondary:#7C3AED;

    --accent:#FF8DD0;

    --success:#22C55E;

    --warning:#F59E0B;

    --danger:#EF4444;

    /* ======================================================
       NEUTROS
    ====================================================== */

    --dark:#18181B;

    --text:#27272A;

    --text-light:#71717A;

    --border:#E4E4E7;

    --background:#FFFFFF;

    --background-soft:#FAFAFA;

    --white:#FFFFFF;

    /* ======================================================
       DEGRADADOS
    ====================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #F146A5 0%,
            #7C3AED 100%
        );

    --gradient-soft:
        linear-gradient(
            135deg,
            rgba(241,70,165,.12),
            rgba(124,58,237,.08)
        );

    /* ======================================================
       SOMBRAS
    ====================================================== */

    --shadow-sm:
        0 5px 18px rgba(0,0,0,.05);

    --shadow:
        0 15px 45px rgba(0,0,0,.08);

    --shadow-lg:
        0 25px 60px rgba(0,0,0,.14);

    /* ======================================================
       BORDES
    ====================================================== */

    --radius-sm:12px;

    --radius:18px;

    --radius-lg:28px;

    --radius-xl:42px;

    /* ======================================================
       CONTENEDOR
    ====================================================== */

    --container:1280px;

    /* ======================================================
       HEADER
    ====================================================== */

    --header-height:90px;

    /* ======================================================
       TRANSICIONES
    ====================================================== */

    --transition:.30s ease;

}