:root {
  --hsl-black: 0, 0%, 0%;
  --hsl-white: 0, 0%, 100%;
  --color-black: hsl(var(--hsl-black));
  --color-white: hsl(var(--hsl-white));
  --hsl-canvas: var(--hsl-white);
  --color-body: hsl(33.3, 60%, 97.1%);
  --color-canvas: var(--color-white);
  --color-canvas-light: var(--color-white);

  --hsl-ink: var(--hsl-black);
  --color-ink-10: hsl(240, 7.7%, 97.5%);
  --color-ink-20: hsl(200, 11.1%, 94.7%);
  --color-ink-30: hsl(180, 3.7%, 89.4%);
  --color-ink-40: hsl(200, 2.9%, 79.4%);
  --color-ink-50: hsl(202.5, 4.1%, 62%);
  --color-ink-60: hsl(198.5, 5.5%, 46.1%);
  --color-ink-70: hsl(201, 10.8%, 36.5%);
  --color-ink-80: hsl(202.1, 18.1%, 20.6%);
  --color-ink-90: hsl(200.9, 33.3%, 13.5%);
  --color-ink-100: hsl(199.1, 44%, 9.8%);
  --color-ink: var(--color-ink-80);

  --hsl-inverted: var(--hsl-white);
  --color-inverted-10: hsl(198.8, 20%, 15.7%);
  --color-inverted-20: hsl(201.2, 17.9%, 18.6%);
  --color-inverted-30: hsl(201.4, 11.1%, 24.7%);
  --color-inverted-40: hsl(198, 5.4%, 36.5%);
  --color-inverted-50: hsl(201.8, 4.6%, 53.5%);
  --color-inverted-60: hsl(200, 6%, 70.4%);
  --color-inverted-70: hsl(200, 3.2%, 81.8%);
  --color-inverted-80: hsl(200, 5.7%, 89.6%);
  --color-inverted-90: hsl(200, 11.1%, 94.7%);
  --color-inverted-100: hsl(240, 7.7%, 97.5%);
  --color-inverted: var(--color-white);

  --hsl-uncolor: var(--hsl-sand);
  --color-uncolor-10: var(--color-sand-10);
  --color-uncolor-20: var(--color-sand-20);
  --color-uncolor-30: var(--color-sand-30);
  --color-uncolor-40: var(--color-sand-40);
  --color-uncolor-50: var(--color-sand-50);
  --color-uncolor-60: var(--color-sand-60);
  --color-uncolor-70: var(--color-sand-70);
  --color-uncolor-80: var(--color-sand-80);
  --color-uncolor-90: var(--color-sand-90);
  --color-uncolor-100: var(--color-sand-100);
  --color-uncolor: var(--color-uncolor-60);

  --hsl-sand: 34.5, 20.9%, 44.1%;
  --color-sand-10: hsl(30, 28.6%, 97.3%);
  --color-sand-20: hsl(32.7, 37.9%, 94.3%);
  --color-sand-30: hsl(30, 28.6%, 89%);
  --color-sand-40: hsl(31.2, 22.5%, 78.2%);
  --color-sand-50: hsl(32.2, 20.2%, 60.2%);
  --color-sand-60: hsl(var(--hsl-sand));
  --color-sand-70: hsl(33.5, 24.6%, 34.3%);
  --color-sand-80: hsl(34.5, 30.8%, 21%);
  --color-sand-90: hsl(35.5, 29.7%, 14.5%);
  --color-sand-100: hsl(33.7, 27.6%, 11.4%);
  --color-sand: var(--color-sand-60);

  --hsl-slate: 198.5, 5.5%, 46.1%;
  --color-slate-10: var(--color-ink-10);
  --color-slate-20: var(--color-ink-20);
  --color-slate-30: var(--color-ink-30);
  --color-slate-40: var(--color-ink-40);
  --color-slate-50: var(--color-ink-50);
  --color-slate-60: var(--color-ink-60);
  --color-slate-70: var(--color-ink-70);
  --color-slate-80: var(--color-ink-80);
  --color-slate-90: var(--color-ink-90);
  --color-slate-100: var(--color-ink-100);
  --color-slate: var(--color-ink-60);

  --hsl-red: 7.8, 63.6%, 49.6%;
  --color-red-10: hsl(10.9, 100%, 97.8%);
  --color-red-20: hsl(10.9, 100%, 95.7%);
  --color-red-30: hsl(12, 100%, 91.2%);
  --color-red-40: hsl(12.9, 100%, 81.8%);
  --color-red-50: hsl(13, 97.9%, 62.9%);
  --color-red-60: hsl(var(--hsl-red));
  --color-red-70: hsl(6.7, 69.1%, 38%);
  --color-red-80: hsl(3.9, 74.2%, 24.3%);
  --color-red-90: hsl(3, 68.5%, 17.5%);
  --color-red-100: hsl(3.3, 51.4%, 13.7%);
  --color-red: var(--color-red-60);

  --hsl-green: 148.4, 68.8%, 31.4%;
  --color-green-10: hsl(102, 55.6%, 96.5%);
  --color-green-20: hsl(105, 55.6%, 92.9%);
  --color-green-30: hsl(110.5, 54.3%, 86.3%);
  --color-green-40: hsl(123, 46.2%, 74.5%);
  --color-green-50: hsl(135.6, 39.7%, 52.5%);
  --color-green-60: hsl(var(--hsl-green));
  --color-green-70: hsl(149.3, 68.2%, 25.9%);
  --color-green-80: hsl(148.2, 55.1%, 17.5%);
  --color-green-90: hsl(146.7, 40.3%, 13.1%);
  --color-green-100: hsl(144, 27.3%, 10.8%);
  --color-green: var(--color-green-60);

  --tint-ink-0: hsla(var(--hsl-ink), 0);
  --tint-ink-2: hsla(var(--hsl-ink), 0.02);
  --tint-ink-3: hsla(var(--hsl-ink), 0.03);
  --tint-ink-5: hsla(var(--hsl-ink), 0.05);
  --tint-ink-10: hsla(var(--hsl-ink), 0.1);
  --tint-ink-15: hsla(var(--hsl-ink), 0.15);
  --tint-ink-20: hsla(var(--hsl-ink), 0.2);
  --tint-ink-25: hsla(var(--hsl-ink), 0.25);
  --tint-ink-35: hsla(var(--hsl-ink), 0.35);
  --tint-ink-50: hsla(var(--hsl-ink), 0.5);
  --tint-ink-75: hsla(var(--hsl-ink), 0.75);

  --hsl-blue: 211.2, 71.4%, 48%;
  --color-blue-10: hsl(201.4, 100%, 97.3%);
  --color-blue-20: hsl(205.4, 100%, 94.9%);
  --color-blue-30: hsl(205.9, 100%, 90%);
  --color-blue-40: hsl(208.7, 95.9%, 80.8%);
  --color-blue-50: hsl(209.2, 100%, 62.9%);
  --color-blue-60: hsl(var(--hsl-blue));
  --color-blue-70: hsl(213.3, 67.2%, 39.4%);
  --color-blue-80: hsl(214.7, 73.6%, 25.3%);
  --color-blue-90: hsl(217.5, 68.1%, 18.4%);
  --color-blue-100: hsl(220, 56.8%, 14.5%);
  --color-blue: var(--color-blue-60);

  --hsl-purple: 264.9, 56.2%, 58.8%;
  --color-purple-10: hsl(255, 100%, 98.4%);
  --color-purple-20: hsl(251.2, 100%, 96.9%);
  --color-purple-30: hsl(255, 100%, 93.7%);
  --color-purple-40: hsl(255.8, 82.6%, 86.5%);
  --color-purple-50: hsl(260.8, 90.8%, 74.5%);
  --color-purple-60: hsl(var(--hsl-purple));
  --color-purple-70: hsl(267.3, 43.7%, 45.3%);
  --color-purple-80: hsl(271.5, 56.2%, 28.6%);
  --color-purple-90: hsl(275.8, 62%, 19.6%);
  --color-purple-100: hsl(277.1, 55.3%, 14.9%);
  --color-purple: var(--color-purple-60);
}

@media (prefers-color-scheme: dark) {
  :root {
    --hsl-canvas: 200, 28%, 14.7%;
    --color-body: hsl(202.5, 42.1%, 7.5%);
    --color-canvas: hsl(var(--hsl-canvas));
    --color-canvas-light: var(--color-slate-10);

    --hsl-ink: var(--hsl-white);
    --color-ink-10: hsl(200, 18%, 19.6%);
    --color-ink-20: hsl(201.2, 14%, 23.7%);
    --color-ink-30: hsl(200, 10.2%, 28.8%);
    --color-ink-40: hsl(201.4, 7.3%, 37.6%);
    --color-ink-50: hsl(198.5, 5.5%, 53.5%);
    --color-ink-60: hsl(201.8, 6.5%, 66.9%);
    --color-ink-70: hsl(200, 9.7%, 81.8%);
    --color-ink-80: hsl(205.7, 13.2%, 89.6%);
    --color-ink-90: hsl(204, 18.5%, 94.7%);
    --color-ink-100: hsl(240, 7.7%, 97.5%);

    --hsl-inverted: var(--hsl-black);
    --color-inverted-10: hsl(240, 7.7%, 97.5%);
    --color-inverted-20: hsl(200, 11.1%, 94.7%);
    --color-inverted-30: hsl(180, 3.7%, 89.4%);
    --color-inverted-40: hsl(200, 2.9%, 79.4%);
    --color-inverted-50: hsl(202.5, 4.1%, 62%);
    --color-inverted-60: hsl(198.5, 5.5%, 46.1%);
    --color-inverted-70: hsl(201, 12.7%, 31%);
    --color-inverted-80: hsl(202.1, 18.1%, 20.6%);
    --color-inverted-90: hsl(200.9, 33.3%, 13.5%);
    --color-inverted-100: hsl(199.1, 44%, 9.8%);
    --color-inverted: var(--color-inverted-100);

    --hsl-uncolor: var(--hsl-slate);
    --color-uncolor-10: var(--color-slate-10);
    --color-uncolor-20: var(--color-slate-20);
    --color-uncolor-30: var(--color-slate-30);
    --color-uncolor-40: var(--color-slate-40);
    --color-uncolor-50: var(--color-slate-50);
    --color-uncolor-60: var(--color-slate-60);

    --hsl-sand: 32.2, 29.7%, 64.3%;
    --color-sand-10: hsl(60, 1%, 19.8%);
    --color-sand-20: hsl(40, 2.5%, 23.7%);
    --color-sand-30: hsl(33.7, 11.1%, 28.2%);
    --color-sand-40: hsl(32.4, 20.2%, 35.9%);
    --color-sand-50: hsl(33.1, 23%, 50.6%);
    --color-sand-70: hsl(33.3, 27.3%, 80.6%);
    --color-sand-80: hsl(30, 25%, 89%);
    --color-sand-90: hsl(33.3, 31%, 94.3%);
    --color-sand-100: hsl(33.3, 60%, 97.1%);

    --hsl-slate: 200.4, 30.6%, 66.1%;
    --color-slate-10: hsl(200, 21.2%, 19.4%);
    --color-slate-20: hsl(201.8, 18.3%, 23.5%);
    --color-slate-30: hsl(199.1, 15.1%, 28.6%);
    --color-slate-40: hsl(201.1, 19.6%, 37.1%);
    --color-slate-50: hsl(200.4, 23.1%, 52.5%);
    --color-slate-70: hsl(200, 43.8%, 81.2%);
    --color-slate-80: hsl(201.3, 56.4%, 89.2%);
    --color-slate-90: hsl(201.2, 63%, 94.7%);
    --color-slate-100: hsl(205.7, 53.8%, 97.5%);

    --hsl-blue: 210, 92.4%, 69%;
    --color-blue-10: hsl(206, 29.4%, 20%);
    --color-blue-20: hsl(209.3, 34.4%, 24.5%);
    --color-blue-30: hsl(209, 38.2%, 29.8%);
    --color-blue-40: hsl(210.6, 50%, 39.2%);
    --color-blue-50: hsl(212.1, 77.5%, 56.5%);
    --color-blue-70: hsl(208, 100%, 82.4%);
    --color-blue-80: hsl(205.9, 100%, 90%);
    --color-blue-90: hsl(205.4, 100%, 94.9%);
    --color-blue-100: hsl(201.4, 100%, 97.3%);

    --hsl-red: 14.4, 90.1%, 68.2%;
    --color-red-10: hsl(0, 5.8%, 20.4%);
    --color-red-20: hsl(9.2, 10.4%, 24.5%);
    --color-red-30: hsl(8, 19.2%, 30.6%);
    --color-red-40: hsl(8.4, 38.5%, 40.2%);
    --color-red-50: hsl(8.9, 69.5%, 56.3%);
    --color-red-70: hsl(14.8, 100%, 83.3%);
    --color-red-80: hsl(14, 100%, 90.8%);
    --color-red-90: hsl(19.2, 100%, 95.1%);
    --color-red-100: hsl(18.5, 100%, 97.5%);

    --hsl-green: 134.1, 39.1%, 59.4%;
    --color-green-10: hsl(174, 10.4%, 18.8%);
    --color-green-20: hsl(165, 10.3%, 22.7%);
    --color-green-30: hsl(159.1, 16.8%, 26.9%);
    --color-green-40: hsl(152.7, 25.9%, 33.3%);
    --color-green-50: hsl(143.4, 42.6%, 43.7%);
    --color-green-70: hsl(122.6, 41.8%, 78.4%);
    --color-green-80: hsl(110.5, 54.3%, 86.3%);
    --color-green-90: hsl(105, 76.2%, 91.8%);
    --color-green-100: hsl(102, 90.9%, 95.7%);

    --hsl-purple: 264.8, 76.7%, 76.5%;
    --color-purple-10: hsl(252, 4.8%, 20.6%);
    --color-purple-20: hsl(255, 9.2%, 25.5%);
    --color-purple-30: hsl(260.8, 15.9%, 32.2%);
    --color-purple-40: hsl(265.2, 30.4%, 44.5%);
    --color-purple-50: hsl(269.6, 75.6%, 64.7%);
    --color-purple-70: hsl(259.6, 93.2%, 88.4%);
    --color-purple-80: hsl(256.9, 100%, 93.7%);
    --color-purple-90: hsl(255, 100%, 96.9%);
    --color-purple-100: hsl(255, 100%, 98.4%);
  }
}