Split app.css into layered tokens and base globals

Fix ::root selector so vars and base font apply

2 files changed, 77 insertions, 0 deletions

diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 0000000..8a67f66
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,51 @@
+@layer base {
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+	}
+
+	:root {
+		font-family:
+			'Inter',
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			sans-serif;
+		font-size: 16px;
+		line-height: 1.5;
+		color: var(--text);
+		background-color: var(--bg);
+	}
+
+	body {
+		min-height: 100dvh;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	main {
+		padding: 0 1rem;
+	}
+
+	h1 {
+		font-size: 1.875rem;
+		font-weight: 700;
+		letter-spacing: -0.02em;
+	}
+
+	h2 {
+		font-size: 1.25rem;
+		font-weight: 600;
+		letter-spacing: -0.01em;
+	}
+
+	button {
+		cursor: pointer;
+		font-family: inherit;
+	}
+}
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
new file mode 100644
index 0000000..4ab1f05
--- /dev/null
+++ b/src/styles/tokens.css
@@ -0,0 +1,26 @@
+@layer tokens {
+	:root {
+		--white: oklch(1 0 0);
+		--bg: oklch(0.97 0.006 70);
+		--nav-height: 3rem;
+		--surface: var(--white);
+		--surface-hover: oklch(from var(--accent) 0.99 0.008 h);
+		--border: oklch(0.91 0.006 70);
+
+		--text: oklch(0.25 0.006 55);
+		--text-secondary: oklch(0.58 0.01 50);
+
+		--accent: oklch(0.66 0.12 30);
+		--accent-hover: oklch(from var(--accent) calc(l - 0.06) c h);
+
+		--success: oklch(0.72 0.07 140);
+		--danger: oklch(0.6 0.16 28);
+
+		--shadow: oklch(from var(--text) l c h / 0.06);
+		--shadow-accent: oklch(from var(--accent) l c h / 0.1);
+		--shadow-accent-focus: oklch(from var(--accent) l c h / 0.15);
+		--shadow-accent-lg: oklch(from var(--accent) l c h / 0.2);
+		--danger-bg: oklch(from var(--danger) l c h / 0.08);
+		--danger-hover-bg: oklch(from var(--danger) l c h / 0.1);
+	}
+}