:root {

    /* ==========================
       COLORS
    ========================== */

    --color-primary: #F97316;
    --color-primary-hover: #EA580C;

    --color-dark: #1F2937;
    --color-dark-light: #374151;

    --color-white: #FFFFFF;

    --color-background: #F8FAFC;

    --color-border: #E5E7EB;

    --color-text: #111827;

    --color-text-light: #6B7280;


    /* ==========================
       CONTAINER
    ========================== */

    --container-width: 1440px;

    --container-padding: 20px;


    /* ==========================
       BORDER RADIUS
    ========================== */

    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;


    /* ==========================
       SHADOW
    ========================== */

    --shadow:
        0 8px 24px rgba(0,0,0,.08);


    /* ==========================
       TRANSITION
    ========================== */

    --transition: .25s ease;


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

    --header-height: 80px;


    /* ==========================
       FONT
    ========================== */

    --font-main: "Manrope", sans-serif;

}