html {
	--brand-rgb: 116 1 136;
	--brand-contrast: #fff;
	--brand-contrast-inverse: #000;

	--brand: rgb(var(--brand-rgb));
	--brand-hover: color-mix(in srgb, var(--brand), var(--brand-contrast-inverse) 10%);
	--brand-active: color-mix(in srgb, var(--brand), var(--brand-contrast-inverse) 20%);

	--brand-light: rgb(var(--brand-rgb) / .15);
	--brand-light-hover: rgb(var(--brand-rgb) / .2);
	--brand-light-active: rgb(var(--brand-rgb) / .25);

	--brand-dark: color-mix(in srgb, var(--brand), var(--brand-contrast-inverse) 25%);

	/* ================================
	 * FONT
	 * ================================ */

	--brand-font-family: Satoshi;
	--font-feature: "tnum", "ss03";

	--font-family-monospace: ui-monospace, "SFMono-Regular", Menlo, Monaco, "Segoe UI Mono", Consolas, "Courier New", monospace;
	--font-feature-monospace: "tnum", "zero";

	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 600;
	--font-weight-bold: 700;
	--font-weight-bolder: 900;

	--font-size-small: 0.875em;
	--font-size-normal: 1em;
	--font-size-large: 1.125em;
	--font-size-subtitle: 1.25em;

	--font-size-h1: 1.75em;
	--font-size-h2: 1.5em;
	--font-size-h3: 1.25em;
	--font-size-h4: 1.125em;
	--font-size-h5: 1em;
	--font-size-h6: 0.875em;

	--line-height: 1.5;

	/* ================================
	 * SCREEN
	 * ================================ */

	--screen-small: 36em;
	--screen-medium: 48em;
	--screen-large: 62em;
	--screen-huge: 75em;

	/* ================================
	 * SPACING
	 * ================================ */

	--spacing-small: 0.5em;
	--spacing-body: 1em;
	--spacing-large: 1.5em;
	--spacing-component-block: 0.5em;
	--spacing-component-inline: 1em;
	--spacing-component-inner: 0.375em;

	/* ================================
	 * COLOR
	 * ================================ */

	--outline-color: var(--brand);
	--outline-width: max(4px, 0.25em);
	--outline-offset: var(--border-width);

	--color-body: #111;
	--color-secondary: #585858;
	--color-placeholder: #888;
	--color-inverse: #fff;
	--color-info: #20207e;
	--color-success: #0e730e;
	--color-warning: #9d5f11;
	--color-danger: #870b0b;
	--color-disabled: #666;

	--background-body: #fff;
	--background-secondary: #fafafa;
	--background-tertiary: #f8f8f8;
	--background-inverse: #111;
	--background-info: rgb(37 37 174 / .1);
	--background-success: rgb(10 98 10 / .1);
	--background-warning: rgb(130 73 0 / .1);
	--background-danger: rgb(168 32 32 / .1);
	--background-disabled: #ddd;

	--border-color-body: #e0e0e0;
	--border-color-hover: #ccc;
	--border-color-split: #ececec;
	--border-color-disabled: #aaa;

	--button-background: #111;
	--button-background-hover: #333;
	--button-background-active: #333;
	--button-background-disabled: var(--background-disabled);

	--button-color: #fff;
	--button-color-disabled: var(--color-disabled);

	--input-background: #fafafa;

	/* ================================
	 * BORDER
	 * ================================ */

	--border-width-small: max(1px, 0.0625em);
	--border-width: max(2px, 0.125em);
	--border-radius-small: 0.25em;
	--border-radius: 0.5em;
	--border-radius-large: 0.75em;
	--border-radius-pill: 2.5em;
	--border-radius-circle: 100%;

	/* ================================
	 * ANIMATION
	 * ================================ */

	--animation-duration-short: 80ms;
	--animation-duration: 120ms;
	--animation-curve: cubic-bezier(0.33, 1, 0.66, 1);
}

@media (prefers-color-scheme: dark) {
	html {
		--brand-rgb: 210 139 222;
		--brand-contrast: #000;
		--brand-contrast-inverse: #fff;

		--brand: rgb(var(--brand-rgb));
		--brand-light: rgb(var(--brand-rgb) / .15);
		--brand-light-hover: rgb(var(--brand-rgb) / .2);
		--brand-light-active: rgb(var(--brand-rgb) / .25);

		--color-body: #eee;
		--color-secondary: #a4a4a4;
		--color-placeholder: #888;
		--color-inverse: #000;
		--color-info: #bfd7fb;
		--color-success: #a1f2a1;
		--color-warning: #ffc69d;
		--color-danger: #ffbebe;
		--color-disabled: #666;

		--background-body: rgb(20 20 20);
		--background-secondary: rgb(27 27 27);
		--background-tertiary: rgb(31 31 31);
		--background-inverse: rgb(255 255 255);
		--background-info: rgb(141 171 217 / .1);
		--background-success: rgb(121 210 121 / .1);
		--background-warning: rgb(230 160 110 / .1);
		--background-danger: rgb(240 137 137 / .1);
		--background-disabled: rgb(221 221 221 / .1);

		--border-color-body: rgb(50 50 50);
		--border-color-hover: rgb(80 80 80);
		--border-color-split: rgb(40 40 40);
		--border-color-disabled: rgb(85 85 85);

		--button-background: #444;
		--button-background-hover: #383838;
		--button-background-active: #303030;
		--button-background-disabled: var(--background-disabled);

		--button-color: #fff;
		--button-color-disabled: var(--color-disabled);

		--input-background: #202020;
		--input-background-disabled: var(--background-disabled);

		--input-color: var(--color-body);
		--input-color-disabled: var(--color-disabled);

		--input-border: var(--border-color-body);
		--input-border-disabled: var(--border-color-disabled);
	}
}