@charset "UTF-8";

:root {
  font-size: 18px;

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

  --color-primary:         #0096d6;
  --color-secondary-dark:  #6d6e71;
  --color-secondary:       #bfbebf;
  --color-tertiary:        #f2ebdc;

  --color-hp-fuchsia:    #ff83ff;
  --color-hp-fuchsia-l1: #ffa7ff;
  --color-hp-fuchsia-l2: #ffc7ff;
  --color-hp-fuchsia-l3: #ffd9ff;
  --color-hp-orange:     #ffbc3d;
  --color-hp-orange-l1:  #ffd688;
  --color-hp-teal:       #4ef5ab;
  --color-hp-teal-l1:    #95f9cc;
  --color-hp-teal-l2:    #cafce5;
  --color-hp-teal-l3:    #e5fef3;
  --color-hp-salmon:     #ff876b;
  --color-hp-salmon-l1:  #ffb6a6;
  --color-hp-salmon-l2:  #ffcfc4;
  --color-hp-green:      #d3fb66;
  --color-hp-green-l1:   #e5fda3;
  --color-hp-green-l2:   #edfdc2;
  --color-hp-green-l3:   #f4fed8;
  --color-hp-green-l4:   #faffe9;
  --color-hp-yellow:     #ffe03a;
  --color-hp-yellow-l1:  #ffec86;
  --color-hp-blue:       #40defa;
  --color-hp-blue-l1:    #7be7fc;
  --color-hp-blue-l2:    #a1effd;
  --color-hp-blue-l3:    #b4f2fd;
  --color-hp-blue-l4:    #c7f6fe;
  --color-hp-blue-l5:    #d9f8fe;

  --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-dark:  #000;
  --color-light: #fff;

  --color-neutro:         #c4c4c4;
  --color-neutro-dark:    #7c7c7c;
  --color-neutro-darker:  #444;
  --color-neutro-light:   #f2f2f2;
  --color-neutro-lighter: #f2f2f2;

  --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: 'Forma', sans-serif;

  --shadow-text-soft:   -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
  --shadow-text-normal: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
  --shadow-text-hard:   -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);

  --shadow-box-softer:  0 0 var(--size-xs) 0 var(--color-neutro-lighter);
  --shadow-box-soft:    0 0 var(--size-xs) 0 var(--color-neutro-light);
  --shadow-box-normal:  0 0 var(--size-xs) 0 var(--color-neutro);
  --shadow-box-hard:    0 0 var(--size-xs) 0 var(--color-neutro-dark);
  --shadow-box-harder:  0 0 var(--size-xs) 0 var(--color-neutro-darker);

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