/* Design system 1 shared sizing foundation */
:root {
  --sf: 1;
  --01: calc(var(--1) * 0.1);
  --025: calc(var(--1) * 0.25);
  --05: calc(var(--1) * 0.5);
  --08: calc(var(--1) * 0.8);
  --1: 20px; /* SET BASE UNIT HERE FOR EXAMPLE 20px */
  --2: calc(var(--1) * 2);
  --3: calc(var(--1) * 3);
  --4: calc(var(--1) * 4);
  --8: calc(var(--1) * 8);
  --12: calc(var(--1) * 12);
  --20: calc(var(--1) * 20);

  /* Semantic sizing units */

  --tenth: var(--01);
  --quarter: var(--025);
  --half: var(--05);
  --eight-tenth: var(--08);
  --unit: var(--1);
  --double: var(--2);
  --triple: var(--3);
  --quad: var(--4);
  --oct: var(--8);
  --dozen: var(--12);
  --twenty: var(--20);

  --ds-grid-unit: calc(var(--unit) * var(--sf));
}