@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/sofia-pro');
@import 'minimal.css';
@import 'reset.css';

html {
    /* Colors */
    --smores-neutral-color-variant-00: #473F37; /* Coffee */
    --smores-neutral-color-variant-01: #C8B29A; /* Sahara */
    --smores-neutral-color-variant-02: #D6C5B2; /* Gold */
    --smores-neutral-color-variant-03: #E6DACD; /* Sand */
    --smores-neutral-color-variant-04: #F2ECE4; /* Desert */
    --smores-neutral-color-variant-06: #F8F5F1; /* Merino */
    --smores-neutral-color-variant-08: #FCFAF8; /* Pearl */
    --smores-neutral-color-variant-12: #FFFFFF; /* White */
    --smores-neutral-color-variant-900: #000000; /* Black */
    --smores-neutral-color-variant-800: #000000; /* TODO: Add color for this variant depth */
    --smores-neutral-color-variant-700: #000000; /* TODO: Add color for this variant depth */
    --smores-neutral-color-variant-600: #000000; /* TODO: Add color for this variant depth */
    --smores-neutral-color-variant-500: #000000; /* TODO: Add color for this variant depth */
    --smores-neutral-color-variant-400: #000000; /* TODO: Add color for this variant depth */
    --smores-neutral-color-variant-300: #E5E5E5; /* Light Grey */
    --smores-neutral-color-variant-200: #FFFFFF; /* White */
    --smores-primary-color-variant-900: #3B213B; /* Mardi Gras */
    --smores-primary-color-variant-800: #5D3B5D; /* Eggplant */
    --smores-primary-color-variant-700: #876587; /* Mountbatten */
    --smores-primary-color-variant-600: #B398B3; /* London */
    --smores-primary-color-variant-500: #C4ADC4; /* Lilac */
    --smores-primary-color-variant-400: #D9C7D9; /* Orchid */
    --smores-primary-color-variant-300: #E3D5E3; /* Thistle */
    --smores-primary-color-variant-200: #EDE7ED; /* Prism */
    --smores-secondary-color-variant-900: #27384F; /* Midnight */
    --smores-secondary-color-variant-800: #395275; /* Seaside */
    --smores-secondary-color-variant-700: #58779F; /* Kashmir */
    --smores-secondary-color-variant-600: #7B97B9; /* Ocean */
    --smores-secondary-color-variant-500: #ABBFD7; /* Spindle */
    --smores-secondary-color-variant-400: #CAD8E7; /* Pigeon */
    --smores-secondary-color-variant-300: #D3E0ED; /* Periwinkle */
    --smores-secondary-color-variant-200: #E6EFF7; /* Water */
    --smores-positive-color-variant-900: #2C4D43; /* Emerald */
    --smores-positive-color-variant-800: #3A6559; /* Pine */
    --smores-positive-color-variant-700: #588377; /* Patina */
    --smores-positive-color-variant-600: #82A79E; /* Cascade */
    --smores-positive-color-variant-500: #C1D7D2; /* Geyser */
    --smores-positive-color-variant-400: #DDEBE8; /* Mint */
    --smores-positive-color-variant-300: #EBF5F3; /* Aqua */
    --smores-positive-color-variant-200: #F7FBFA; /* Seafoam */
    --smores-negative-color-variant-900: #421F26; /* Temptress */
    --smores-negative-color-variant-800: #703D47; /* Brick */
    --smores-negative-color-variant-700: #986872; /* Mouve */
    --smores-negative-color-variant-600: #A87C85; /* Caliente */
    --smores-negative-color-variant-500: #CEAFB6; /* Rose */
    --smores-negative-color-variant-400: #EDD8DC; /* Candy */
    --smores-negative-color-variant-300: #F7E6E9; /* Blush */
    --smores-negative-color-variant-200: #FFF5F7; /* Pastel Pink */
    /* Fonts */
    --smores-primary-font-family: 'Sofia Pro', sans-serif;
    --smores-primary-font-thin: normal normal 100 16px 'Sofia Pro', sans-serif;
    --smores-primary-font-extra-light: normal normal 200 16px 'Sofia Pro', sans-serif;
    --smores-primary-font-light: normal normal 300 16px 'Sofia Pro', sans-serif;
    --smores-primary-font-regular: normal normal 400 16px 'Sofia Pro', sans-serif;
    --smores-primary-font-medium: normal normal 500 16px 'Sofia Pro', sans-serif;
    --smores-primary-font-semi-bold: normal normal 600 16px 'Sofia Pro', sans-serif;
    --smores-primary-font-bold: normal normal 700 16px 'Sofia Pro', sans-serif;
    --smores-primary-font-extra-bold: normal normal 800 16px 'Sofia Pro', sans-serif;
    --smores-primary-font-heavy: normal normal 900 16px 'Sofia Pro', sans-serif;
    --smores-secondary-font-family: 'Frank Ruhl Libre', serif;
    --smores-secondary-font-thin: normal normal 100 16px 'Frank Ruhl Libre', serif;
    --smores-secondary-font-extra-light: normal normal 200 16px 'Frank Ruhl Libre', serif;
    --smores-secondary-font-light: normal normal 300 16px 'Frank Ruhl Libre', serif;
    --smores-secondary-font-regular: normal normal 400 16px 'Frank Ruhl Libre', serif;
    --smores-secondary-font-medium: normal normal 500 16px 'Frank Ruhl Libre', serif;
    --smores-secondary-font-semi-bold: normal normal 600 16px 'Frank Ruhl Libre', serif;
    --smores-secondary-font-bold: normal normal 700 16px 'Frank Ruhl Libre', serif;
    --smores-secondary-font-extra-bold: normal normal 800 16px 'Frank Ruhl Libre', serif;
    --smores-secondary-font-heavy: normal normal 900 16px 'Frank Ruhl Libre', serif;
    /* RGB Values */
    --smores-primary-shadow-rgb-values: 59, 33, 59;
    --smores-secondary-shadow-rgb-values: 39, 56, 79;
    --smores-neutral-shadow-rgb-values: 71, 63, 55;
    --smores-negative-shadow-rgb-values: 66, 31, 38;
    --smores-positive-shadow-rgb-values: 44, 77, 67;
    --smores-popup-overlay-rgb-values: 248, 245, 241;
    --smores-popup-rgb-values: 255, 255, 255;
    /* Layout */
    --smores-header-height: 87px;
    --smores-page-padding: 30px;
}