/* ==========================================
   COMMERCEONE DESIGN SYSTEM
   ========================================== */

:root {

    /* ===========================
       CORES
    =========================== */

    --color-primary: #E63946;
    --color-primary-dark: #C1121F;
    --color-secondary: #FFC300;

    --color-success: #25D366;
    --color-success-dark: #128C7E;

    --color-white: #FFFFFF;
    --color-background: #F8F9FA;

    --color-title: #212529;
    --color-text: #495057;
    --color-light-text: #6C757D;

    --color-border: #E9ECEF;

    /* ===========================
       FONTES
    =========================== */

    --font-family: "Poppins", sans-serif;

    --font-light:300;
    --font-regular:400;
    --font-medium:500;
    --font-semibold:600;
    --font-bold:700;
    --font-black:800;

    /* ===========================
       TAMANHOS
    =========================== */

    --text-xs:12px;
    --text-sm:14px;
    --text-md:16px;
    --text-lg:18px;
    --text-xl:22px;
    --text-2xl:32px;
    --text-3xl:42px;
    --text-4xl:56px;

    /* ===========================
       ESPAÇAMENTOS
    =========================== */

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:48px;
    --space-xl:72px;
    --space-2xl:96px;

    /* ===========================
       BORDAS
    =========================== */

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:24px;
    --radius-round:999px;

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

    --shadow-sm:0 2px 8px rgba(0,0,0,.05);

    --shadow-md:0 10px 30px rgba(0,0,0,.08);

    --shadow-lg:0 20px 50px rgba(0,0,0,.12);

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

    --container:1200px;

    --transition:.3s ease;
}