:root {
    --cl-black:       hsl(140, 1%, 6%);
    --cl-gray-0:      hsl(140, 2%, 8%);
    --cl-gray-1:      hsl(140, 2%, 12%);
    --cl-gray-2:      hsl(140, 4%, 16%);
    --cl-gray-3:      hsl(140, 4%, 24%);
    --cl-gray-4:      hsl(140, 4%, 36%);
    --cl-gray-5:      hsl(140, 4%, 44%);
    --cl-gray-6:      hsl(80, 8%, 52%);
    --cl-gray-7:      hsl(70, 8%, 58%);
    --cl-gray-8:      hsl(60, 16%, 66%);
    --cl-gray-9:      hsl(40, 32%, 78%);
    --cl-gray-10:     hsl(30, 32%, 84%);
    --cl-white:       hsl(26, 64%, 88%);
    --cl-red-6:       hsl(4, 83%, 67%);
    --cl-red-7:       hsl(4, 75%, 75%);
    --cl-orange-6:    hsl(26, 84%, 62%);
    --cl-orange-7:    hsl(26, 84%, 74%);
    --cl-yellow:      hsl(37, 80%, 69%);
    --cl-green-6:     hsl(120, 41%, 64%);
    --cl-green-7:     hsl(120, 42%, 75%);
    --cl-cyan-6:      hsl(160, 41%, 64%);
    --cl-cyan-7:      hsl(160, 32%, 75%);
    --cl-blue-6:      hsl(200, 55%, 64%);
    --cl-blue-8:      hsl(201, 55%, 80%);
    --cl-magenta-7:   hsl(320, 59%, 72%);
    --cl-magenta-8:   hsl(320, 61%, 80%);

    --bg-main: var(--cl-gray-0);
    --bg-card: var(--cl-gray-1);
    --border: var(--cl-gray-3);
    --text-primary: var(--cl-white);
    --text-secondary: var(--cl-gray-7);
    --text-muted: var(--cl-gray-6);
    --accent: var(--cl-blue-6);
    --accent-glow: rgba(107, 180, 211, 0.15);

    --link-color: var(--cl-orange-6);
    --link-visited: var(--cl-green-6);
    --link-hover: var(--cl-magenta-7);
    --link-active: var(--cl-green-6);
}