:root {

  --mono-base: var(--color-primary, blue);
  /* lightest */
  /*
  --mono-1: oklch(from var(--mono-base) calc(l + var(--l-1)) c h); 
  --mono-2: oklch(from var(--mono-base) calc(l + var(--l-2)) c h);
  --mono-3: oklch(from var(--mono-base) calc(l + var(--l-3)) c h);
  --mono-4: oklch(from var(--mono-base) calc(l + var(--l-4)) c h);
  --mono-5: oklch(from var(--mono-base) calc(l + var(--l-5)) c h);
  --mono-6: oklch(from var(--mono-base) calc(l - var(--l-6)) c h);
  --mono-7: oklch(from var(--mono-base) calc(l - var(--l-7)) c h);
  --mono-8: oklch(from var(--mono-base) calc(l - var(--l-8)) c h);
  --mono-9: oklch(from var(--mono-base) calc(l - var(--l-9)) c h); 
  */
  /* darkest */
  --mono-1: color-mix(in oklch, var(--mono-base), white 40%); 
  --mono-2: color-mix(in oklch, var(--mono-base), white 30%);
  --mono-3: color-mix(in oklch, var(--mono-base), white 20%);
  --mono-4: color-mix(in oklch, var(--mono-base), white 10%);
  --mono-5: color-mix(in oklch, var(--mono-base), white 0%);
  --mono-6: color-mix(in oklch, var(--mono-base), black 10%);
  --mono-7: color-mix(in oklch, var(--mono-base), black 20%);
  --mono-8: color-mix(in oklch, var(--mono-base), black 30%);
  --mono-9: color-mix(in oklch, var(--mono-base), black 40%); 
}