/*
File: variables.css
This contains CSS custom properties converted from SCSS variables
*/

:root {
    /* COLORS */
    --color-1: #E73636;
    --color-2: #E5CC52;
    --color-3: #355D70;
    --color-4: #62B362;
    --color-5: #804467;
    --color-6: #E45A32;
    
    --color-bg: #F2F2F2;
    
    --color-font-1: #1B1B1B;
    --color-font-2: #444444;
    --color-font-3: #939393;
    
    --color-font-inverse: #F2F2F2;
    
    --color-ui-1: rgba(147, 147, 147, 0.5);
    
    /* TYPOGRAPHY */
    --line-height: 1.5rem;
    --font-title: "Arbutus Slab", "Hoefler Text", "Times New Roman", Times, serif;
    --font-body: "Noto Sans", Trebuchet, Tahoma, Arial, sans-serif;
    --font-interactive: "Nunito", Futura, "Century Gothic", AppleGothic, sans-serif;
    
    /* SIZING */
    --size-xsmall: 0.375rem;  /* line-height / 4 */
    --size-small: 0.75rem;    /* line-height / 2 */
    --size-medium: 1.5rem;    /* line-height */
    --size-large: 3rem;       /* line-height * 2 */
    --size-xlarge: 6rem;      /* line-height * 4 */
    --size-xxlarge: 9rem;     /* line-height * 6 */
    
    --size-gutter: 3rem;      /* size-large */
    
    /* ANIMATION */
    --transition-standard: all 0.25s ease;
    --transition-bounce: all 0.25s cubic-bezier(.29,-2,.34,3);
    
    /* BREAKPOINTS */
    --breakpoint-tablet: 980px;
    --breakpoint-smartphone: 767px;
    --breakpoint-smartphone-portrait: 479px;
}