@charset "UTF-8";

:root {
  font-size: 16px;

  --color-text:          #57667a;
  --color-text-inverted: #ffffff;

  --color-primary:   #302953;
  --color-secondary: #d1b923;
  --color-tertiary:  #e3272e;

  --color-success:       #4caf50;
  --color-success-dark:  #1b5e20;
  --color-success-light: #c8e6c9;
  --color-warning:       #ffeb3b;
  --color-warning-dark:  #fbc02d;
  --color-warning-light: #fff9c4;
  --color-danger:        #f44336;
  --color-danger-dark:   #b71c1c;
  --color-danger-light:  #ffcdd2;
  --color-info:          #2196f3;
  --color-info-dark:     #0d47a1;
  --color-info-light:    #bbdefb;

  --color-neutro:       #cccccc;
  --color-neutro-dark:  #444444;
  --color-neutro-light: #f2f2f2;

  --color-dark:  #111111;
  --color-light: #ffffff;

  --color-alpha-dark:         rgba(0, 0, 0, .50);
  --color-alpha-dark-strong:  rgba(0, 0, 0, .75);
  --color-alpha-dark-weak:    rgba(0, 0, 0, .25);
  --color-alpha-light:        rgba(255, 255, 255, .50);
  --color-alpha-light-strong: rgba(255, 255, 255, .75);
  --color-alpha-light-weak:   rgba(255, 255, 255, .25);

  --size-4xs: .05rem;
  --size-3xs: .1rem;
  --size-2xs: .25rem;
  --size-xs:  .5rem;
  --size-s:   .75rem;
  --size-m:   1rem;
  --size-l:   1.25rem;
  --size-xl:  1.5rem;
  --size-2xl: 2rem;
  --size-3xl: 4rem;
  --size-4xl: 8rem;

  --z-page:  1;
  --z-nav:   100;
  --z-toast: 1000;
  --z-modal: 10000;

  --speed-fast:   .1s;
  --speed-normal: .2s;
  --speed-slow:   .4s;

  --font-default: 'Montserrat', 'Helvetica', 'Arial', sans-serif;

  --viewport-xs: 320px;
  --viewport-s:  480px;
  --viewport-m:  640px;
  --viewport-l:  980px;
  --viewport-xl: 1200px;

  --size-wrapper: 1000px;
}