✨ feat: implement API key authentication and user session management

web/tailwind.config.ts

@@ -1,15 +1,95 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  darkMode: "class",
+  // Dark is the default; light mode activates when `.light` is NOT absent (i.e. dark when no `.light` class)
+  darkMode: ["selector", ":root:not(.light)"],
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
+        // Semantic tokens — reference CSS custom properties
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+
+        // Direct CSS var tokens (non-HSL)
+        canvas: {
+          DEFAULT: "var(--color-bg-primary)",
+          secondary: "var(--color-bg-secondary)",
+          elevated: "var(--color-bg-elevated)",
+        },
+        ink: {
+          DEFAULT: "var(--color-text-primary)",
+          secondary: "var(--color-text-secondary)",
+          muted: "var(--color-text-muted)",
+        },
+        "brand-accent": {
+          DEFAULT: "var(--color-accent)",
+          hover: "var(--color-accent-hover)",
+          active: "var(--color-accent-active)",
+          fg: "var(--color-accent-foreground)",
+        },
+        edge: {
+          DEFAULT: "var(--color-border)",
+          hover: "var(--color-border-hover)",
+        },
+        success: {
+          DEFAULT: "var(--color-success)",
+          bg: "var(--color-success-bg)",
+        },
+        warning: {
+          DEFAULT: "var(--color-warning)",
+          bg: "var(--color-warning-bg)",
+        },
+        error: {
+          DEFAULT: "var(--color-error)",
+          bg: "var(--color-error-bg)",
+        },
+        info: {
+          DEFAULT: "var(--color-info)",
+          bg: "var(--color-info-bg)",
+        },
+        "code-surface": {
+          DEFAULT: "var(--color-code-bg)",
+          text: "var(--color-code-text)",
+        },
+
+        // Brand palette
         brand: {
           50: "#f5f3ff",
           100: "#ede9fe",
@@ -23,6 +103,8 @@ const config: Config = {
           900: "#4c1d95",
           950: "#2e1065",
         },
+
+        // Surface (neutral) palette
         surface: {
           50: "#fafafa",
           100: "#f4f4f5",
@@ -38,28 +120,79 @@ const config: Config = {
           950: "#09090b",
         },
       },
+
       fontFamily: {
         sans: ["var(--font-inter)", "system-ui", "sans-serif"],
         mono: ["var(--font-jetbrains-mono)", "ui-monospace", "monospace"],
       },
-      animation: {
-        "fade-in": "fadeIn 0.2s ease-in-out",
-        "slide-up": "slideUp 0.3s ease-out",
-        "pulse-soft": "pulseSoft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
       },
+
+      transitionDuration: {
+        fast: "100ms",
+        normal: "200ms",
+        slow: "300ms",
+      },
+
+      animation: {
+        "fade-in": "fadeIn 200ms ease forwards",
+        "fade-out": "fadeOut 200ms ease forwards",
+        "slide-up": "slideUp 300ms ease forwards",
+        "slide-down": "slideDown 300ms ease forwards",
+        "slide-down-out": "slideDownOut 300ms ease forwards",
+        "scale-in": "scaleIn 200ms ease forwards",
+        "scale-out": "scaleOut 200ms ease forwards",
+        shimmer: "shimmer 2s linear infinite",
+        spin: "spin 1s linear infinite",
+        "pulse-soft": "pulseSoft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        "progress-bar": "progress linear forwards",
+      },
+
       keyframes: {
         fadeIn: {
           "0%": { opacity: "0" },
           "100%": { opacity: "1" },
         },
+        fadeOut: {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
         slideUp: {
           "0%": { transform: "translateY(8px)", opacity: "0" },
           "100%": { transform: "translateY(0)", opacity: "1" },
         },
+        slideDown: {
+          "0%": { transform: "translateY(-8px)", opacity: "0" },
+          "100%": { transform: "translateY(0)", opacity: "1" },
+        },
+        slideDownOut: {
+          "0%": { transform: "translateY(0)", opacity: "1" },
+          "100%": { transform: "translateY(8px)", opacity: "0" },
+        },
+        scaleIn: {
+          "0%": { transform: "scale(0.95)", opacity: "0" },
+          "100%": { transform: "scale(1)", opacity: "1" },
+        },
+        scaleOut: {
+          "0%": { transform: "scale(1)", opacity: "1" },
+          "100%": { transform: "scale(0.95)", opacity: "0" },
+        },
+        shimmer: {
+          "0%": { backgroundPosition: "-200% 0" },
+          "100%": { backgroundPosition: "200% 0" },
+        },
         pulseSoft: {
           "0%, 100%": { opacity: "1" },
           "50%": { opacity: "0.5" },
         },
+        progress: {
+          from: { transform: "scaleX(1)" },
+          to: { transform: "scaleX(0)" },
+        },
       },
     },
   },