/* =========================================================
   DOLCI HANDS
   IDENTIDAD VISUAL
   ========================================================= */


/* =========================================================
   PALETA
   ========================================================= */

:root {

    /* -----------------------------------------------------
       COLORES PRINCIPALES
       ----------------------------------------------------- */

    --dh-cream:
        #F7F0E6;

    --dh-cream-warm:
        #EFE1CF;

    --dh-kraft:
        #D8B892;

    --dh-terracotta:
        #B86F5B;

    --dh-powder-rose:
        #C99187;

    --dh-chocolate:
        #4A2C24;

    --dh-chocolate-deep:
        #2F1C18;

    --dh-warm-white:
        #FFFDF8;


    /* -----------------------------------------------------
       COLORES FUNCIONALES
       ----------------------------------------------------- */

    --color-background:
        var(--dh-cream);

    --color-surface:
        var(--dh-warm-white);

    --color-surface-warm:
        var(--dh-cream-warm);

    --color-text:
        var(--dh-chocolate-deep);

    --color-text-soft:
        var(--dh-chocolate);

    --color-primary:
        var(--dh-chocolate);

    --color-primary-deep:
        var(--dh-chocolate-deep);

    --color-accent:
        var(--dh-terracotta);

    --color-accent-soft:
        var(--dh-powder-rose);

    --color-border:
        rgba(74, 44, 36, 0.18);

    --color-border-soft:
        rgba(74, 44, 36, 0.10);


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

    --font-display:
        Georgia,
        "Times New Roman",
        serif;

    --font-body:
        Arial,
        Helvetica,
        sans-serif;


    /* -----------------------------------------------------
       PESOS
       ----------------------------------------------------- */

    --font-weight-regular:
        400;

    --font-weight-medium:
        500;

    --font-weight-semibold:
        600;

    --font-weight-bold:
        700;


    /* =====================================================
       TAMAÑOS
       ===================================================== */

    --text-xs:
        0.75rem;

    --text-sm:
        0.875rem;

    --text-base:
        1rem;

    --text-md:
        1.125rem;

    --text-lg:
        1.25rem;

    --text-xl:
        1.5rem;

    --text-2xl:
        2rem;

    --text-3xl:
        2.75rem;

    --text-4xl:
        3.5rem;

    --text-5xl:
        4.5rem;


    /* =====================================================
       ANCHOS
       ===================================================== */

    --container-width:
        1280px;

    --container-padding:
        40px;


    /* =====================================================
       ESPACIADO
       ===================================================== */

    --space-1:
        4px;

    --space-2:
        8px;

    --space-3:
        12px;

    --space-4:
        16px;

    --space-5:
        20px;

    --space-6:
        24px;

    --space-8:
        32px;

    --space-10:
        40px;

    --space-12:
        48px;

    --space-16:
        64px;

    --space-20:
        80px;

    --space-24:
        96px;

    --space-32:
        128px;


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

    --radius-sm:
        8px;

    --radius-md:
        14px;

    --radius-lg:
        20px;

    --radius-xl:
        28px;

    --radius-pill:
        999px;


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

    --shadow-soft:
        0 8px 30px rgba(47, 28, 24, 0.07);

    --shadow-medium:
        0 16px 45px rgba(47, 28, 24, 0.10);


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

    --transition-fast:
        160ms ease;

    --transition-normal:
        240ms ease;

    --transition-slow:
        380ms ease;


    /* =====================================================
       Z-INDEX
       ===================================================== */

    --z-base:
        1;

    --z-header:
        100;

    --z-dropdown:
        500;

    --z-modal:
        1000;

    --z-notification:
        1100;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    :root {

        --container-padding:
            24px;

        --text-5xl:
            3.25rem;

        --text-4xl:
            2.75rem;

        --text-3xl:
            2.25rem;

    }

}


@media (max-width: 600px) {

    :root {

        --container-padding:
            18px;

        --text-5xl:
            2.75rem;

        --text-4xl:
            2.35rem;

        --text-3xl:
            2rem;

        --text-2xl:
            1.75rem;

        --space-24:
            72px;

        --space-20:
            60px;

        --space-16:
            48px;

    }

}