1 files changed, 54 insertions, 49 deletions
diff --git a/src/styles/global.css b/src/styles/global.css
index 2f1d37e..e4a0d96 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,62 +1,67 @@
-@import "./tokens.css";
 @import "tailwindcss";
+@import "./tokens.css";
 
-@layer base {
-  :root {
-    /* Surface colors */
-    --color-ink-0: var(--ink-0);
-    --color-ink-1: var(--ink-1);
-    --color-ink-2: var(--ink-2);
-    --color-ink-3: var(--ink-3);
-    --color-ink-4: var(--ink-4);
+@theme {
+  /* Surfaces */
+  --color-ink-0: var(--ink-0);
+  --color-ink-1: var(--ink-1);
+  --color-ink-2: var(--ink-2);
+  --color-ink-3: var(--ink-3);
+  --color-ink-4: var(--ink-4);
 
-    /* Line colors */
-    --color-line-1: var(--line-1);
-    --color-line-2: var(--line-2);
-    --color-line-3: var(--line-3);
+  /* Foreground */
+  --color-fg-1: var(--fg-1);
+  --color-fg-2: var(--fg-2);
+  --color-fg-3: var(--fg-3);
+  --color-fg-4: var(--fg-4);
 
-    /* Foreground */
-    --color-fg-1: var(--fg-1);
-    --color-fg-2: var(--fg-2);
-    --color-fg-3: var(--fg-3);
-    --color-fg-4: var(--fg-4);
+  /* Lines */
+  --color-line-1: var(--line-1);
+  --color-line-2: var(--line-2);
+  --color-line-3: var(--line-3);
 
-    /* Accent */
-    --color-brass: var(--brass);
-    --color-brass-bright: var(--brass-bright);
-    --color-brass-deep: var(--brass-deep);
-    --color-brass-ink: var(--brass-ink);
+  /* Brand accents */
+  --color-brass: var(--brass);
+  --color-brass-bright: var(--brass-bright);
+  --color-brass-deep: var(--brass-deep);
+  --color-brass-ink: var(--brass-ink);
 
-    /* Secondary palette */
-    --color-oxford: var(--oxford);
-    --color-oxford-light: var(--oxford-light);
-    --color-burgundy: var(--burgundy);
-    --color-burgundy-light: var(--burgundy-light);
+  /* Secondary */
+  --color-oxford: var(--oxford);
+  --color-oxford-light: var(--oxford-light);
+  --color-burgundy: var(--burgundy);
+  --color-burgundy-light: var(--burgundy-light);
 
-    /* Semantic */
-    --color-positive: var(--positive);
-    --color-positive-bg: var(--positive-bg);
-    --color-negative: var(--negative);
-    --color-negative-bg: var(--negative-bg);
-    --color-warning: var(--warning);
-    --color-warning-bg: var(--warning-bg);
-    --color-info: var(--info);
-    --color-info-bg: var(--info-bg);
+  /* Semantic */
+  --color-positive: var(--positive);
+  --color-positive-bg: var(--positive-bg);
+  --color-negative: var(--negative);
+  --color-negative-bg: var(--negative-bg);
+  --color-warning: var(--warning);
+  --color-warning-bg: var(--warning-bg);
+  --color-info: var(--info);
+  --color-info-bg: var(--info-bg);
 
-    /* Border radii */
-    --radius-1: var(--r-1);
-    --radius-2: var(--r-2);
-    --radius-3: var(--r-3);
-    --radius-4: var(--r-4);
-    --radius-full: var(--r-full);
+  /* Fonts */
+  --font-display: var(--font-display);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
 
-    /* Shadows */
-    --shadow-s1: var(--shadow-1);
-    --shadow-s2: var(--shadow-2);
-    --shadow-s3: var(--shadow-3);
-    --shadow-sbr: var(--shadow-brass);
-  }
+  /* Radii */
+  --radius-r1: var(--r-1);
+  --radius-r2: var(--r-2);
+  --radius-r3: var(--r-3);
+  --radius-r4: var(--r-4);
+  --radius-full: var(--r-full);
 
+  /* Shadows */
+  --shadow-1: var(--shadow-1);
+  --shadow-2: var(--shadow-2);
+  --shadow-3: var(--shadow-3);
+  --shadow-brass: var(--shadow-brass);
+}
+
+@layer base {
   html, body {
     background: var(--ink-0);
     color: var(--fg-2);