:root {
   --siz-min: 11.5px;
   --siz-btn: 14px;

   --siz0: 13px;
   --siz1: 14px;
   --siz2: 17px;
   --siz3: 22px;
   --siz4: 28px;
   --siz5: 56px;
   --siz6: 72px;

   --lmt: 1280px;

   --nav-wid: calc(240px + 2rem);

   --gut: max(0px, (100vw - var(--nav-wid) - var(--lmt)) / 2);

   --btn-hgt: 46px;
   --btn-sm-hgt: calc(var(--btn-hgt) - 8px);
   --btn-wid: 46px;
   --mst-hgt: 5rem;

   --rad1: 8px;
   --rad2: 10px;
   --rad3: 12px;
   --rad4: 14px;
   --rad-max: 999px;

   --thk: 2px;

   --fnt-std: 'Inter', -apple-system, Arial, sans-serif;
   --fnt-btn: 'Inter', -apple-system, Arial, sans-serif;
   --fnt-hdg: 'Inter', -apple-system, Arial, sans-serif;
   --fnt-fix: 'Geist', monospace;

   --ink0: #fff;
   --ink1: hsl(222, 30%, 90%);
   --ink2: hsl(222, 30%, 85%);
   --ink3: hsl(222, 30%, 75%);
   --ink4: hsl(222, 30%, 65%);
   --ink5: hsl(222, 30%, 24%);
   --ink6: hsl(222, 30%, 21%);
   --ink7: hsl(222, 30%, 18%);
   --ink8: hsl(222, 30%, 15%);
   --ink9: hsl(222, 30%, 12%);
   
   --red0: hsl(0, 70%, 65%);
   --red1: hsl(0, 70%, 60%);
   --red2: hsl(0, 70%, 50%);
   --red3: hsl(0, 70%, 30%);

   --grn0: hsl(170, 80%, 50%);
   --grn1: hsl(170, 80%, 40%);
   --grn2: hsl(170, 80%, 32%);
   --grn3: hsl(170, 80%, 24%);

   --blu0: hsl(212, 80%, 65%);
   --blu1: hsl(212, 80%, 55%);
   --blu2: hsl(212, 80%, 40%);
   --blu3: hsl(212, 80%, 35%);

   --pur0: hsl(265, 100%, 85%);
   --pur1: hsl(265, 100%, 80%);
   --pur2: hsl(265, 100%, 65%);
   --pur3: hsl(265, 100%, 60%);

   --ylw0: hsl(40, 70%, 70%);
   --ylw1: hsl(40, 70%, 60%);
   --ylw2: hsl(40, 70%, 45%);
   --ylw3: hsl(40, 70%, 35%);

   --cya0: hsl(195, 80%, 65%);
   --cya1: hsl(195, 80%, 55%);
   --cya2: hsl(195, 80%, 40%);
   --cya3: hsl(195, 80%, 35%);

   --org0: hsl(30, 80%, 60%);
   --org1: hsl(30, 80%, 50%);
   --org2: hsl(30, 80%, 40%);
   --org3: hsl(30, 80%, 30%);

   --mag0: hsl(280, 60%, 65%);
   --mag1: hsl(280, 60%, 55%);
   --mag2: hsl(280, 60%, 45%);
   --mag3: hsl(280, 60%, 35%);

   --lim0: hsl(90, 80%, 65%);
   --lim1: hsl(90, 80%, 55%);
   --lim2: hsl(90, 80%, 45%);
   --lim3: hsl(90, 80%, 35%);

   --brn0: hsl(30, 50%, 70%);
   --brn1: hsl(30, 50%, 65%);
   --brn2: hsl(30, 50%, 60%);
   --brn3: hsl(30, 50%, 55%);

   --pnk0: hsl(330, 75%, 75%);
   --pnk1: hsl(330, 75%, 65%);
   --pnk2: hsl(330, 75%, 55%);
   --pnk3: hsl(330, 75%, 40%);

   --color-danger: var(--red1);
   --color-danger-bg: var(--red0);
   --color-success: var(--grn1);
   --color-success-bg: var(--grn0);

   --shd1: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shd2: 0 4px 12px rgba(0, 0, 0, 0.08);
   --shd3: 0 12px 32px rgba(0, 0, 0, 0.12);

   --scrollbar-size: .5rem;
   --scrollbar-inset: 2px;
   --scrollbar-thumb: var(--ink5);
   --scrollbar-thumb-hover: var(--ink4);
   --scrollbar-track: transparent;

   --page: hsl(222, 30%, 10%);
   --backdrop: hsla(219, 30%, 6%, .72);

   --trn: all 0.125s ease-in-out;
   --log: cubic-bezier(0, 0.85, 0.9, 0.95);
}