source ⟩ hypertext ⟩ admin ⟩ planter ⟩ planter.css

* {
	box-sizing: border-box;
}

html {
	--dark: #3c3228;
	--dark-2: #322a21;
	--dark-3: #221d16;

	--light: #e7c99a;
	--light-2: #dec091;

	--red: #f46b5b;
	--red-dark: #d14a3d;
	--orange: #f18c47;
	--orange-dark: #cf6d22;
	--yellow: #e2a850;
	--yellow-dark: #c1892c;
	--green: #b3b85e;
	--green-dark: #94993e;
	--teal: #93b67b;
	--teal-dark: #75975d;
	--blue: #87b09c;
	--blue-dark: #69917e;
	--purple: #dd8894;
	--purple-dark: #bc6a76;

	--accent: var(--green);
	--accent-dark: var(--green-dark);

	--success: var(--green);
	--fail: var(--red);

	--sans: Alegreya Sans TSF, Alegreya Sans, Noto Sans, sans-serif;
	--mono: "IBM Plex Mono", monospace;
	--draft: "iA Writer Quattro S", var(--mono);

	font-size: 1.125rem;
}

body {
	min-block-size: 100vb;
	margin: 0;
	padding: 0;

	color: var(--light);
	font-family: var(--sans);
	line-height: 1.25;

	background-color: var(--dark);
}

/* Colours */

.red {
	--accent: var(--red);
	--accent-dark: var(--red-dark);
}

.orange {
	--accent: var(--orange);
	--accent-dark: var(--orange-dark);
}

.yellow {
	--accent: var(--yellow);
	--accent-dark: var(--yellow-dark);
}

.green {
	--accent: var(--green);
	--accent-dark: var(--green-dark);
}

.teal {
	--accent: var(--teal);
	--accent-dark: var(--teal-dark);
}

.blue {
	--accent: var(--blue);
	--accent-dark: var(--blue-dark);
}

.purple {
	--accent: var(--purple);
	--accent-dark: var(--purple-dark);
}

/* Generic stuff */

a {
	color: inherit;
}

input,
select,
button,
.button,
textarea {
	padding: 0;

	color: inherit;
	font-family: var(--sans);
	font-size: 1em;

	border: none;
	background-color: var(--dark-2);
	border-radius: 0.5rem;
}

input,
select {
	inline-size: auto;
	min-inline-size: 0;
}

button,
a.button,
input[type="submit"] {
	padding: 0.5ch 1ch;
	min-inline-size: 10ch;

	text-align: center;
	cursor: pointer;
}

a.button {
	text-decoration: none;
}

:is(input[type="submit"], button, .button).textual {
	padding: 0;
	margin: 0;
	color: var(--accent);
	background-color: transparent;
	border-radius: 0;
}

:is(input[type="submit"], button, .button).textual:is(:hover, :focus) {
	border-block-end: 1px solid;
}

:is(input[type="submit"], button, .button).hollow {
	color: var(--accent);
	border: 0.125em solid var(--accent);
}

:is(input[type="submit"], button, .button).hollow:is(:hover, :focus) {
	color: var(--dark);
	background-color: var(--accent-dark);
	border: none;
}

:is(input[type="submit"], button, .button).filled {
	color: var(--dark);
	background-color: var(--accent);
}

:is(input[type="submit"], button, .button).filled:is(:hover, :focus) {
	background-color: var(--accent-dark);
}

:is(input[type="submit"], button, .button).flex {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1ch;
}

.all-sc {
	font-variant-caps: all-small-caps;
	letter-spacing: 0.05em;
}

.sans {
	font-family: var(--sans);
}

.draft {
	font-family: var(--draft);
}

.mono {
	font-family: var(--mono);
}

input.mono,
input.draft {
	font-size: 0.9em;
}
.message {
	font-style: italic;
}

.failure {
	color: var(--fail);
}

.success {
	color: var(--success);
}

.sc-header {
	margin: 0;
	padding: 0;

	font-size: 1em;
	font-variant-caps: small-caps;
	font-weight: normal;
	letter-spacing: 0.05em;
}

.icon {
	font-family: "Material Symbols";
}

:lang(ar, ur, he) {
	direction: rtl;
}

form:not([hidden]) {
	display: flex;
	flex-direction: column;
	padding-inline: 1rem;
	gap: 1em;
	align-items: start;
	accent-color: var(--accent);
}

fieldset {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1ch;

	margin: 0;
	padding: 0;

	border: 0;
}

legend {
	display: block;
	grid-column: 1 / 3;

	margin-block-end: 0.5ch;

	font-weight: bold;
	font-size: 1.25em;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--accent);
	color-scheme: dark;
	inline-size: 1.5em;
	block-size: 1.5em;
	margin: 0;
	padding: 0;
}

/* Fonts */

@font-face {
	font-family: "Material Symbols";
	src: url("/fonts/material-symbols.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-bolditalic.woff2") format("woff2");
	font-weight: bold;
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Alegreya Sans TSF";
	src: url("/fonts/alegreyasans-bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
	font-weight: bold;
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "iA Writer Quattro S";
	src: url("/fonts/iAWriterQuattroS-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}