:root {

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

    --color-primary: #004ea8;
    --color-primary-dark: #002d72;

    --color-secondary: #46c73d;

    --color-text: #1e1e1e;
    --color-text-light: #666666;

    --color-background: #ffffff;
    --color-background-light: #f5f7fa;

    --color-border: #e3e3e3;


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

    --font-size-xs: 0.875rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2.5rem;
    --font-size-xxl: 4rem;


    /*
    =====================
    SPACING
    =====================
    */

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

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

    --radius-sm:10px;
    --radius-md:20px;
    --radius-lg:30px;


    /*
    =================================
    TRANSITIONS
    =================================
    */

    --transition-fast:0.3s;
    --transition-normal:0.5s;


    /*
    =================================
    SHADOWS
    =================================
    */

    --shadow-sm:0 4px 15px rgba(0,0,0,.1);

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

}