Personal Website, vers. 1 (pushed far to late)

client/css/tokens.css

@@ -0,0 +1,53 @@
+:root {
+  color-scheme: dark;
+
+  --bg: #0c0a12;
+  --bg-raised: #120f1a;
+  --surface: #16131f;
+  --surface-2: #1e1a2a;
+  --line: rgb(243 238 248 / 0.1);
+  --line-strong: rgb(243 238 248 / 0.2);
+
+  --text: #f3eef8;
+  --muted: #a8a0bb;
+  --faint: #857d99;
+
+  /* genderfluid flag */
+  --pink: #ff76a4;
+  --white: #ffffff;
+  --violet: #c011d7;
+  --black: #000000;
+  --blue: #2f3cbe;
+
+  /* lighter versions that are readable on the dark background */
+  --pink-text: #ff8db4;
+  --violet-text: #da7ff2;
+  --blue-text: #8f98ff;
+  --error: #ff9aa9;
+
+  --fluid: linear-gradient(110deg, var(--pink) 0%, var(--violet-text) 48%, var(--blue-text) 100%);
+
+  --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", system-ui, sans-serif;
+  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+
+  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
+  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
+  --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
+  --step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.85rem);
+  --step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
+  --step-4: clamp(2.2rem, 1.6rem + 3vw, 4.25rem);
+  --step-5: clamp(2.8rem, 1.7rem + 5.5vw, 6.5rem);
+
+  --radius-s: 0.6rem;
+  --radius: 1rem;
+  --radius-l: 1.5rem;
+
+  --gutter: clamp(1rem, 4vw, 2.5rem);
+  --container: 78rem;
+  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
+  --header-h: 4.25rem;
+
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+}