:root {
	/* color-scheme: dark light; */
	--black: #262223;
	--cream: #ece4db;
	--blue: #00d3f5;
	/* ============ */
	--leading-inputs: 120%;
	--padding-inputs: 0.75em;
	--margin-label: 0.5em;
	--margin-form-gap: 1.5em;
	--margin-btn-gap: 1em;
	--width-input-border: 2px;
	--width-inputs: 250px;
	--width-textarea: 450px;
	--height-textarea: 250px;
	--radius-inputs: 0.25em;
	--opacity-input-disabled: 0.5;
	--transition-duration-inputs: 250ms;
	--transition-function-inputs: ease-in-out;
	--transition-inputs: color var(--transition-duration-inputs),
		background-color var(--transition-duration-inputs),
		border-color var(--transition-duration-inputs) var(--transition-function-inputs);
	/* ============== */
	--co-body-bg: #111;
	--co-body-text: #ddd;
	--co-body-accent: #6c5ce7;
	--co-body-accent-contrast: #fff;

	--co-textfld-bg: #222;
	--co-textfld-border: #333;
	--co-textfld-active-border: #444;
	--co-textfld-focus-border: var(--co-body-accent);

	--co-textfld-valid-border: hsl(140 90% 20%);
	--co-textfld-valid-active-border: hsl(140 90% 30%);
	--co-textfld-valid-focus-border: hsl(140 90% 45%);

	--co-textfld-invalid-border: hsl(20 90% 20%);
	--co-textfld-invalid-active-border: hsl(20 90% 30%);
	--co-textfld-invalid-focus-border: hsl(20 90% 45%);

	--co-btn-text: var(--co-body-accent-contrast);
	--co-btn-bg: var(--co-body-accent);
	--co-btn-active-bg: #333;
	--co-btn-focus-bg: #333;
}