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

:root {
  /* COLORS */
  --color-1: #283a22;
  --color-2: #8a0038;
  --color-3: #8b5a2b;
  --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:
    "Cinzel Decorative", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  --font-body: "DM Sans", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  --font-interactive:
    "Cinzel", "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;
}