visual upgrade

src/styles/fonts.css

@@ -0,0 +1,24 @@
+/* Optional, self-hosted Latin variable fonts. Import before styles.css. */
+@font-face {
+  font-family: "Montserrat Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("@fontsource-variable/montserrat/files/montserrat-latin-wght-normal.woff2") format("woff2-variations");
+}
+
+@font-face {
+  font-family: "Open Sans Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300 800;
+  src: url("@fontsource-variable/open-sans/files/open-sans-latin-wght-normal.woff2") format("woff2-variations");
+}
+
+@font-face {
+  font-family: "JetBrains Mono Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url("@fontsource-variable/jetbrains-mono/files/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
+}

src/styles/globals.css

@@ -1,52 +1,36 @@
-/* Import once in your app entry:  import "@jason/ui-kit/styles.css";  */
+/* Import once in your app entry: import "@jason/ui-kit/styles.css"; */
+@import "./theme.generated.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/*
- * Brand tokens as HSL channels so Tailwind's <alpha-value> works.
- * :root = dark (default brand). .light overrides for light surfaces.
- */
 @layer base {
-  :root {
-    --bg: 330 4% 13%;
-    --surface: 330 4% 16%;
-    --surface-2: 330 3% 20%;
-    --border: 330 3% 22%;
-    --text: 33 33% 94%;
-    --muted: 28 9% 63%;
-    --brand: 46 68% 59%;
-    --brand-bright: 51 91% 52%;
-    --brand-dark: 46 40% 43%;
-    --success: 146 43% 43%;
-    --warning: 46 68% 59%;
-    --danger: 17 61% 47%;
-    --info: 205 37% 54%;
-  }
-
-  .light {
-    --bg: 36 33% 97%;
-    --surface: 0 0% 100%;
-    --surface-2: 36 20% 95%;
-    --border: 33 12% 86%;
-    --text: 330 6% 15%;
-    --muted: 330 4% 40%;
-  }
-
   * { border-color: hsl(var(--border)); }
+  html {
+    color-scheme: dark;
+  }
+  html.light {
+    color-scheme: light;
+  }
   body {
     background-color: hsl(var(--bg));
     color: hsl(var(--text));
-    font-family: "Open Sans", system-ui, sans-serif;
+    font-family: "Open Sans Variable", "Open Sans", system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
-  h1, h2, h3, h4, h5 { font-family: "Montserrat", system-ui, sans-serif; }
+  h1, h2, h3, h4, h5, h6 {
+    font-family: "Montserrat Variable", "Montserrat", system-ui, sans-serif;
+    text-wrap: balance;
+  }
 
   /* Respect reduced-motion everywhere. */
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
+      animation-delay: 0s !important;
       animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
       transition-duration: 0.01ms !important;
     }
   }

src/styles/theme.generated.css

@@ -0,0 +1,42 @@
+/* Generated by scripts/generate-theme.mjs from src/lib/tokens.json. */
+:root, .dark {
+  --bg: 320 4% 13%;
+  --surface: 320 4% 16%;
+  --surface-2: 340 3% 19%;
+  --border: 330 4% 22%;
+  --text: 33 31% 94%;
+  --muted: 27 9% 63%;
+  --brand: 46 67% 59%;
+  --brand-bright: 49 92% 52%;
+  --brand-dark: 47 39% 43%;
+  --brand-foreground: 320 4% 13%;
+  --success: 147 48% 58%;
+  --success-foreground: 320 4% 13%;
+  --warning: 48 72% 63%;
+  --warning-foreground: 320 4% 13%;
+  --danger: 16 64% 57%;
+  --danger-foreground: 320 4% 13%;
+  --info: 208 54% 65%;
+  --info-foreground: 320 4% 13%;
+}
+
+.light {
+  --bg: 40 37% 97%;
+  --surface: 0 0% 100%;
+  --surface-2: 36 31% 94%;
+  --border: 32 16% 85%;
+  --text: 315 5% 15%;
+  --muted: 334 4% 39%;
+  --brand: 48 79% 26%;
+  --brand-bright: 48 85% 22%;
+  --brand-dark: 48 86% 19%;
+  --brand-foreground: 0 0% 100%;
+  --success: 148 57% 30%;
+  --success-foreground: 0 0% 100%;
+  --warning: 45 100% 24%;
+  --warning-foreground: 0 0% 100%;
+  --danger: 13 64% 37%;
+  --danger-foreground: 0 0% 100%;
+  --info: 208 48% 41%;
+  --info-foreground: 0 0% 100%;
+}