/*
File: variables.css (converted from _variables.scss)
This contains CSS custom property declarations
*/

:root {
  /* COLORS */
  --color-1: #FBBC27;
  --color-2: #000000;
  --color-3: #0F203B;
  --color-4: #ffffff;
  --color-5: #F68823;
  
  --color-font-1: #000000;
  --color-font-2: #393B40;
  --color-font-3: rgba(57, 59, 64, 0.6); /* rgba(#393B40, 0.6) */
  --color-font-inverse: #fff;
  
  --color-ui-1: #fff;
  
  /* TYPOGRAPHY */
  --line-height: 1.5rem;
  --font-title: "Manrope", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  --font-body: "Poppins", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  --font-interactive: "Poppins", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  
  /* SIZING */
  --size-xxsmall: 0.375rem;  /* line-height / 4 = 1.5rem / 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 - Note: These are used in media queries and cannot be CSS variables */
  /* $breakpoint-laptop: 1400px; */
  /* $breakpoint-tablet: 980px; */
  /* $breakpoint-smartphone: 767px; */
  /* $breakpoint-smartphone-portrait: 479px; */
}