@layer theme {
	:root {
		--font-sans: sans-serif;
	}

	.dark {
		/* Color palette */

		/* Primary */
		--color-primary-900: hsla(234, 55%, 51%, 1);
		--color-primary-800: hsla(233, 80%, 61%, 1);
		--color-primary-700: hsla(225, 82%, 61%, 1);
		--color-primary-600: hsla(219, 85%, 62%, 1);
		--color-primary-500: hsla(217, 93%, 67%, 1);
		--color-primary-400: hsla(215, 100%, 73%, 1);
		--color-primary-300: hsla(217, 100%, 76%, 1);
		--color-primary-200: hsla(215, 100%, 81%, 1);
		--color-primary-100: hsla(212, 100%, 85%, 1);

		--color-primary-900a: hsla(234, 55%, 51%, 0.6);
		--color-primary-400a: hsla(215, 100%, 73%, 0.5);
		--color-primary-300a: hsla(217, 100%, 76%, 0.3);
		--color-primary-100a: hsla(212, 100%, 85%, 0.6);

		/* Base */
		--color-base-900: hsla(0, 0%, 0%, 1);
		--color-base-800: hsla(0, 0%, 8%, 1);
		--color-base-700: hsla(240, 3%, 11%, 1);
		--color-base-600: hsla(240, 2%, 17%, 1);
		--color-base-500: hsla(240, 2%, 22%, 1);
		--color-base-400: hsla(0, 0%, 21%, 1);
		--color-base-300: hsla(0, 0%, 29%, 1);
		--color-base-200: hsla(0, 0%, 33%, 1);
		--color-base-100: hsla(0, 0%, 38%, 1);

		--color-base-800a: hsla(0, 0%, 8%, 0.6);
		--color-base-700a: hsla(240, 3%, 11%, 0.5);
		--color-base-600a: hsla(240, 2%, 17%, 0.6);
		--color-base-100a: hsla(257, 100%, 94%, 0.1);

		/* Green */
		--color-green-900: hsla(125, 56%, 23%, 1);
		--color-green-800: hsla(123, 46%, 33%, 1);
		--color-green-700: hsla(123, 43%, 38%, 1);
		--color-green-600: hsla(123, 41%, 44%, 1);
		--color-green-500: hsla(122, 40%, 48%, 1);
		--color-green-400: hsla(123, 37%, 55%, 1);
		--color-green-300: hsla(123, 37%, 63%, 1);
		--color-green-200: hsla(122, 35%, 73%, 1);
		--color-green-100: hsla(122, 33%, 83%, 1);
		--color-green-50: hsla(125, 30%, 92%, 1);

		/* Red */
		--color-red-900: hsla(0, 74%, 40%, 1);
		--color-red-800: hsla(0, 67%, 46%, 1);
		--color-red-700: hsla(0, 64%, 50%, 1);
		--color-red-600: hsla(1, 74%, 54%, 1);
		--color-red-500: hsla(4, 85%, 57%, 1);
		--color-red-400: hsla(1, 79%, 61%, 1);
		--color-red-300: hsla(0, 64%, 66%, 1);
		--color-red-200: hsla(0, 66%, 75%, 1);
		--color-red-100: hsla(354, 80%, 88%, 1);
		--color-red-50: hsla(351, 61%, 94%, 1);

		--color-red-300a: hsla(0, 64%, 66%, 0.4);

		/* Yellow */
		--color-yellow-900: hsla(28, 100%, 52%, 1);
		--color-yellow-800: hsla(37, 100%, 55%, 1);
		--color-yellow-700: hsla(43, 100%, 57%, 1);
		--color-yellow-600: hsla(49, 100%, 59%, 1);
		--color-yellow-500: hsla(54, 100%, 60%, 1);
		--color-yellow-400: hsla(54, 100%, 66%, 1);
		--color-yellow-300: hsla(54, 100%, 72%, 1);
		--color-yellow-200: hsla(54, 100%, 79%, 1);
		--color-yellow-100: hsla(54, 100%, 87%, 1);
		--color-yellow-50: hsla(55, 100%, 93%, 1);

		/* Semantic colors */
		--background-color: var(--color-base-900);

		/* Screen */
		--screen-background-color: var(--color-base-900);
		--primary-color: var(--color-white-900);
		--secondary-color: var(--color-white-600);
		--divider-color: var(--color-white-200);

		/* Link */
		--link-color: var(--color-primary-400);
		--active-link-color: var(--color-primary-900);
		--focus-link-color: var(--color-primary-900);
		--hover-link-color: var(--color-primary-400);

		/* Buttons */

		/* Primary Button */
		--primary-button-color: var(--color-white-900);
		--primary-button-background-color: var(--color-primary-800);
		--primary-button-outline-color: transparent;
		--hover-primary-button-color: var(--color-white-700);
		--hover-primary-button-background-color: var(--color-primary-900);
		--hover-primary-button-outline-color: transparent;
		--active-primary-button-color: var(--color-white-600);
		--active-primary-button-background-color: var(--color-primary-900);
		--active-primary-button-outline-color: var(--color-primary-900a);
		--focus-primary-button-color: var(--color-white-700);
		--focus-primary-button-background-color: var(--color-primary-800);
		--focus-primary-button-outline-color: var(--color-primary-300);
		--disabled-primary-button-color: var(--color-white-400);
		--disabled-primary-button-background-color: var(--color-primary-900);
		--disabled-primary-button-outline-color: transparent;

		/* Secondary Button */
		--secondary-button-color: var(--color-white-900);
		--secondary-button-background-color: var(--color-base-600);
		--secondary-button-outline-color: transparent;
		--hover-secondary-button-color: var(--color-white-700);
		--hover-secondary-button-background-color: var(--color-base-500);
		--hover-secondary-button-outline-color: transparent;
		--active-secondary-button-color: var(--color-white-600);
		--active-secondary-button-background-color: var(--color-base-600);
		--active-secondary-button-outline-color: var(--color-base-100a);
		--focus-secondary-button-color: var(--color-white-900);
		--focus-secondary-button-background-color: var(--color-base-600);
		--focus-secondary-button-outline-color: var(--color-primary-300);
		--disabled-secondary-button-color: var(--color-white-400);
		--disabled-secondary-button-background-color: var(--color-base-100a);
		--disabled-secondary-button-outline-color: transparent;

		/* Danger Button */
		--danger-button-color: var(--color-white-900);
		--danger-button-background-color: var(--color-red-700);
		--danger-button-outline-color: transparent;
		--hover-danger-button-color: var(--color-white-700);
		--hover-danger-button-background-color: var(--color-red-800);
		--hover-danger-button-outline-color: transparent;
		--active-danger-button-color: var(--color-white-600);
		--active-danger-button-background-color: var(--color-red-800);
		--active-danger-button-outline-color: var(--color-red-300a);
		--focus-danger-button-color: var(--color-white-900);
		--focus-danger-button-background-color: var(--color-red-700);
		--focus-danger-button-outline-color: var(--color-primary-300);
		--disabled-danger-button-color: var(--color-white-400);
		--disabled-danger-button-background-color: var(--color-red-300a);
		--disabled-danger-button-outline-color: transparent;

		/* Secondary Danger Button */
		--secondary-danger-button-color: var(--color-red-600);
		--secondary-danger-button-background-color: var(--color-base-600);
		--secondary-danger-button-outline-color: transparent;
		--hover-secondary-danger-button-color: var(--color-red-700);
		--hover-secondary-danger-button-background-color: var(--color-base-500);
		--hover-secondary-danger-button-outline-color: transparent;
		--active-secondary-danger-button-color: var(--color-red-700);
		--active-secondary-danger-button-background-color: var(--color-base-600);
		--active-secondary-danger-button-outline-color: var(--color-base-100a);
		--focus-secondary-danger-button-color: var(--color-red-600);
		--focus-secondary-danger-button-background-color: var(--color-base-600);
		--focus-secondary-danger-button-outline-color: var(--color-primary-300);
		--disabled-secondary-danger-button-color: var(--color-red-300a);
		--disabled-secondary-danger-button-background-color: var(--color-base-100a);
		--disabled-secondary-danger-button-outline-color: transparent;

		/* Plain Button */
		--plain-button-color: var(--color-white-900);
		--plain-button-background-color: transparent;
		--plain-button-outline-color: transparent;
		--hover-plain-button-color: var(--color-white-700);
		--hover-plain-button-background-color: transparent;
		--hover-plain-button-outline-color: transparent;
		--active-plain-button-color: var(--color-white-600);
		--active-plain-button-background-color: var(--color-base-600);
		--active-plain-button-outline-color: var(--color-base-100a);
		--focus-plain-button-color: var(--color-white-900);
		--focus-plain-button-background-color: var(--color-base-600);
		--focus-plain-button-outline-color: var(--color-primary-300);
		--disabled-plain-button-color: var(--color-white-400);
		--disabled-plain-button-background-color: transparent;
		--disabled-plain-button-outline-color: transparent;

		/* Header */
		--header-background-color: var(--color-base-800);
		--header-border-color: var(--color-white-200);

		/* Navbar */
		--navbar-title-color: var(--color-white-900);
		--navbar-link-color: var(--color-primary-500);

		/* Modal */
		--modal-background-color: var(--color-base-700);
		--modal-bg-overlay-color: var(--color-black-500);

		/* Footer */
		--footer-background-color: var(--color-base-800);
		--footer-border-color: var(--color-white-200);

		/* Input */
		--input-background-color: var(--color-base-600);
		--input-color: var(--color-white-900);
		--input-placeholder-color: var(--color-white-600);
		--input-leading-icon-color: var(--color-white-900);
		--input-trailing-icon-color: var(--color-white-900);
		--focus-input-border-color: var(--color-primary-500);
		--disabled-input-background-color: var(--color-base-700);
		--disabled-input-color: var(--color-white-400);
		--disabled-input-placeholder-color: var(--color-white-400);
		--disabled-input-leading-icon-color: var(--color-white-400);
		--disabled-input-trailing-icon-color: var(--color-white-400);
		--error-input-border-color: var(--color-red-500);
		--error-focus-input-border-color: var(--color-red-500);
		--error-input-leading-icon-color: var(--color-white-900);
		--error-input-trailing-icon-color: var(--color-white-900);
		--error-input-error-text-color: var(--color-red-500);

		/* Checkbox */
		--checkbox-border-color: var(--color-white-900);
		--checkbox-heading-color: var(--color-white-900);
		--checkbox-description-color: var(--color-white-600);
		--checkbox-checked-background-color: var(--color-white-900);
		--checkbox-checked-tick-color: var(--color-black-900);
		--checkbox-checked-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E");
		--checkbox-contained-background-color: var(--color-base-700);
		--checkbox-divider-color: var(--divider-color);

		/* Prose */
		--blockquote-border-color: var(--color-base-300a);
		--blockquote-color: var(--color-white-600);
		--code-background-color: var(--color-base-300);
		--code-color: var(--color-white-600);
		--h1-color: var(--color-white-900);
		--h2-color: var(--color-white-900);
		--h3-color: var(--color-white-900);
		--hr-border-color: var(--color-base-100a);
		--li-color: var(--color-white-600);
		--p-color: var(--color-white-600);

		/* List */
		--list-item-color: var(--color-white-900);
		--list-item-title-color: var(--color-white-900);
		--list-item-subtitle-color: var(--color-white-600);
		--list-item-background-color: var(--color-base-600);
		--list-item-focus-background-color: var(--color-white-300);
		--list-item-focus-outline-color: var(--color-primary-500);
		--list-item-hover-background-color: var(--color-white-300);
		--list-border-color: var(--divider-color);

		/* Card */
		--card-color: var(--color-white-900);
		--card-background-color: var(--color-base-700);

		/* Placeholder */
		--placeholder-color: var(--primary-color);
		--placeholder-background-color: var(--color-base-700);

		/* Textarea */
		--textarea-background-color: var(--color-base-600);
		--textarea-color: var(--color-white-900);
		--textarea-placeholder-color: var(--color-white-600);
		--focus-textarea-border-color: var(--color-primary-500);
		--disabled-textarea-background-color: var(--color-base-700);
		--disabled-textarea-color: var(--color-white-400);
		--disabled-textarea-placeholder-color: var(--color-white-400);
	}
}