:root { --oklch-theme-1: 0.9802 0.0074 151.89; --oklch-theme-2: 0.9822 0.0118 313.22; --oklch-theme-3: 0.9856 0.0084 56.32; --oklch-theme-4: 0.9808 0.0091 258.34; --oklch-theme-5: 0.9727 0.0119 17.36; --oklch-theme-6: 0.9731 0 0; --oklch-black: 0 0 0; --oklch-blue: 0.5687 0.1602 254.08; --oklch-blue-hover: 0.5087 0.1602 254.08; --oklch-canvas: var(--oklch-theme-1); --oklch-green: 0.5506 0.1301 154.06; --oklch-highlight: var(--oklch-yellow); --oklch-ink: var(--oklch-slate-4); --oklch-ink-hover: var(--oklch-slate-3); --oklch-ink-inverted: var(--oklch-ink); --oklch-ink-inverted-hover: var(--oklch-ink-hover); --oklch-off-white: 0.9197 0.0059 239.83; --oklch-purple: 0.4392 0.1125 300.59; --oklch-red: 0.6311 0.1701 32; --oklch-slate-1: 0.1891 0.0191 235.5; --oklch-slate-2: 0.2303 0.0211 232.9; --oklch-slate-3: 0.2714 0.023 230.3; --oklch-slate-4: 0.3288 0.0203 233.81; --oklch-slate-5: 0.5664 0.0125 226.12; --oklch-yellow: 0.9034 0.1292 91.09; --oklch-white: 1 0 0; --color-black: oklch(var(--oklch-black)); --color-blue: oklch(var(--oklch-blue)); --color-blue-hover: oklch(var(--oklch-blue-hover)); --color-canvas: oklch(var(--oklch-canvas)); --color-green: oklch(var(--oklch-green)); --color-highlight: oklch(var(--oklch-highlight)); --color-ink: oklch(var(--oklch-ink)); --color-ink-hover: oklch(var(--oklch-ink-hover)); --color-ink-inverted: oklch(var(--oklch-ink-inverted)); --color-ink-inverted-hover: oklch(var(--oklch-ink-inverted-hover)); --color-red: oklch(var(--oklch-red)); --color-slate-1: oklch(var(--oklch-slate-1)); --color-slate-2: oklch(var(--oklch-slate-2)); --color-slate-3: oklch(var(--oklch-slate-3)); --color-slate-4: oklch(var(--oklch-slate-4)); --color-slate-5: oklch(var(--oklch-slate-5)); --color-yellow: oklch(var(--oklch-yellow)); --color-white: oklch(var(--oklch-white)); --font-family-graphik: 'Graphik', sans-serif; --font-family-sharpie: 'Sharpie', sans-serif; --font-family-berkeley: 'Berkeley Mono', monospace; --font-family-monaspace: 'Monaspace', monospace; --font-size-x-small: max(0.5rem, 0.7937vw); --font-size-small: max(0.5625rem, 0.9259vw); --font-size: max(0.6875rem, 1.0582vw); --font-size-medium: max(0.75rem, 1.1905vw); --font-size-large: max(0.875rem, 1.3228vw); --font-size-x-large: max(1rem, 1.5873vw); --font-size-xx-large: max(1.1875rem, 1.8519vw); --font-size-xxx-large: max(1.375rem, 2.1164vw); --font-size-xxxx-large: max(1.6875rem, 2.6455vw); --font-size-xxxxx-large: max(1.875rem, 2.9101vw); --letter-spacing-tight: -0.0225em; --letter-spacing: -0.01875em; --letter-spacing-loose: -0.01125em; --line-height-x-tight: 1.15; --line-height-tight: 1.3; --line-height: 1.5; --text-decoration-thickness: max(1px, 0.07em); --text-underline-offset: 0.08em; --border-radius: 0.75em; --box-shadow: 0 0 0 max(1px, 0.05em) oklch(var(--oklch-black) / 0.0625), 0 0.2em 1.6em -0.5em oklch(var(--oklch-black) / 0.04), 0 0.3em 2.0em -0.6em oklch(var(--oklch-black) / 0.04), 0 0.3em 0.8em -0.7em oklch(var(--oklch-black) / 0.04), 0 0.5em 1.2em -0.9em oklch(var(--oklch-black) / 0.04), 0 0.7em 1.6em -1.1em oklch(var(--oklch-black) / 0.04) ; --box-shadow-intro: 0 0.1em 1.6em -0.5em oklch(var(--oklch-black) / 0.05), 0 0.2em 2.0em -0.6em oklch(var(--oklch-black) / 0.05), 0 0.2em 0.8em -0.7em oklch(var(--oklch-black) / 0.05), 0 0.4em 1.2em -0.9em oklch(var(--oklch-black) / 0.05), 0 0.6em 1.6em -1.1em oklch(var(--oklch-black) / 0.05) ; --box-shadow-strong: 0 0 0 max(1px, 0.05em) oklch(var(--oklch-black) / 0.25), 0 0.2em 1.6em -0.5em oklch(var(--oklch-black) / 0.04), 0 0.3em 2.0em -0.6em oklch(var(--oklch-black) / 0.04), 0 0.3em 0.8em -0.7em oklch(var(--oklch-black) / 0.04), 0 0.5em 1.2em -0.9em oklch(var(--oklch-black) / 0.04), 0 0.7em 1.6em -1.1em oklch(var(--oklch-black) / 0.04) ; --box-shadow-button: 0 0.2em 1.6em -0.5em oklch(var(--oklch-black) / 0.1), 0 0.3em 2.0em -0.6em oklch(var(--oklch-black) / 0.1), 0 0.3em 0.8em -0.7em oklch(var(--oklch-black) / 0.1), 0 0.5em 1.2em -0.9em oklch(var(--oklch-black) / 0.1), 0 0.7em 1.6em -1.1em oklch(var(--oklch-black) / 0.1) ; --box-shadow-inset: inset 0 0 0 max(1px, 0.05em) oklch(var(--oklch-black) / 0.1125), 0 0.2em 1.6em -0.5em oklch(var(--oklch-black) / 0.04), 0 0.3em 2.0em -0.6em oklch(var(--oklch-black) / 0.04), 0 0.3em 0.8em -0.7em oklch(var(--oklch-black) / 0.04), 0 0.5em 1.2em -0.9em oklch(var(--oklch-black) / 0.04), 0 0.7em 1.6em -1.1em oklch(var(--oklch-black) / 0.04) ; --box-shadow-play: 0 0.1em 0.8em -0.6em oklch(var(--oklch-black) / 0.1), 0 0.2em 0.9em -0.7em oklch(var(--oklch-black) / 0.2), 0 0.3em 1.0em -0.8em oklch(var(--oklch-black) / 0.3), 0 0.4em 1.1em -0.9em oklch(var(--oklch-black) / 0.4), 0 0.5em 1.2em -1.0em oklch(var(--oklch-black) / 0.5) ; --space-xxx-small: 0.2em; --space-xx-small: 0.4em; --space-x-small: 0.6em; --space-small: 0.8em; --space-medium: 1em; --space-neutral: 1.5em; --space-large: 2em; --space-x-large: 3em; --space-xx-large: 6em; --space-xxx-large: 8em; --space-xxxx-large: 12em; --transition: 0.15s ease; --transition-slow: 0.3s ease; } @media(prefers-color-scheme: dark) { :root { --oklch-theme-1: var(--oklch-slate-1); --oklch-theme-2: var(--oklch-slate-1); --oklch-theme-3: var(--oklch-slate-1); --oklch-theme-4: var(--oklch-slate-1); --oklch-theme-5: var(--oklch-slate-1); --oklch-theme-6: var(--oklch-slate-1); --oklch-ink: var(--oklch-off-white); --oklch-ink-inverted: var(--oklch-slate-4); --oklch-ink-hover-inverted: var(--oklch-slate-3); --oklch-highlight: var(--oklch-purple); } }