html.dark {
    /* built-in theme */
    --color-scheme: dark;

    /* text */
    --font-family: "Rubik", helvetica, arial, sans-serif;
    --font-family-mono: "Fira Code", Menlo, Consolas, monospace;
    --line-height: 1.6;

    /* text sizes */
    --font-size: 16px;
    --font-size-mono: 0.875em; /* 14px */
    --p: 1em;
    --h1: 1.75em; /* 28px */
    --h2: 1.375em; /* 22px */
    --h3: 1.125em; /* 18px */
    --h4: 1em;
    --small: 0.875em; /* 14px */

    /* gap */
    --gap: 0.25em; /* 4px */

    /* padding */
    --padding-x: calc(var(--gap) * 3);
    --padding-y: calc(var(--gap) * 2);
    --padding: var(--padding-y) var(--padding-x);

    /* color */
    --hue: 220;
    --sat: 10%;
    --bg-lum: 16%;
    --text-lum: 72%;

    --bg: hsl(var(--hue), var(--sat), var(--bg-lum));
    --bg-dark: hsl(from var(--bg) h s calc(l - 4));
    --bg-light: hsl(from var(--bg) h s calc(l + 4));

    --text: hsl(var(--hue), var(--sat), var(--text-lum));
    --text-dark: hsl(from var(--text) h s calc(l - 24));
    --text-light: hsl(from var(--text) h s calc(l + 12));

    --border-color: hsl(from var(--bg) h s calc(l + 8));

    --input: hsl(from var(--text) h s calc(l + 8));
    --input-bg: hsl(from var(--text) h s calc(l - 52));
    --input-border: hsl(from var(--text) h s calc(l - 48));

    /* other colors */
    --red: hsl(5, 48%, 76%);
    --orange: hsl(30, 48%, 76%);
    --yellow: hsl(60, 48%, 76%);
    --green: hsl(130, 48%, 76%);
    --cyan: hsl(180, 48%, 76%);
    --blue: hsl(220, 48%, 76%);
    --purple: hsl(265, 48%, 76%);
    --pink: hsl(320, 48%, 76%);
    --hover-luminance-change: 4;
    --active-luminance-change: 2;
    --accent: var(--text);
    --accent: var(--purple);

    /* border */
    --border-width: 0.0625em; /* 1px */
    --border-width: 0.09375em; /* 1.5px */
    --border-radius: 0.25em;
    --border: var(--border-width) solid var(--border-color);
    --outline: var(--border-width) solid var(--text-light);

    /* shadows */
    --shadow:
        0 0.0625em 0.1875em 0 rgb(0 0 0 / 0.3),
        0 0.0625em 0.125em 0.0625em rgb(0 0 0 / 0.1);
    --shadow-inset:
        inset 0 0.0625em 0.1875em 0 rgb(0 0 0 / 0.3),
        inset 0 0.0625em 0.125em -0.0625em rgb(0 0 0 / 0.1);

    /* break points */
    --break-xs: 16em;
    --break-sm: 32em;
    --break-md: 50em;
    --break-lg: 80em;
    --break-xl: 120rem;
}