:root { --rgb-black: 35, 28, 51; --rgb-blurple: 85, 34, 250; --rgb-canary: 255, 245, 202; --rgb-canary-light: 255, 250, 229; --rgb-cobalt: 0, 116, 228; --rgb-coral: 249, 92, 92; --rgb-coral-dark: 236, 67, 67; --rgb-grey: 115, 108, 131; --rgb-green: 37, 211, 102 --rgb-green-light: 22, 186, 91; --rgb-lavender: 213, 210, 255; --rgb-lavender-light: 234, 232, 254; --rgb-mint: 179, 244, 224; --rgb-mint-light: 216, 249, 240; --rgb-orange: 248, 121, 23; --rgb-paper: 249, 247, 245; --rgb-peach: 255, 229, 218; --rgb-peach-light: 254, 242, 237; --rgb-pink: 207, 111, 182; --rgb-pink-light: 239, 218, 245; --rgb-purple: 119, 0, 162; --rgb-salmon: 236, 133, 128; --rgb-sky: 182, 219, 255; --rgb-sky-tint: 218, 237, 254; --rgb-sky-light: 238, 248, 255; --rgb-stone: 237, 234, 230; --rgb-stone-light: 247, 244, 240; --rgb-teal: 95, 221, 197; --rgb-white: 255, 255, 255; --rgb-yellow: 245, 214, 82; --color-black: rgb(var(--rgb-black)); --color-blurple: rgb(var(--rgb-blurple)); --color-canary: rgb(var(--rgb-canary)); --color-canary-light: rgb(var(--rgb-canary-light)); --color-cobalt: rgb(var(--rgb-cobalt)); --color-coral: rgb(var(--rgb-coral)); --color-coral-dark: rgb(var(--rgb-coral-dark)); --color-green: rgb(var(--rgb-green)); --color-green-light: rgb(var(--rgb-green-light)); --color-grey: rgb(var(--rgb-grey)); --color-lavender: rgb(var(--rgb-lavender)); --color-lavender-light: rgb(var(--rgb-lavender-light)); --color-mint: rgb(var(--rgb-mint)); --color-mint-light: rgb(var(--rgb-mint-light)); --color-orange: rgb(var(--rgb-orange)); --color-paper: rgb(var(--rgb-paper)); --color-peach: rgb(var(--rgb-peach)); --color-peach-light: rgb(var(--rgb-peach-light)); --color-pink: rgb(var(--rgb-pink)); --color-pink-light: rgb(var(--rgb-pink-light)); --color-purple: rgb(var(--rgb-purple)); --color-salmon: rgb(var(--rgb-salmon)); --color-sky: rgb(var(--rgb-sky)); --color-sky-tint: rgb(var(--rgb-sky-tint)); --color-sky-light: rgb(var(--rgb-sky-light)); --color-stone: rgb(var(--rgb-stone)); --color-stone-light: rgb(var(--rgb-stone-light)); --color-teal: rgb(var(--rgb-teal)); --color-white: rgb(var(--rgb-white)); --color-yellow: rgb(var(--rgb-yellow)); --color-hey-for-domains: rgb(var(--rgb-blurple)); --color-hey-for-you: rgb(var(--rgb-teal)); --lch-black: 0% 0 0; --lch-white: 100% 0 0; --lch-golden: 89.1% 0.178 95.7; --lch-target: 97.88% 0.1212 108.45; --lch-canvas: 97.89% 0.0029 264.54; --lch-canvas-dark: 95.89% 0.0029 264.54; --lch-canvas-light: 99.89% 0.0029 264.54; --lch-ink-darkest: 26% 0.05 264; --lch-ink-darker: 40% 0.026 262; --lch-ink-dark: 57% 0.014 260; --lch-ink-medium: 66% 0.008 258; --lch-ink-light: 84% 0.005 256; --lch-ink-lighter: 92% 0.003 254; --lch-ink-lightest: 96% 0.002 252; --lch-ink-hover-dark: 34% 0.05 264; --lch-ink-hover-light: 87% 0.003 254; --lch-ink-inverted: var(--lch-ink-lightest); --lch-red-darkest: 26% 0.105 34; --lch-red-darker: 40% 0.154 36; --lch-red-dark: 59% 0.19 38; --lch-red-medium: 66% 0.204 40; --lch-red-light: 84.08% 0.0837 41.96; --lch-red-lighter: 92% 0.03 44; --lch-red-lightest: 96% 0.013 46; --lch-yellow-darkest: 26% 0.0729 40; --lch-yellow-darker: 40% 0.12 50; --lch-yellow-dark: 58% 0.156 60; --lch-yellow-medium: 74% 0.184 70; --lch-yellow-light: 84% 0.12 80; --lch-yellow-lighter: 92% 0.076 90; --lch-yellow-lightest: 96% 0.034 100; --lch-lime-darkest: 26% 0.064 109; --lch-lime-darker: 40% 0.101 110; --lch-lime-dark: 56.5% 0.142 111; --lch-lime-medium: 68% 0.176 113.11; --lch-lime-light: 83.92% 0.0927 113.6; --lch-lime-lighter: 92% 0.046 114; --lch-lime-lightest: 96% 0.034 115; --lch-green-darkest: 26% 0.071 149; --lch-green-darker: 40% 0.12 148; --lch-green-dark: 55% 0.162 147; --lch-green-medium: 66% 0.208 146; --lch-green-light: 83.92% 0.0772 145.06; --lch-green-lighter: 92% 0.044 144; --lch-green-lightest: 96% 0.022 143; --lch-aqua-darkest: 26% 0.059 214; --lch-aqua-darker: 40% 0.093 212; --lch-aqua-dark: 55.5% 0.122 210; --lch-aqua-medium: 66% 0.152 208; --lch-aqua-light: 83.88% 0.0555 206.02; --lch-aqua-lighter: 92% 0.02 204; --lch-aqua-lightest: 96% 0.012 202; --lch-blue-darkest: 26% 0.126 264; --lch-blue-darker: 40% 0.166 262; --lch-blue-dark: 57.02% 0.1895 260.46; --lch-blue-medium: 66% 0.196 257.82; --lch-blue-light: 84.04% 0.0719 255.29; --lch-blue-lighter: 92% 0.026 254; --lch-blue-lightest: 96% 0.016 252; --lch-blue-hover: 51.02% 0.1895 260.46; --lch-violet-darkest: 26% 0.148 292; --lch-violet-darker: 40% 0.2 290; --lch-violet-dark: 58% 0.216 287.6; --lch-violet-medium: 66% 0.206 285.52; --lch-violet-light: 84.08% 0.0791 283.47; --lch-violet-lighter: 92% 0.03 282; --lch-violet-lightest: 96% 0.015 280; --lch-purple-darkest: 26% 0.131 314; --lch-purple-darker: 40% 0.178 312; --lch-purple-dark: 58% 0.21 310; --lch-purple-medium: 66% 0.258 308; --lch-purple-light: 84.09% 0.0778 305.77; --lch-purple-lighter: 92% 0.03 304; --lch-purple-lightest: 96% 0.019 302; --lch-pink-darkest: 26% 0.12 348; --lch-pink-darker: 40% 0.16 346; --lch-pink-dark: 59% 0.188 344; --lch-pink-medium: 71.8% 0.2008 342; --lch-pink-light: 84.04% 0.0737 340; --lch-pink-lighter: 92% 0.03 338; --lch-pink-lightest: 96% 0.02 336; --color-black: oklch(var(--lch-black)); --color-white: oklch(var(--lch-white)); --color-golden: oklch(var(--lch-golden)); --color-target: oklch(var(--lch-target)); --color-canvas: oklch(var(--lch-canvas)); --color-canvas-dark: oklch(var(--lch-canvas-dark)); --color-canvas-light: oklch(var(--lch-canvas-light)); --color-canvas-light-inverted: oklch(var(--lch-canvas-light-inverted)); --color-ink: oklch(var(--lch-ink-darkest)); --color-ink-inverted: oklch(var(--lch-ink-inverted)); --color-ink-hover-dark: oklch(var(--lch-ink-hover-dark)); --color-ink-hover-light: oklch(var(--lch-ink-hover-light)); --color-red: oklch(var(--lch-red-medium)); --color-yellow: oklch(var(--lch-yellow-medium)); --color-lime: oklch(var(--lch-lime-medium)); --color-green: oklch(var(--lch-green-medium)); --color-aqua: oklch(var(--lch-aqua-medium)); --color-blue: oklch(var(--lch-blue-dark)); --color-blue-hover: oklch(var(--lch-blue-hover)); --color-violet: oklch(var(--lch-violet-medium)); --color-purple: oklch(var(--lch-purple-dark)); --color-pink: oklch(var(--lch-pink-medium)); --color-ink-lightest: oklch(var(--lch-ink-lightest)); --color-ink-lighter: oklch(var(--lch-ink-lighter)); --color-ink-light: oklch(var(--lch-ink-light)); --color-ink-medium: oklch(var(--lch-ink-medium)); --color-ink-dark: oklch(var(--lch-ink-dark)); --color-ink-darker: oklch(var(--lch-ink-darker)); --color-ink-darkest: oklch(var(--lch-ink-darkest)); --color-blue-lightest: oklch(var(--lch-blue-lightest)); --color-blue-lighter: oklch(var(--lch-blue-lighter)); --color-blue-light: oklch(var(--lch-blue-light)); --color-blue-medium: oklch(var(--lch-blue-medium)); --color-blue-dark: oklch(var(--lch-blue-dark)); --color-blue-darker: oklch(var(--lch-blue-darker)); --color-blue-darkest: oklch(var(--lch-blue-darkest)); --color-coral-lightest: oklch(var(--lch-coral-lightest)); --color-coral-lighter: oklch(var(--lch-coral-lighter)); --color-coral-light: oklch(var(--lch-coral-light)); --color-coral-medium: oklch(var(--lch-coral-medium)); --color-coral-dark: oklch(var(--lch-coral-dark)); --color-coral-darker: oklch(var(--lch-coral-darker)); --color-coral-darkest: oklch(var(--lch-coral-darkest)); --font-family-inter: 'Inter', Sans-Serif; --font-family-scorekard: 'Scorekard', Sans-Serif; --font-family-cartridge: 'Cartridge', Sans-Serif; --font-size: clamp(1.5rem, 2.225vw, 2rem); --font-size-xxxx-small: 50%; --font-size-xxx-small: 60%; --font-size-xx-small: 70%; --font-size-x-small: 80%; --font-size-small: 90%; --font-size-medium: 100%; --font-size-large: 115%; --font-size-x-large: 130%; --font-size-xx-large: 145%; --font-size-xxx-large: 160%; --letter-spacing: -0.01em; --letter-spacing-tight: -0.015em; --letter-spacing-tighter: -0.0175em; --letter-spacing-loose: 0.005em; --letter-spacing-looser: 0.0075em; --line-height: 1.5; --line-height-tight: 1.3; --line-height-tighter: 1.2; --line-height-tightest: 1.1; --space-neutral: 1.5em; --space-xxx-small: 0.2em; --space-xx-small: 0.4em; --space-x-small: 0.6em; --space-small: 0.8em; --space-medium: 1em; --space-large: 2em; --space-x-large: 3em; --space-xx-large: 4em; --space-xxx-large: 5em; --space-super-large: 9em; --transition: 0.125s cubic-bezier(0.37, 1, 0.74, 1); --nav-height: 2.9125em; --box-shadow: 0 0 0 1px oklch(var(--lch-black) / 0.075), 0 0.2em 0.1em -0.2em oklch(var(--lch-black) / 0.075), 0 0.4em 0.8em -0.4em oklch(var(--lch-black) / 0.075), 0 0.8em 1.6em -1.2em oklch(var(--lch-black) / 0.075) ; --box-shadow-cluster: 0 0 0 1px oklch(var(--lch-black) / 0.0875), 0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 0.1), 0 0.4em 2.4em -1.0em oklch(var(--lch-black) / 0.2), 0 0.4em 0.8em -1.2em oklch(var(--lch-black) / 0.3), 0 0.8em 1.2em -1.6em oklch(var(--lch-black) / 0.4), 0 1.2em 1.6em -2.0em oklch(var(--lch-black) / 0.5) ; --box-shadow-pill: 0 0 0 1px oklch(var(--lch-black) / 0.0875), 0 0.1em 0.2em -0.1em oklch(var(--lch-black) / 0.05), 0 0.2em 0.4em -0.2em oklch(var(--lch-black) / 0.05), 0 0.3em 0.6em -0.3em oklch(var(--lch-black) / 0.05) ; --box-shadow-pill-hover: 0 0 0 1px oklch(var(--lch-black) / 0.125), 0 0.1em 0.2em -0.1em oklch(var(--lch-black) / 0.0875), 0 0.2em 0.4em -0.2em oklch(var(--lch-black) / 0.0875), 0 0.3em 0.6em -0.3em oklch(var(--lch-black) / 0.0875) ; } @media(min-width: 48em) { :root { --font-size-large: 125%; --font-size-x-large: 150%; --font-size-xx-large: 175%; --font-size-xxx-large: 200%; } } @media(prefers-color-scheme: dark) { :root { --lch-target: 40% 0.094 260; --lch-canvas: 20% 0.0195 232.58; --lch-canvas-dark: 17% 0.0195 232.58; --lch-canvas-light: 23% 0.0195 232.58; --lch-canvas-light-inverted: 99.89% 0.0029 264.54; --lch-ink-darkest: 96.02% 0.0034 260; --lch-ink-darker: 86% 0.0061 260; --lch-ink-dark: 73.97% 0.009 260; --lch-ink-medium: 62% 0.0122 260; --lch-ink-light: 40% 0.0148 260; --lch-ink-lighter: 30% 0.0178 260; --lch-ink-lightest: 25% 0.0204 260; --lch-red-darkest: 95.85% 0.0218 46; --lch-red-darker: 86% 0.086 44; --lch-red-dark: 73.95% 0.139 42; --lch-red-medium: 62% 0.154 40; --lch-red-light: 40% 0.088 38; --lch-red-lighter: 30% 0.032 36; --lch-red-lightest: 25% 0.011 34; --lch-yellow-darkest: 96% 0.056 100; --lch-yellow-darker: 86% 0.103 90; --lch-yellow-dark: 74.06% 0.136 80; --lch-yellow-medium: 62.1% 0.146 70; --lch-yellow-light: 40% 0.0736 60; --lch-yellow-lighter: 30% 0.026 50; --lch-yellow-lightest: 25% 0.01 40; --lch-lime-darkest: 96.04% 0.066 115; --lch-lime-darker: 86% 0.098 114; --lch-lime-dark: 73.97% 0.121 113; --lch-lime-medium: 62% 0.128 112; --lch-lime-light: 40% 0.0637 111; --lch-lime-lighter: 30% 0.024 110; --lch-lime-lightest: 25% 0.012 109; --lch-aqua-darkest: 96.15% 0.0244 202; --lch-aqua-darker: 86% 0.06 204; --lch-aqua-dark: 73.92% 0.095 206; --lch-aqua-medium: 62% 0.106 208; --lch-aqua-light: 40% 0.0594 210; --lch-aqua-lighter: 30% 0.028 212; --lch-aqua-lightest: 25% 0.017 214; --lch-blue-darkest: 95.93% 0.0217 252; --lch-blue-darker: 86% 0.068 254; --lch-blue-dark: 74% 0.1293 256; --lch-blue-medium: 62% 0.159 258; --lch-blue-light: 40% 0.094 260; --lch-blue-lighter: 30% 0.0452 262; --lch-blue-lightest: 25% 0.0318 264; --lch-blue-hover: 66% 0.1293 256; --lch-violet-darkest: 95.97% 0.019 280; --lch-violet-darker: 86% 0.068 282; --lch-violet-dark: 74.08% 0.142 284; --lch-violet-medium: 62% 0.184 286; --lch-violet-light: 40% 0.108 288; --lch-violet-lighter: 30% 0.048 290; --lch-violet-lightest: 25% 0.025 292; --lch-purple-darkest: 95.99% 0.0217 302; --lch-purple-darker: 86% 0.068 304; --lch-purple-dark: 73.98% 0.141 306; --lch-purple-medium: 62% 0.177 308; --lch-purple-light: 40% 0.099 310; --lch-purple-lighter: 30% 0.04 312; --lch-purple-lightest: 25% 0.017 314; --lch-pink-darkest: 95.84% 0.0308 336; --lch-pink-darker: 86% 0.074 338; --lch-pink-dark: 74.04% 0.1294 340; --lch-pink-medium: 62% 0.166 342; --lch-pink-light: 40% 0.085 344; --lch-pink-lighter: 30% 0.03 346; --lch-pink-lightest: 25% 0.011 348; } }