/*
 * SIZES
 */
$sizes: 0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256 !default;
$negative-sizes: -1,-2,-3,-4,-8,-12,-14,-16,-24,-32,-40,-48,-56,-64 !default;
$percent-sizes: 5,10,15,20,25,50,75,100 !default;
$negative-percent-sizes: -5,-10,-15,-20,-25,-50,-75,-100 !default;
$z-index: -1,0,1,2,3,4,5,10,15,20,25,50,100 !default;

$border-sizes: 2,3,4,6,8 !default;
$border-radiuses: 0,4,6,8,16,24,32 !default;

/*
 * ORIENTATIONS - 'orientation label': (property)
 */
$orientations: (
  't': ('top'),
  'r': ('right'),
  'b': ('bottom'),
  'l': ('left'),
  'x': ('right', 'left'),
  'y': ('top', 'bottom')
) !default;

/*
 * BREAKPOINTS - 'size label': size
 */
$breakpoints: (
  'xxl': 1680px, 
  'xl': 1366px, 
  'lg': 1024px, 
  'md': 768px, 
  'sm': 420px
) !default;

/*
 * CONTAINER + GRID
 */
$container-max-width: 1680px !default;
$container-offset: 56px !default;
$container-offset-mobile: 16px !default;
$container-breakpoint: 'lg' !default;

$grid-gutter: 32px !default;
$grid-gutter-mobile: 16px !default;
$columns: 12 !default;

/*
 * COLORS
 */
$colors: (
  foreground: #1a1a1d,
  background: #ffffff,
  black: #1a1a1d,
  white: #ffffff,
  primary: #f6c026
) !default;

$palettes: (
  gray: #8c8c8e,
  yellow: #f6c026,
  orange: #F4912A,
  red: #E41328,
  violet: #752A6F,
  purple: #472573,
  indigo: #3F00FF,
  blue: #0F4EB3,
  teal: #00A4A4,
  green: #10AF2E,
  lime: #A4C400,
) !default;

$color-modes-selector: '[data-color-scheme="VALUE"]' !default;
$color-modes: (
  dark: (
    colors: (
      foreground: #ffffff,
      background: #1a1a1d,
      black: #1a1a1d,
      white: #ffffff,
      primary: #3F00FF
    )
    // palettes: ( ... )
  )
) !default;

/*
 * TYPOGRAPHY
 */

/*
 * > If a font-size has not been set on any of the <p>'s ancestors,
 *   then 1em will equal the default browser font-size, which is usually 16px.
 *   So, by default 1em is equivalent to 16px.
 *   - https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems
 */
$base-font-size: 16px !default;

$heading-font: 'Roboto', sans-serif !default;
$paragraph-font: 'Nunito', sans-serif !default;
$mono-font: monospace !default;
$line-height: 1.2 !default;
$heading-line-height: 1 !default;
$paragraph-line-height: 1.5 !default;

/*
 * Breakpoint: $container-breakpoint
 *
 * (font-size, letter-spacing, line-height, font-weight, text-transform)
 */
$typography: (
  'h1, .h1': (
    desktop: (96px, -1.5px, $heading-line-height, bold),
    mobile: (64px, -0.5px, $heading-line-height, bold)
  ),
  'h2, .h2': (
    desktop: (64px, -0.5px, $heading-line-height, bold),
    mobile: (48px, 0, $heading-line-height, bold)
  ),
  'h3, .h3': (
    desktop: (48px, 0, $heading-line-height, bold),
    mobile: (32px, 0.25px, $heading-line-height, bold)
  ),
  'h4, .h4': (
    desktop: (32px, 0.25px, $heading-line-height, bold),
    mobile: (24px, 0, $heading-line-height, bold)
  ),
  'h5, .h5': (
    desktop: (24px, 0, $heading-line-height, bold),
    mobile: (20px, 0.15px, $heading-line-height, bold)
  ),
  'h6, .h6': (
    desktop: (20px, 0.15px, $heading-line-height, bold),
    mobile: (16px, 0.15px, $heading-line-height, bold)
  ),
  '.p1': (24px, 0.3px, $paragraph-line-height),
  '.p2': (20px, 0.2px, $paragraph-line-height),
  'p': ($base-font-size, 0.2px, $paragraph-line-height),
  '.p3, figcaption': (14px, 0.4px, $paragraph-line-height),
  '.p4, small': (12px, 0.6px, $paragraph-line-height),
  '.supertitle': (14px, 2px, $paragraph-line-height, 500, uppercase)
) !default;

$custom-easings: (
  'ease-in-out-quint': cubic-bezier(0.86, 0, 0.07, 1)
) !default;

$default-transition-duration: 250ms !default;
$default-transition-easing: 'ease-in-out-quint' !default;

$button: (
  height: 56px,
  padding-x: 32px,
  padding-y: 16px,
  border-width: 2px,
  border-radius: 4px
) !default;

//Image directory default - change it to wherever you store images relative to the compiled .css
$image-dir: '../images/' !default;