:root{

    /* COLORS */

    --kaesan-yellow:#FFD539;
    --kaesan-yellow-hover:#FFE15A;

    --kaesan-brown:#2B1A14;

    --kaesan-white:#FFFFFF;

    --kaesan-black:#1A1A1A;

    --kaesan-bg:#F7F1E8;



    /* RADIUS */

    --kaesan-radius-organic:
        34px 48px 42px 54px /
        46px 36px 50px 40px;

    --kaesan-radius-sm:12px;

    --kaesan-radius-md:20px;

    --kaesan-radius-lg:30px;



    /* SHADOWS */

    --kaesan-shadow-button:
        0 7px 0 rgba(43,26,20,.22),
        0 14px 22px rgba(0,0,0,.10);

    --kaesan-shadow-button-hover:
        0 10px 0 rgba(43,26,20,.18),
        0 20px 30px rgba(0,0,0,.18);

    --kaesan-shadow-card:
        0 12px 35px rgba(0,0,0,.08);



    /* TRANSITIONS */

    --kaesan-transition:.25s ease;



    /* SPACING */

    --kaesan-space-xs:.25rem;
    --kaesan-space-sm:.5rem;
    --kaesan-space-md:1rem;
    --kaesan-space-lg:2rem;
    --kaesan-space-xl:4rem;

}
/* ==========================================================
   BUTTON TOKENS
   ========================================================== */

:root {

    --btn-height-sm: 42px;
    --btn-height-md: 54px;
    --btn-height-lg: 66px;

    --btn-padding-sm: .65rem 1.2rem;
    --btn-padding-md: .9rem 1.6rem;
    --btn-padding-lg: 1.15rem 2rem;

    --btn-radius: var(--kaesan-radius-organic);

    --btn-shadow: var(--kaesan-shadow-button);
    --btn-shadow-hover: var(--kaesan-shadow-button-hover);

    --btn-transition: var(--kaesan-transition);

}
/* ==========================================================
   BUTTONS & QUANTITY
   ========================================================== */

:root{

    /* Heights */
    --kaesan-cart-height:36px;
    --kaesan-cart-height-mobile:50px;

    /* Quantity */
    --kaesan-qty-button:42px;
    --kaesan-qty-input:52px;
    --kaesan-qty-font:24px;
    --kaesan-qty-gap:14px;
    --kaesan-qty-padding:8px;

    --kaesan-qty-button-mobile:30px;
    --kaesan-qty-input-mobile:36px;
    --kaesan-qty-font-mobile:18px;
    --kaesan-qty-gap-mobile:8px;
    --kaesan-qty-padding-mobile:5px;

    /* Button */
    --kaesan-btn-radius:999px;

    --kaesan-btn-font-size:16px;
    --kaesan-btn-font-weight:600;

    --kaesan-btn-padding:0 10px;

    --kaesan-btn-bg:#FFD539;
    --kaesan-btn-bg-hover:#2B1A14;

    --kaesan-btn-text:#2B1A14;
    --kaesan-btn-text-hover:#FFFFFF;

}