@import url('reset.css');
@import url('layout.css');
@import url('theme.css');
@import url('components.css');

:root {
    /* -- Breakpoints --------------- */
    --breakpoint-xs: 0; /* Small Phones */
    --breakpoint-sm: 301px; /* Large Phones / Small Tablets (Default) */
    --breakpoint-md: 481px; /* Tablets */
    --breakpoint-lg: 769px; /* Large Tablets, Labtops & Small Desktops */
    --breakpoint-xl: 1025px; /* Large Desktops */
    --breakpoint-xxl: 1401px; /* Extra Large Desktops */

    /* -- Typography ---------------- */
    font-size: 100%; /* Default Browser Font Size: 16px */
    --font-size-h1: 3.052rem; /* 48.832px */
    --font-size-h2: 2.441rem; /* 39.056px */
    --font-size-h3: 1.953rem; /* 31.248px */
    --font-size-h4: 1.563rem; /* 25.008px */
    --font-size-h5: 1.25rem; /* 20px */
    --font-size-h6: 1rem; /* 16px */

    --font-size-xlarge: 3.815rem; /* 61.04px */
    --font-size-large: 1.953rem; /* 31.248px */
    --font-size-medium: 1.25rem; /* 20px */
    --font-size-base: 1rem; /* 16px */
    --font-size-small: 0.8rem; /* 12.8px */
    --font-size-xsmall: 0.64rem; /* 10.24px */

    @media screen and (min-width: 481px) {
        font-size: 112.5% /* 18px */
    }

    /* -- Layout -------------------- */
    --max-width: 1200px;

    /* -- Spacing ------------------- */
    --spacing-quarter: 0.25rem; /* 4px - 4.5px */
    --spacing-half: 0.5rem; /* 8px - 9px */
    --spacing-single: 1rem; /* 16px - 18px */
    --spacing-double: 2rem; /* 32px - 36px */
    --spacing-triple: 3rem; /* 48px - 54px */
    --spacing-quadruple: 4rem; /* 64px - 72px */

    /* -- Colors -------------------- */
    --color-accent: #614051;
    --color-accent-light: #8e6d8e;
    --color-accent-dark: #3d2b3d;

    --color-light: #f4f0f2;
    --color-medium: #91848b;
    --color-dark: #0d0b0c;

    --color-white: #fff;
    --color-gray: #91848b;
    --color-black: #000;

    --stroke-light: #e3dcdf;
    --stroke-medium: #91848b;
    --stroke-dark: #0d0b0c;

    --color-red: #B22222;
    --color-yellow: #FFA500;
    --color-green: #228B22;
}