Split app.css into layered tokens and base globals

Fix ::root selector so vars and base font apply

3 files changed, 79 insertions, 72 deletions

diff --git a/src/app.css b/src/app.css
index a55fdcc..b219650 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,75 +1,5 @@
-*,
-*::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);
-
-	--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);
-}
-
-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;
-}
+@import './styles/tokens.css';
+@import './styles/base.css';
 
 /* ===== Utility Classes ===== */
 
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);
+	}
+}