visual upgrade

tailwind-preset.cjs

@@ -12,7 +12,9 @@
  * Colors are driven by CSS variables (see styles/globals.css) so light/dark and
  * per-app rebranding work without recompiling the preset.
  */
+const tokens = require("./src/lib/tokens.json");
 const v = (name) => `hsl(var(${name}) / <alpha-value>)`;
+const family = (value) => value.split(",").map((part) => part.trim().replace(/^"|"$/g, ""));
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -28,30 +30,46 @@ module.exports = {
         ring: v("--brand"),
         text: v("--text"),
         muted: v("--muted"),
-        brand: { DEFAULT: v("--brand"), bright: v("--brand-bright"), dark: v("--brand-dark") },
-        success: v("--success"),
-        warning: v("--warning"),
-        danger: v("--danger"),
-        info: v("--info"),
+        brand: {
+          DEFAULT: v("--brand"),
+          bright: v("--brand-bright"),
+          dark: v("--brand-dark"),
+          foreground: v("--brand-foreground"),
+        },
+        success: { DEFAULT: v("--success"), foreground: v("--success-foreground") },
+        warning: { DEFAULT: v("--warning"), foreground: v("--warning-foreground") },
+        danger: { DEFAULT: v("--danger"), foreground: v("--danger-foreground") },
+        info: { DEFAULT: v("--info"), foreground: v("--info-foreground") },
       },
       fontFamily: {
-        display: ['"Montserrat"', "system-ui", "sans-serif"],
-        sans: ['"Open Sans"', "system-ui", "sans-serif"],
-        mono: ['"JetBrains Mono"', "ui-monospace", "monospace"],
+        display: family(tokens.font.display),
+        sans: family(tokens.font.sans),
+        mono: family(tokens.font.mono),
+      },
+      borderRadius: {
+        sm: tokens.radius.sm,
+        DEFAULT: tokens.radius.md,
+        md: tokens.radius.md,
+        lg: tokens.radius.lg,
+        xl: tokens.radius.xl,
       },
-      borderRadius: { sm: "6px", DEFAULT: "10px", md: "10px", lg: "14px", xl: "20px" },
       boxShadow: {
-        sm: "0 1px 2px 0 rgb(20 16 18 / 0.20)",
-        DEFAULT: "0 4px 12px -2px rgb(20 16 18 / 0.28), 0 2px 4px -2px rgb(20 16 18 / 0.20)",
-        md: "0 4px 12px -2px rgb(20 16 18 / 0.28), 0 2px 4px -2px rgb(20 16 18 / 0.20)",
-        lg: "0 12px 32px -8px rgb(20 16 18 / 0.40), 0 4px 8px -4px rgb(20 16 18 / 0.24)",
-        glow: "0 0 0 1px rgb(220 187 79 / 0.20), 0 8px 28px -6px rgb(220 187 79 / 0.28)",
+        sm: tokens.shadow.sm,
+        DEFAULT: tokens.shadow.md,
+        md: tokens.shadow.md,
+        lg: tokens.shadow.lg,
+        glow: tokens.shadow.glow,
       },
       transitionTimingFunction: {
-        out: "cubic-bezier(0.22, 1, 0.36, 1)",
-        "in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
+        out: tokens.ease.out,
+        "in-out": tokens.ease.inOut,
+      },
+      transitionDuration: {
+        fast: tokens.duration.fast,
+        DEFAULT: tokens.duration.base,
+        base: tokens.duration.base,
+        slow: tokens.duration.slow,
       },
-      transitionDuration: { fast: "120ms", DEFAULT: "180ms", base: "180ms", slow: "320ms" },
       keyframes: {
         "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
         "fade-up": { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },