feat(frontend): add base styles

frontend/src/app.css

@@ -1 +1,143 @@
-/* global styles */
+html {
+	/* light */
+	--brand-light: var(--orange-10);
+	--text-1-light: var(--gray-8);
+	--text-2-light: var(--gray-7);
+	--surface-1-light: var(--gray-0);
+	--surface-2-light: var(--gray-1);
+	--surface-3-light: var(--gray-2);
+	--surface-4-light: var(--gray-3);
+	--surface-shadow-light: var(--gray-8-hsl);
+	--shadow-strength-light: 2%;
+
+	/* dark */
+	--brand-dark: var(--orange-3);
+	--text-1-dark: var(--gray-3);
+	--text-2-dark: var(--gray-5);
+	--surface-1-dark: var(--gray-12);
+	--surface-2-dark: var(--gray-11);
+	--surface-3-dark: var(--gray-10);
+	--surface-4-dark: var(--gray-9);
+	--surface-shadow-dark: var(--gray-12-hsl);
+	--shadow-strength-dark: 80%;
+
+	/* dim */
+	--brand-dim: var(--orange-4);
+	--text-1-dim: var(--gray-3);
+	--text-2-dim: var(--gray-4);
+	--surface-1-dim: var(--gray-8);
+	--surface-2-dim: var(--gray-7);
+	--surface-3-dim: var(--gray-6);
+	--surface-4-dim: var(--gray-5);
+	--surface-shadow-dim: var(--gray-9-hsl);
+	--shadow-strength-dim: 20%;
+}
+
+:root {
+	color-scheme: light;
+
+	/* set defaults */
+	--brand: var(--brand-light);
+	--text-1: var(--text-1-light);
+	--text-2: var(--text-2-light);
+	--surface-1: var(--surface-1-light);
+	--surface-2: var(--surface-2-light);
+	--surface-3: var(--surface-3-light);
+	--surface-4: var(--surface-4-light);
+	--surface-shadow: var(--surface-shadow-light);
+	--shadow-strength: var(--shadow-strength-light);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		color-scheme: dark;
+
+		--brand: var(--brand-dark);
+		--text-1: var(--text-1-dark);
+		--text-2: var(--text-2-dark);
+		--surface-1: var(--surface-1-dark);
+		--surface-2: var(--surface-2-dark);
+		--surface-3: var(--surface-3-dark);
+		--surface-4: var(--surface-4-dark);
+		--surface-shadow: var(--surface-shadow-dark);
+		--shadow-strength: var(--shadow-strength-dark);
+	}
+}
+
+[color-scheme='light'] {
+	color-scheme: light;
+
+	--brand: var(--brand-light);
+	--text-1: var(--text-1-light);
+	--text-2: var(--text-2-light);
+	--surface-1: var(--surface-1-light);
+	--surface-2: var(--surface-2-light);
+	--surface-3: var(--surface-3-light);
+	--surface-4: var(--surface-4-light);
+	--surface-shadow: var(--surface-shadow-light);
+	--shadow-strength: var(--shadow-strength-light);
+}
+
+[color-scheme='dark'] {
+	color-scheme: dark;
+
+	--brand: var(--brand-dark);
+	--text-1: var(--text-1-dark);
+	--text-2: var(--text-2-dark);
+	--surface-1: var(--surface-1-dark);
+	--surface-2: var(--surface-2-dark);
+	--surface-3: var(--surface-3-dark);
+	--surface-4: var(--surface-4-dark);
+	--surface-shadow: var(--surface-shadow-dark);
+	--shadow-strength: var(--shadow-strength-dark);
+}
+
+[color-scheme='dim'] {
+	color-scheme: dark;
+
+	--brand: var(--brand-dim);
+	--text-1: var(--text-1-dim);
+	--text-2: var(--text-2-dim);
+	--surface-1: var(--surface-1-dim);
+	--surface-2: var(--surface-2-dim);
+	--surface-3: var(--surface-3-dim);
+	--surface-4: var(--surface-4-dim);
+	--surface-shadow: var(--surface-shadow-dim);
+	--shadow-strength: var(--shadow-strength-dim);
+}
+
+.surface-1 {
+	background-color: var(--surface-1);
+	color: var(--text-2);
+}
+
+.surface-2 {
+	background-color: var(--surface-2);
+	color: var(--text-2);
+}
+
+.surface-3 {
+	background-color: var(--surface-3);
+	color: var(--text-1);
+}
+
+.surface-4 {
+	background-color: var(--surface-4);
+	color: var(--text-1);
+}
+
+html {
+	accent-color: var(--brand);
+	background-color: var(--surface-1);
+	block-size: 100%;
+	color: var(--text-1);
+}
+
+:visited {
+	color: var(--brand, var(--link));
+}
+
+[data-selected] {
+	background: var(--brand) !important;
+	color: white;
+}