:root {
    /* 
     * Colors
     */
    --color-gray-100: #000;
    --color-gray-85: #252525;
    --color-gray-70: #4D4D4D;
    --color-gray-60: #999999;
    --color-gray-08: #DEDEDE;
    --color-gray-07: #ECECEC;
    --color-gray-02: #F9F9F9;
    --color-gray-00: #FFF;
    --color-black: var(--color-gray-100);
    --color-black-hover: var(--color-gray-70);
    --color-black-light: var(--color-gray-70);
    --color-white: var(--color-gray-00);
    --color-white-hover: var(--color-gray-02);
    --color-white-light: var(--color-gray-02);
    --color-primary: #C00;
    --color-primary-hover: #A60000;
    --color-primary-light: #E68080;
    --color-danger: #90112C;
    --color-danger-hover: #90112C;
    --color-danger-light: #90112C;
    --color-success: #008448;
    --color-success-hover: #00512C;
    --color-success-light: #DFF0D8;
    --color-action: #0093DD;
    --color-action-hover: #007AB7;
    --color-action-light: #80C9EE;
    --color-warning: #EE7F00;
    --color-warning-hover: #C86B00;
    --color-warning-light: #EE7F00;
    --color-hightlight: #FFF854;
    --color-hightlight-hover: #C86B00;
    --color-hightlight-light: #C86B00;
    /* 
     * Spacing
     */
    --spacing-0: 0px;
    --spacing-3xs: 4px;
    --spacing-xxs: 8px;
    --spacing-xs: 12px;
    --spacing-sm: 17px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-xxl: 72px;
    --spacing-3xl: 100px;
    /* 
     * Font sizes
     */
    --font-size-3xs: 10px;
    --font-size-xxs: 12px;
    --font-size-xs: 14px;
    --font-size-sm: 15px;
    --font-size-md: 17px;
    --font-size-lg: 20px;
    --font-size-xl: 30px;
    --font-size-xxl: 45px;
    /* 
     * Font families
     */
    --font-book: wuerthbook, Arial;
    --font-bold: wuerthbold, Arial Bold;
    --font-extrabold: wuerthextra_bold_cond, Arial Black;
    /* 
     * Typography styles
     */
    --text-book-3xs-130: var(--font-size-fluid-3xs) / 130% var(--font-book);
    --text-bold-3xs-130: var(--font-size-fluid-3xs) / 130% var(--font-bold);
    --text-book-xxs-130: var(--font-size-fluid-xxs) / 130% var(--font-book);
    --text-book-xs-130: var(--font-size-fluid-xs) / 130% var(--font-book);
    --text-bold-xs-130: var(--font-size-fluid-xs) / 130% var(--font-bold);
    --text-book-sm-130: var(--font-size-fluid-sm) / 130% var(--font-book);
    --text-bold-sm-130: var(--font-size-fluid-sm) / 130% var(--font-bold);
    --text-bold-sm-100: var(--font-size-fluid-sm) / 100% var(--font-bold);
    --text-book-md-130: var(--font-size-fluid-md) / 130% var(--font-book);
    --text-bold-md-130: var(--font-size-fluid-md) / 130% var(--font-bold);
    --text-book-lg-130: var(--font-size-fluid-lg) / 130% var(--font-book);
    --text-bold-lg-130: var(--font-size-fluid-lg) / 130% var(--font-bold);
    --text-bold-xl-130: var(--font-size-fluid-xl) / 130% var(--font-bold);
    --text-bold-xxl-130: var(--font-size-fluid-xxl) / 130% var(--font-bold);
    /* 
     * Radii
     */
    --radius-xs: 4px;
    --radius-sm: 10px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-xl: 40px;
    --radius-xxl: 50px;
}

/**
 * Fluid variables depending on the screen size
 * [    Mobile   ][    Tablet    ][     Desktop     ]
 * |0px          |768px          |992px             |Infinity 
 */

 /* 
 * Mobile
 */
@media (max-width: 768px) {
    :root {
        /* 
         * Spacing
         */
        --spacing-fluid-3xs: var(--spacing-3xs);
        --spacing-fluid-xxs: var(--spacing-xxs);
        --spacing-fluid-xs: var(--spacing-xs);
        --spacing-fluid-sm: var(--spacing-xs);
        --spacing-fluid-md: var(--spacing-xs);
        --spacing-fluid-lg: var(--spacing-xs);
        --spacing-fluid-xl: var(--spacing-md);
        --spacing-fluid-xxl: var(--spacing-lg);
        --spacing-fluid-3xl: var(--spacing-xl);
        /* 
         * Font sizes
         */
        --font-size-fluid-3xs: var(--font-size-3xs);
        --font-size-fluid-xxs: var(--font-size-xxs);
        --font-size-fluid-xs: var(--font-size-xs);
        --font-size-fluid-sm: var(--font-size-sm);
        --font-size-fluid-md: var(--font-size-md);
        --font-size-fluid-lg: var(--font-size-md);
        --font-size-fluid-xl: var(--font-size-lg);
        --font-size-fluid-xxl: var(--font-size-xl);
        /* 
         * Radii
         */
        --radius-fluid-xs: var(--radius-xs);
        --radius-fluid-sm: var(--radius-sm);
        --radius-fluid-md: var(--radius-sm);
        --radius-fluid-lg: var(--radius-sm);
        --radius-fluid-xl: var(--radius-md);
        --radius-fluid-xxl: var(--radius-lg);
    }
}

/* 
 * Tablet
 */
@media (min-width: 768px) {
    :root {
        /* 
         * Spacing
         */
        --spacing-fluid-3xs: var(--spacing-3xs);
        --spacing-fluid-xxs: var(--spacing-xxs);
        --spacing-fluid-xs: var(--spacing-xs);
        --spacing-fluid-sm: var(--spacing-xs);
        --spacing-fluid-md: var(--spacing-sm);
        --spacing-fluid-lg: var(--spacing-md);
        --spacing-fluid-xl: var(--spacing-lg);
        --spacing-fluid-xxl: var(--spacing-xl);
        --spacing-fluid-3xl: var(--spacing-xxl);
        /* 
         * Font sizes
         */
        --font-size-fluid-3xs: var(--font-size-3xs);
        --font-size-fluid-xxs: var(--font-size-xxs);
        --font-size-fluid-xs: var(--font-size-xs);
        --font-size-fluid-sm: var(--font-size-sm);
        --font-size-fluid-md: var(--font-size-md);
        --font-size-fluid-lg: var(--font-size-lg);
        --font-size-fluid-xl: var(--font-size-xl);
        --font-size-fluid-xxl: var(--font-size-xxl);
        /* 
         * Radii
         */
        --radius-fluid-xs: var(--radius-xs);
        --radius-fluid-sm: var(--radius-sm);
        --radius-fluid-md: var(--radius-md);
        --radius-fluid-lg: var(--radius-md);
        --radius-fluid-xl: var(--radius-lg);
        --radius-fluid-xxl: var(--radius-xl);
    }
}

/* 
 * Desktop
 */
 @media (min-width: 992px) {
    :root {
        /* 
         * Spacing
         */
        --spacing-fluid-3xs: var(--spacing-3xs);
        --spacing-fluid-xxs: var(--spacing-xxs);
        --spacing-fluid-xs: var(--spacing-xs);
        --spacing-fluid-sm: var(--spacing-sm);
        --spacing-fluid-md: var(--spacing-md);
        --spacing-fluid-lg: var(--spacing-lg);
        --spacing-fluid-xl: var(--spacing-xl);
        --spacing-fluid-xxl: var(--spacing-xxl);
        --spacing-fluid-3xl: var(--spacing-3xl);
        /* 
         * Font sizes
         */
        --font-size-fluid-3xs: var(--font-size-3xs);
        --font-size-fluid-xxs: var(--font-size-xxs);
        --font-size-fluid-xs: var(--font-size-xs);
        --font-size-fluid-sm: var(--font-size-sm);
        --font-size-fluid-md: var(--font-size-md);
        --font-size-fluid-lg: var(--font-size-lg);
        --font-size-fluid-xl: var(--font-size-xl);
        --font-size-fluid-xxl: var(--font-size-xxl);
        /* 
         * Radii
         */
        --radius-fluid-xs: var(--radius-xs);
        --radius-fluid-sm: var(--radius-sm);
        --radius-fluid-md: var(--radius-md);
        --radius-fluid-lg: var(--radius-lg);
        --radius-fluid-xl: var(--radius-xl);
        --radius-fluid-xxl: var(--radius-xxl);
    }
}