/*
File: variables.css
CSS custom properties for colors, typography, sizing, and breakpoints
*/

:root {
    /* COLORS */
    --color-1: #DB9D43;
    --color-2: #ED1C24;
    --color-3: #0F203B;
    --color-4: #CCDCFF;
    --color-5: #F68823;
    
    --color-font-1: #1F2125;
    --color-font-2: #393B40;
    --color-font-3: rgba(57, 59, 64, 0.6);
    --color-font-inverse: #fff;
    
    --color-ui-1: #fff;
    
    /* TYPOGRAPHY */
    --line-height: 1.5rem;
    --font-title: "Instrument Serif", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
    --font-body: "Instrument Sans", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
    --font-interactive: "Instrument Sans", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
    
    /* SIZING */
    --size-xxsmall: 0.375rem; /* line-height / 4 */
    --size-xsmall: 0.5rem; /* line-height / 3 */
    --size-small: 0.75rem; /* line-height / 2 */
    --size-medium: 1.5rem; /* line-height */
    --size-large: 3rem; /* line-height * 2 */
    --size-xlarge: 4.5rem; /* line-height * 3 */
    --size-xxlarge: 6rem; /* line-height * 4 */
    
    --row-max-width: 1920px;
    --row-width: 90.09%;
    
    /* BREAKPOINTS (for reference in media queries) */
    --breakpoint-laptop: 1400px;
    --breakpoint-tablet: 980px;
    --breakpoint-smartphone: 767px;
    --breakpoint-smartphone-portrait: 479px;
    
    /* TRANSITIONS */
    --transition-standard: all 0.3s ease;
}