@charset "UTF-8";

:root {
  font-size: 15px;

  --color-text:          #000;
  --color-text-inverted: #fff;

  --color-kibi-red:            #FF6666;
  --color-kibi-red-tinted:     #FF8A8A;
  --color-kibi-red-tinted2:    #FFB5B5;
  --color-kibi-red-shaded:     #E43F3F;
  --color-kibi-red-shaded2:    #C11C1C;
  --color-kibi-yellow:         #F0E400;
  --color-kibi-yellow-tinted:  #FFF532;
  --color-kibi-yellow-tinted2: #FFF75D;
  --color-kibi-yellow-shaded:  #BEB500;
  --color-kibi-yellow-shaded2: #958D00;
  --color-kibi-green:          #9CDF5C;
  --color-kibi-green-tinted:   #D2F5B1;
  --color-kibi-green-tinted2:  #B7EC83;
  --color-kibi-green-shaded:   #7DC539;
  --color-kibi-green-shaded2:  #5EA51C;
  --color-kibi-orange:         #FFC31D;
  --color-kibi-orange-tinted:  #FFCE49;
  --color-kibi-orange-tinted2: #FFD972;
  --color-kibi-orange-shaded:  #D59D01;
  --color-kibi-orange-shaded2: #A87B00;
  --color-kibi-blue:           #66CEDC;
  --color-kibi-blue-tinted:    #93E2ED;
  --color-kibi-blue-tinted2:   #CAF4FA;
  --color-kibi-blue-shaded:    #42B7C7;
  --color-kibi-blue-shaded2:   #239BAC;
  --color-kibi-grey:           #ECECEC;

  --color-primary:           #FF6666;
  --color-primary-tinted:    #FF8A8A;
  --color-primary-tinted2:   #FFB5B5;
  --color-primary-shaded:    #E43F3F;
  --color-primary-shaded2:   #C11C1C;
  --color-secondary:         #F0E400;
  --color-secondary-tinted:  #FFF532;
  --color-secondary-tinted2: #FFF75D;
  --color-secondary-shaded:  #BEB500;
  --color-secondary-shaded2: #958D00;

  --color-success:        #66bb6a;
  --color-success-tinted: #81c784;
  --color-success-shaded: #388e3c;
  --color-warning:        #ffa726;
  --color-warning-tinted: #ffb74d;
  --color-warning-shaded: #f57c00;
  --color-danger:         #f44336;
  --color-danger-tinted:  #e57373;
  --color-danger-shaded:  #d32f2f;
  --color-info:           #29b6f6;
  --color-info-tinted:    #4fc3f7;
  --color-info-shaded:    #0288d1;

  --color-dark:  #000;
  --color-light: #fff;

  --color-neutro:         #c4c4c4;
  --color-neutro-tinted:  #f2f2f2;
  --color-neutro-tinted2: #f2f2f2;
  --color-neutro-shaded:  #7c7c7c;
  --color-neutro-shaded2: #444444;

  --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, .60);
  --color-alpha-light-strong: rgba(255, 255, 255, .85);
  --color-alpha-light-weak:   rgba(255, 255, 255, .35);

  --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: 2.25rem;
  --size-3xl: 5rem;
  --size-4xl: 10rem;

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

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

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

  --viewport-xs: 320px;
  --viewport-s:  480px;
  --viewport-m:  768px;
  --viewport-l:  1024px;
  --viewport-xl: 1200px;
}