diff --git a/docs/tailwind-v4-migration.md b/docs/tailwind-v4-migration.md
new file mode 100644
index 00000000..2b14ea2d
--- /dev/null
+++ b/docs/tailwind-v4-migration.md
@@ -0,0 +1,633 @@
+# ResolutionFlow — Tailwind v4 Migration & Feature Guide
+**Claude Code Handoff Document · Pre-Investor Pitch Sprint**
+
+---
+
+## Purpose
+
+This document gives Claude Code everything needed to:
+1. Execute the mechanical Tailwind v3 → v4 upgrade
+2. Know which new v4 features to use going forward so the ResolutionFlow UI looks and feels premium for the investor pitch demo
+
+## Branch
+
+This migration touches nearly every file in the frontend. **Always work on a dedicated branch:**
+
+```bash
+git checkout -b feat/tailwind-v4-upgrade
+```
+
+Do not merge to `main` until all phases are complete and the full visual QA pass is done.
+
+---
+
+## Stack Context
+
+| | |
+|---|---|
+| Frontend | React 19.2 + Vite 7 + TypeScript 5.9 |
+| Current Tailwind | v3.4.19 |
+| Component Library | shadcn/ui (target: new-york style post-upgrade) |
+| Canvas Editor | React Flow (@xyflow/react) |
+| Brand Color | Cyan — `#06b6d4 → #22d3ee` (hsl 187 72% 43%) |
+| Background | `hsl(228 12% 7%)` — dark theme only, no light mode |
+| Body Font | IBM Plex Sans |
+| Heading Font | Bricolage Grotesque |
+| Label/Mono Font | JetBrains Mono |
+| Brand Gradient | `linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%)` |
+| Animation Library | tailwindcss-animate → **replace with tw-animate-css** |
+| Tailwind Plugins | None |
+
+---
+
+---
+
+# PART 1: Mechanical Migration
+
+Execute phases in order. Verify the app builds and renders correctly after each phase before proceeding.
+
+---
+
+## Phase 1 — Update Dependencies
+
+Run the official Tailwind upgrade tool from the `/frontend` directory. It handles the majority of migration automatically:
+
+```bash
+# Run from /frontend
+npx @tailwindcss/upgrade@latest
+```
+
+This tool will:
+- Update `tailwindcss` to v4
+- Install `@tailwindcss/vite` (replaces the PostCSS plugin)
+- Migrate `tailwind.config.js` → CSS `@theme` block
+- Update `@tailwind` directives to `@import`
+- Handle renamed utility classes in template files
+
+After running, verify `package.json` reflects:
+
+```json
+// devDependencies should now include:
+"tailwindcss": "^4.x.x",
+"@tailwindcss/vite": "^4.x.x"
+
+// These are no longer needed and can be removed:
+// "autoprefixer" (bundled in v4 via Lightning CSS)
+// "postcss" (unless used for something other than Tailwind)
+```
+
+---
+
+## Phase 2 — Update Vite Config
+
+Replace the PostCSS-based Tailwind setup with the first-party Vite plugin:
+
+```ts
+// vite.config.ts — BEFORE
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
+
+// vite.config.ts — AFTER
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
+```
+
+Remove `postcss.config.js` if it exists and was only used for Tailwind. Lightning CSS is now bundled inside Tailwind v4.
+
+---
+
+## Phase 3 — Migrate CSS Entry Point
+
+Update `index.css`:
+
+```css
+/* BEFORE — v3 directives */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* AFTER — v4 single import */
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* ResolutionFlow is dark-only. Replace darkMode: ["class"] from tailwind.config.js
+   with this custom variant declaration. This is the v4 equivalent. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* React Flow styles must now live in CSS, not imported in App.tsx */
+@layer base {
+  @import "@xyflow/react/dist/style.css";
+}
+```
+
+> **Important:** Remove `import '@xyflow/react/dist/style.css'` from `App.tsx` after adding it here.
+> **Important:** Remove `darkMode: ["class"]` from `tailwind.config.js` — it is now handled by `@custom-variant dark` above. Since ResolutionFlow is dark-only with no light mode toggle, verify that the `.dark` class is still present on the `<html>` element in `index.html`.
+
+---
+
+## Phase 4 — Migrate Theme Configuration
+
+The upgrade tool migrates `tailwind.config.js` automatically, but verify the ResolutionFlow design tokens are correctly expressed. The `@theme` block lives in `index.css` after the imports.
+
+### OKLCH Color Values
+
+Claude Code flagged that the cyan range benefits from OKLCH for better gradient interpolation. Use these OKLCH equivalents for brand colors inside `@theme` — they render more accurately on wide-gamut displays (MacBooks, modern monitors used in pitch settings):
+
+| Hex | OKLCH |
+|---|---|
+| `#06b6d4` (brand-from) | `oklch(72% 0.15 195)` |
+| `#22d3ee` (brand-to) | `oklch(82% 0.13 195)` |
+| `#0891b2` (brand-dark) | `oklch(62% 0.14 195)` |
+
+### Full `@theme` Block
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* ResolutionFlow Brand — Cyan system (OKLCH for wide-gamut accuracy) */
+  --color-brand-from: oklch(72% 0.15 195);   /* #06b6d4 */
+  --color-brand-to: oklch(82% 0.13 195);     /* #22d3ee */
+  --color-brand-dark: oklch(62% 0.14 195);   /* #0891b2 */
+
+  /* Dark surface palette */
+  --color-dark-DEFAULT: #101114;
+  --color-dark-card: #14161a;
+  --color-dark-surface: #14161a;
+
+  /* Text palette */
+  --color-text-primary: #f8fafc;
+  --color-text-secondary: #8891a0;
+  --color-text-muted: #5a6170;
+
+  /* Typography */
+  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
+  --font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
+  --font-label: 'JetBrains Mono', monospace;
+
+  /* Border radius */
+  --radius-lg: 0.75rem;
+  --radius-md: calc(0.75rem - 2px);
+  --radius-sm: calc(0.75rem - 4px);
+
+  /* Keyframe animations — move ALL @keyframes from index.css into @theme */
+  --animate-fade-in: fade-in 200ms ease-out;
+  --animate-fade-in-up: fade-in-up 200ms ease-out;
+  --animate-slide-in-left: slide-in-from-left 200ms ease-out;
+  --animate-slide-in-bottom: slide-in-from-bottom 200ms ease-out;
+  --animate-scale-in: scale-in 150ms ease-out;
+  --animate-breathe-glow: breatheGlow 3s ease-in-out infinite alternate;
+  --animate-bell-wobble: bellWobble 0.5s ease-in-out;
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes slide-in-from-left {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+  @keyframes slide-in-from-bottom {
+    from { opacity: 0; transform: translateY(16px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+  @keyframes breatheGlow {
+    from { box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px oklch(72% 0.15 195 / 0.04); }
+    to   { box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 30px oklch(72% 0.15 195 / 0.12); }
+  }
+  @keyframes bellWobble {
+    0%   { transform: rotate(0deg); }
+    20%  { transform: rotate(8deg); }
+    40%  { transform: rotate(-6deg); }
+    60%  { transform: rotate(4deg); }
+    80%  { transform: rotate(-2deg); }
+    100% { transform: rotate(0deg); }
+  }
+}
+```
+
+> **Important:** Remove the loose `@keyframes` blocks from `index.css` after moving them into `@theme`. They should not exist in both places.
+
+### shadcn/ui CSS Variable Bridge
+
+Keep the existing `:root` block as-is — shadcn still uses HSL format for its variables:
+
+```css
+/* shadcn/ui CSS variable bridge — keep as-is from existing index.css */
+@layer base {
+  :root {
+    --background: 228 12% 7%;
+    --foreground: 210 40% 98%;
+    --card: 220 10% 10%;
+    --card-foreground: 210 40% 98%;
+    --popover: 220 10% 10%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 187 72% 43%;
+    --primary-foreground: 228 12% 7%;
+    --secondary: 220 8% 14%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 220 8% 14%;
+    --muted-foreground: 215 10% 58%;
+    --accent: 220 8% 14%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 350 81% 55%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 220 8% 14%;
+    --input: 220 8% 14%;
+    --ring: 187 72% 43%;
+    --radius: 0.75rem;
+    /* ... rest of existing tokens ... */
+  }
+}
+
+---
+
+## Phase 5 — Replace Animation Library
+
+```bash
+# Remove old plugin
+npm uninstall tailwindcss-animate
+
+# Install replacement
+npm install -D tw-animate-css
+```
+
+Remove any `@plugin 'tailwindcss-animate'` references from CSS files. The `@import "tw-animate-css"` added in Phase 3 replaces it.
+
+---
+
+## Phase 7 — Consolidate Hardcoded Inline Colors
+
+Claude Code identified **128 instances of `style={{}}` inline color values across 44 files**, including atmosphere orbs in `AppLayout.tsx` using hardcoded `rgba(6,182,212,...)`. Now that brand colors are proper CSS variables in `@theme`, replace all hardcoded cyan/brand references with variables.
+
+**Search and replace targets:**
+
+```ts
+// FIND these hardcoded patterns:
+rgba(6, 182, 212, ...)    // brand-from with opacity
+rgba(34, 211, 238, ...)   // brand-to with opacity
+#06b6d4                   // brand-from hex
+#22d3ee                   // brand-to hex
+#0891b2                   // brand-dark hex
+
+// REPLACE with CSS variable equivalents:
+oklch(72% 0.15 195 / 0.XX)   // brand-from with opacity (XX = your alpha)
+oklch(82% 0.13 195 / 0.XX)   // brand-to with opacity
+var(--color-brand-from)       // brand-from solid
+var(--color-brand-to)         // brand-to solid
+var(--color-brand-dark)       // brand-dark solid
+```
+
+**Specifically in `AppLayout.tsx`** — atmosphere orbs should become:
+
+```tsx
+// BEFORE
+style={{ background: 'rgba(6, 182, 212, 0.08)' }}
+
+// AFTER — references the theme token, respects any future brand color changes
+style={{ background: 'oklch(72% 0.15 195 / 0.08)' }}
+
+// Or better yet, move to a CSS utility class entirely:
+// .atmosphere-orb { background: oklch(72% 0.15 195 / 0.08); }
+```
+
+> This is the right time to do this cleanup — the theme is already being touched, and it means future brand color changes only require updating `@theme` instead of hunting through 44 files.
+
+---
+
+## Phase 8 — Reinstall shadcn/ui Components
+
+shadcn/ui components have been updated for Tailwind v4 and React 19. Commit any custom component modifications first, then reinstall to get refreshed versions.
+
+```bash
+# Re-initialize with v4 defaults
+npx shadcn@latest init
+
+# When prompted:
+#   Style: new-york        (more refined than 'default')
+#   Base color: cyan       (matches ResolutionFlow brand)
+
+# Reinstall actively used components:
+npx shadcn@latest add button card dialog dropdown-menu
+npx shadcn@latest add badge input label select textarea
+npx shadcn@latest add table tabs tooltip separator
+npx shadcn@latest add sheet command popover
+```
+
+**What's new in shadcn v4 components:**
+- `forwardRef` removed from all components (React 19 handles ref natively)
+- `data-slot` attributes added for easier CSS targeting
+- HSL colors converted to OKLCH for wider color gamut
+- Dark mode colors revisited for better accessibility
+- `tailwindcss-animate` deprecated in favor of `tw-animate-css`
+
+---
+
+## Phase 9 — Visual QA Checklist
+
+Work through the app after Phases 1–6. These are the most likely regression areas:
+
+- [ ] **Borders** — default border color changed from `gray-200` to `currentColor`. Check all card, table, and input borders against the `hsl(var(--border))` token.
+- [ ] **Focus rings** — default ring changed from `3px blue` to `1px currentColor`. Verify form fields and button focus states look intentional.
+- [ ] **Placeholder text** — changed from `gray-400` to `currentColor` at 50% opacity. Check all inputs.
+- [ ] **Button cursors** — now `cursor:default` (browser standard). Add `cursor-pointer` explicitly where desired.
+- [ ] **React Flow canvas** — verify nodes, handles, edges, and controls render correctly with CSS import moved to `@layer base`.
+- [ ] **Animations** — check dialog open/close, sheet slide, dropdown appear animations after the animation library swap.
+- [ ] **Keyframe animations** — verify `breatheGlow` on stat cards, `bellWobble` on notification bell, and all `fade-in-*` utilities still work after moving keyframes into `@theme`.
+- [ ] **Cyan brand gradient** — verify `bg-gradient-brand` still renders correctly. Check it looks at least as good (ideally better) with OKLCH values.
+- [ ] **Atmosphere orbs** — verify `AppLayout.tsx` orbs render correctly after inline style replacement with OKLCH variables.
+- [ ] **Glass morphism** — verify `.glass-card` and `.glass-card-static` backdrop blur still applies on all surfaces.
+- [ ] **JetBrains Mono** — verify label/code elements still use mono font correctly.
+- [ ] **Sonner toasts** — verify custom toast styling (card bg, border, icon colors) still applies.
+- [ ] **Dark variant** — verify `.dark` class on `<html>` is present and the `@custom-variant dark` replacement behaves identically to the old `darkMode: ["class"]` config.
+
+---
+
+## Commit Strategy
+
+```bash
+git checkout -b feat/tailwind-v4-upgrade
+
+git commit -m "chore: upgrade Tailwind v3 → v4, update Vite plugin"
+git commit -m "chore: migrate CSS entry point — @import, @custom-variant dark"
+git commit -m "chore: migrate theme to @theme block — OKLCH colors, keyframes"
+git commit -m "chore: swap tailwindcss-animate for tw-animate-css"
+git commit -m "chore: consolidate 128 hardcoded inline colors to CSS variables"
+git commit -m "chore: reinstall shadcn/ui components for v4 (new-york style, cyan)"
+git commit -m "fix: visual QA pass — borders, rings, placeholders, glass, animations"
+git commit -m "feat: apply v4 feature enhancements across components"
+
+# When complete and QA passes:
+git checkout main
+git merge feat/tailwind-v4-upgrade
+```
+
+---
+
+---
+
+# PART 2: Tailwind v4 Feature Guide
+
+**These are new capabilities available after the upgrade. Apply them proactively when building or modifying components — do not default to v3 patterns when a v4 equivalent is listed here.**
+
+---
+
+## Feature 1 — Auto-Resizing Textareas (`field-sizing-content`)
+
+Apply to every multi-line text input in the app. Engineers typing session notes and documentation should never fight a fixed-height box.
+
+**Where to apply:** Session runner documentation field · step notes input · FlowPilot prompt input · any multi-line input in the flow editor
+
+```tsx
+// BEFORE — v3, fixed height or JS resize logic
+<textarea
+  className="w-full resize-none h-32 rounded-md border p-3"
+/>
+
+// AFTER — v4, grows automatically as the engineer types
+<textarea
+  className="w-full field-sizing-content min-h-[80px] max-h-[400px]
+             rounded-md border border-input bg-background p-3
+             text-sm focus-visible:ring-2 focus-visible:ring-ring"
+/>
+```
+
+---
+
+## Feature 2 — CSS-Native Enter Animations (`@starting-style`)
+
+Use for elements that appear in the session runner — step transitions, panel reveals, status banners. No JavaScript animation library needed for these patterns.
+
+**Where to apply:** Step cards appearing in session runner · status/alert banners · completion state reveals · FlowPilot suggestion panels
+
+```css
+/* index.css — define the utility */
+@utility fade-in-up {
+  transition: opacity 300ms ease, transform 300ms ease;
+  opacity: 1;
+  transform: translateY(0);
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@utility scale-in {
+  transition: opacity 150ms ease, transform 150ms ease;
+  opacity: 1;
+  transform: scale(1);
+
+  @starting-style {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+```
+
+```tsx
+// Component usage — animates in on mount with no JS
+<div className="fade-in-up">
+  <StepCard step={currentStep} />
+</div>
+
+<div className="scale-in">
+  <FlowPilotPanel />
+</div>
+```
+
+---
+
+## Feature 3 — Container Queries (`@container`)
+
+Use for components that need to adapt based on where they are rendered — not the viewport. Critical for ResolutionFlow where the same component may appear in a sidebar, modal, or full-width panel.
+
+**Where to apply:** StepCard (sidebar vs full-width) · FlowPilot panel (collapsed vs expanded) · documentation preview panel · step library items
+
+```tsx
+// Wrap the parent with @container
+<div className="@container w-full">
+  <StepCard step={step} />
+</div>
+
+// Inside StepCard — responds to its container, not the viewport
+function StepCard({ step }: { step: Step }) {
+  return (
+    <div className="
+      flex flex-col gap-2
+      @sm:flex-row @sm:items-center
+      @lg:gap-4
+      p-4 rounded-lg border border-border bg-card
+    ">
+      <StepIcon type={step.type} />
+      <StepContent step={step} />
+      <div className="@sm:ml-auto">
+        <StepActions step={step} />
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## Feature 4 — Enhanced Gradient APIs
+
+The cyan brand gradient is ResolutionFlow's primary visual identity. v4 unlocks radial gradients, angle control, and OKLCH interpolation for richer rendering.
+
+**Where to apply:** Hero/header sections · card hover states · active step indicators · FlowPilot branding elements · progress indicators
+
+```tsx
+// Linear — explicit angle control (v4)
+<div className="bg-linear-135 from-[#06b6d4] to-[#22d3ee]">
+
+// Radial — great for glow effects on active/highlighted elements (v4)
+<div className="bg-radial from-[#06b6d4]/20 to-transparent">
+
+// Radial with position — spotlight effect (v4)
+<div className="bg-radial-[at_30%_50%] from-[#06b6d4]/15 via-[#22d3ee]/8 to-transparent">
+
+// OKLCH interpolation — richer, more accurate gradient transition (v4)
+<div className="bg-linear-to-r from-[#06b6d4] to-[#22d3ee] [color-interpolation-method:oklch]">
+
+// Combine with glass card for the premium demo look
+<div className="glass-card-static bg-radial-[at_top_left] from-[#06b6d4]/10 to-transparent">
+```
+
+---
+
+## Feature 5 — Dynamic Utility Values
+
+In v3, non-standard values required bracket notation. In v4 the scale is continuous — use values directly.
+
+```tsx
+// v3 — arbitrary brackets for anything off-scale
+<div className="w-[18px] h-[18px] z-[60] grid-cols-[repeat(7,1fr)]">
+
+// v4 — direct values work without brackets
+<div className="w-4.5 h-4.5 z-60 grid-cols-7">
+
+// Grid columns support any number directly
+<div className="grid grid-cols-7">   // 7-column grid, no config needed
+<div className="grid grid-cols-15">  // 15-column, works out of the box
+```
+
+---
+
+## Feature 6 — `not-*` Variant
+
+Style elements only when they don't match a condition. Useful in the session runner step list.
+
+```tsx
+// Bottom border on all steps except the last
+<div className="not-last:border-b border-border pb-4 mb-4">
+  <StepCard />
+</div>
+
+// Dim inactive steps
+<div className="not-[.active]:opacity-60 not-[.active]:hover:opacity-80 transition-opacity">
+  <StepCard />
+</div>
+```
+
+---
+
+## Feature 7 — Theme Tokens as Native CSS Variables
+
+After the v4 migration, all `@theme` tokens are exposed as native CSS custom properties. This means you can access ResolutionFlow design tokens in TypeScript — useful for React Flow node styling and Recharts chart colors.
+
+```ts
+// Access brand colors in JS/TS — no more hardcoded hex values
+const style = getComputedStyle(document.documentElement)
+const brandColor = style.getPropertyValue('--color-brand-from').trim() // '#06b6d4'
+
+// Use directly in React Flow node styles
+const nodeStyles = {
+  background: 'var(--color-dark-card)',
+  border: '1px solid var(--color-brand-from)',
+  boxShadow: '0 0 12px rgba(6, 182, 212, 0.15)',
+}
+
+// Use in Recharts chartConfig — no more hsl() wrapper needed
+const chartConfig = {
+  sessions: {
+    label: 'Sessions',
+    color: 'var(--color-brand-from)',
+  },
+  resolved: {
+    label: 'Resolved',
+    color: 'var(--color-brand-to)',
+  },
+}
+```
+
+---
+
+## Feature 8 — Color Scheme Utilities
+
+Control native browser UI element theming (scrollbars, form controls) to match the dark theme — previously required custom CSS.
+
+```tsx
+// Apply to the root html element in index.html or App.tsx
+<html className="scheme-dark">
+
+// This makes native browser scrollbars, select dropdowns,
+// date inputs, and form controls render in dark mode automatically.
+// ResolutionFlow is dark-only so this should be applied globally.
+```
+
+---
+
+## Feature 9 — `inert` Utility
+
+Disable interaction on an entire subtree without JavaScript. Useful for locking the flow editor or step list during FlowPilot AI generation.
+
+```tsx
+// Disable the step list while FlowPilot is generating
+<div className={isGenerating ? 'inert' : ''}>
+  <StepList steps={steps} />
+</div>
+
+// The inert attribute disables all pointer events, focus, and
+// accessibility interaction on the entire subtree at once.
+```
+
+---
+
+## General Rules for v4 Going Forward
+
+1. **Use `field-sizing-content` on every `<textarea>`** — no exceptions
+2. **Use `@starting-style` animations** instead of adding/removing CSS classes for enter effects
+3. **Wrap repeated components in `@container`** when they appear in variable-width contexts
+4. **Use `not-last:` instead of custom `:not(:last-child)` selectors** in lists
+5. **Reference `var(--color-brand-from)` and `var(--color-brand-to)`** in JS instead of hardcoded `#06b6d4` or `rgba(6,182,212,...)`
+6. **Use OKLCH for any new color values** — `oklch(72% 0.15 195)` not `#06b6d4`
+7. **All new keyframe animations go inside `@theme`** — not loose in `index.css`
+8. **Do not use `tailwindcss-animate`** — replaced by `tw-animate-css`
+9. **Do not add `@tailwind base/components/utilities` directives** — replaced by `@import "tailwindcss"`
+10. **Do not add `darkMode: ["class"]` to any config** — replaced by `@custom-variant dark`
+11. **Prefer `bg-linear-135` syntax** over `bg-gradient-to-r` for the brand gradient — more explicit and v4-native
+
+---
+
+*ResolutionFlow · Tailwind v4 Migration Doc · Pre-Investor Pitch Sprint*
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 27d01c01..7c76c8b8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,7 @@
         "@sentry/react": "^10.42.0",
         "@sentry/vite-plugin": "^5.1.1",
         "@stripe/stripe-js": "^8.7.0",
+        "@tailwindcss/vite": "^4.2.1",
         "@xyflow/react": "^12.10.0",
         "axios": "^1.13.4",
         "class-variance-authority": "^0.7.1",
@@ -45,14 +46,13 @@
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
-        "autoprefixer": "^10.4.23",
         "eslint": "^9.39.1",
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "globals": "^16.5.0",
         "jsdom": "^28.0.0",
         "postcss": "^8.5.6",
-        "tailwindcss": "^3.4.19",
+        "tailwindcss": "^4.2.1",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.46.4",
         "vite": "^7.2.4",
@@ -74,19 +74,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.2.tgz",
@@ -631,7 +618,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -648,7 +634,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -665,7 +650,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -682,7 +666,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -699,7 +682,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -716,7 +698,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -733,7 +714,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -750,7 +730,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -767,7 +746,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -784,7 +762,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -801,7 +778,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -818,7 +794,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -835,7 +810,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -852,7 +826,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -869,7 +842,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -886,7 +858,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -903,7 +874,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -920,7 +890,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -937,7 +906,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -954,7 +922,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -971,7 +938,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -988,7 +954,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1005,7 +970,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1022,7 +986,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1039,7 +1002,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1056,7 +1018,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1361,44 +1322,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
@@ -2115,6 +2038,263 @@
         "node": ">=12.16"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.1.tgz",
+      "integrity": "sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.31.1",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.1.tgz",
+      "integrity": "sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.1",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.1",
+        "@tailwindcss/oxide-darwin-x64": "4.2.1",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.1",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.1",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.1",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.1",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.1",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.1",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.1",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.1",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.1.tgz",
+      "integrity": "sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.1.tgz",
+      "integrity": "sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.1.tgz",
+      "integrity": "sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.1.tgz",
+      "integrity": "sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.1.tgz",
+      "integrity": "sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.1.tgz",
+      "integrity": "sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.1.tgz",
+      "integrity": "sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.1.tgz",
+      "integrity": "sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.1.tgz",
+      "integrity": "sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.1.tgz",
+      "integrity": "sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.1.tgz",
+      "integrity": "sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.1.tgz",
+      "integrity": "sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.1.tgz",
+      "integrity": "sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.2.1",
+        "@tailwindcss/oxide": "4.2.1",
+        "tailwindcss": "4.2.1"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -2432,7 +2612,7 @@
       "version": "24.10.9",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.9.tgz",
       "integrity": "sha512-ne4A0IpG3+2ETuREInjPNhUGis1SFjv1d5asp8MzEAGtOZeTeHVDOYqOgqfhvseqg/iXty2hjBf1zAOb7RNiNw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.16.0"
@@ -3019,47 +3199,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/anymatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3093,43 +3232,6 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.23",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
-      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.28.1",
-        "caniuse-lite": "^1.0.30001760",
-        "fraction.js": "^5.3.4",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/axios": {
       "version": "1.13.5",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
@@ -3177,19 +3279,6 @@
         "require-from-string": "^2.0.2"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -3201,19 +3290,6 @@
         "concat-map": "0.0.1"
       }
     },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/browserslist": {
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
@@ -3280,16 +3356,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001766",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
@@ -3387,44 +3453,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -3509,16 +3537,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3581,19 +3599,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/cssstyle": {
       "version": "5.3.7",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.7.tgz",
@@ -3921,6 +3926,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -3934,20 +3948,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -4004,6 +4004,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.0.tgz",
+      "integrity": "sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -4083,7 +4096,6 @@
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
       "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -4376,36 +4388,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -4420,21 +4402,10 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -4461,19 +4432,6 @@
         "node": ">=16.0.0"
       }
     },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -4547,20 +4505,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
-      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4731,6 +4675,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -5018,35 +4968,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-decimal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
@@ -5116,16 +5037,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -5164,6 +5075,15 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5292,25 +5212,254 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
-      "license": "MIT",
+    "node_modules/lightningcss": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
+      "integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.31.1",
+        "lightningcss-darwin-arm64": "1.31.1",
+        "lightningcss-darwin-x64": "1.31.1",
+        "lightningcss-freebsd-x64": "1.31.1",
+        "lightningcss-linux-arm-gnueabihf": "1.31.1",
+        "lightningcss-linux-arm64-gnu": "1.31.1",
+        "lightningcss-linux-arm64-musl": "1.31.1",
+        "lightningcss-linux-x64-gnu": "1.31.1",
+        "lightningcss-linux-x64-musl": "1.31.1",
+        "lightningcss-win32-arm64-msvc": "1.31.1",
+        "lightningcss-win32-x64-msvc": "1.31.1"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz",
+      "integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz",
+      "integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz",
+      "integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz",
+      "integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz",
+      "integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz",
+      "integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz",
+      "integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
+      "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz",
+      "integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz",
+      "integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz",
+      "integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -5575,16 +5724,6 @@
       "dev": true,
       "license": "CC0-1.0"
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -6027,33 +6166,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -6123,23 +6235,10 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6209,36 +6308,6 @@
       "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
       "license": "MIT"
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/obug": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
@@ -6386,13 +6455,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/path-scurry": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
@@ -6435,7 +6497,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -6444,31 +6505,10 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -6493,140 +6533,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
-      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
-      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.1.1"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "jiti": ">=1.21.0",
-        "postcss": ">=8.0.9",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "jiti": {
-          "optional": true
-        },
-        "postcss": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6702,27 +6608,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/react": {
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
@@ -6890,42 +6775,6 @@
         "react-dom": ">=18"
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/readdirp/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/recharts": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
@@ -7054,27 +6903,6 @@
       "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
       "license": "MIT"
     },
-    "node_modules/resolve": {
-      "version": "1.22.11",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
-      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -7085,17 +6913,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/rollup": {
       "version": "4.57.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.0.tgz",
@@ -7171,30 +6988,6 @@
         }
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -7289,7 +7082,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -7411,29 +7203,6 @@
         "inline-style-parser": "0.2.7"
       }
     },
-    "node_modules/sucrase": {
-      "version": "3.35.1",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
-      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "tinyglobby": "^0.2.11",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7447,19 +7216,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -7478,74 +7234,22 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
-      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
-      "dev": true,
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
+      "integrity": "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.7",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
       "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
+        "node": ">=6"
       },
-      "engines": {
-        "node": ">=0.8"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/tiny-invariant": {
@@ -7575,7 +7279,6 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -7628,19 +7331,6 @@
         "node": ">=14.14"
       }
     },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/tough-cookie": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.0.tgz",
@@ -7700,13 +7390,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -7778,7 +7461,7 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unified": {
@@ -7917,13 +7600,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
@@ -7978,7 +7654,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.27.0",
diff --git a/frontend/package.json b/frontend/package.json
index 8016045a..6fe20a73 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "@sentry/react": "^10.42.0",
     "@sentry/vite-plugin": "^5.1.1",
     "@stripe/stripe-js": "^8.7.0",
+    "@tailwindcss/vite": "^4.2.1",
     "@xyflow/react": "^12.10.0",
     "axios": "^1.13.4",
     "class-variance-authority": "^0.7.1",
@@ -50,14 +51,13 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
-    "autoprefixer": "^10.4.23",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "jsdom": "^28.0.0",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.2.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
deleted file mode 100644
index 2e7af2b7..00000000
--- a/frontend/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/frontend/src/components/account/AccountLayout.tsx b/frontend/src/components/account/AccountLayout.tsx
index 6e8013c6..ec3c18f9 100644
--- a/frontend/src/components/account/AccountLayout.tsx
+++ b/frontend/src/components/account/AccountLayout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom'
 
 export function AccountLayout() {
   return (
-    <div className="container mx-auto max-w-screen-lg px-4 py-6">
+    <div className="container mx-auto max-w-(--breakpoint-lg) px-4 py-6">
       <Outlet />
     </div>
   )
diff --git a/frontend/src/components/account/DeleteAccountModal.tsx b/frontend/src/components/account/DeleteAccountModal.tsx
index 8e102024..97e93774 100644
--- a/frontend/src/components/account/DeleteAccountModal.tsx
+++ b/frontend/src/components/account/DeleteAccountModal.tsx
@@ -56,7 +56,7 @@ export function DeleteAccountModal({ onClose }: Props) {
               required
               className={cn(
                 'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
-                'text-foreground focus:border-primary focus:outline-none'
+                'text-foreground focus:border-primary focus:outline-hidden'
               )}
             />
           </div>
@@ -69,7 +69,7 @@ export function DeleteAccountModal({ onClose }: Props) {
               onClick={onClose}
               className={cn(
                 'rounded-[10px] px-4 py-2 text-sm font-medium',
-                'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground'
+                'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground'
               )}
             >
               Cancel
diff --git a/frontend/src/components/account/LeaveAccountModal.tsx b/frontend/src/components/account/LeaveAccountModal.tsx
index 500d314d..d993b477 100644
--- a/frontend/src/components/account/LeaveAccountModal.tsx
+++ b/frontend/src/components/account/LeaveAccountModal.tsx
@@ -45,7 +45,7 @@ export function LeaveAccountModal({ accountName, onClose }: Props) {
             onClick={onClose}
             className={cn(
               'rounded-[10px] px-4 py-2 text-sm font-medium',
-              'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground'
+              'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground'
             )}
           >
             Cancel
diff --git a/frontend/src/components/account/TransferOwnershipModal.tsx b/frontend/src/components/account/TransferOwnershipModal.tsx
index 00e414f8..a7626c90 100644
--- a/frontend/src/components/account/TransferOwnershipModal.tsx
+++ b/frontend/src/components/account/TransferOwnershipModal.tsx
@@ -60,7 +60,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 onChange={(e) => setTargetUserId(e.target.value)}
                 className={cn(
                   'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
-                  'text-foreground focus:border-primary focus:outline-none'
+                  'text-foreground focus:border-primary focus:outline-hidden'
                 )}
               >
                 {nonOwnerMembers.map((m) => (
@@ -77,7 +77,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 required
                 className={cn(
                   'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
-                  'text-foreground focus:border-primary focus:outline-none'
+                  'text-foreground focus:border-primary focus:outline-hidden'
                 )}
               />
             </div>
@@ -90,7 +90,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 onClick={onClose}
                 className={cn(
                   'rounded-[10px] px-4 py-2 text-sm font-medium',
-                  'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground'
+                  'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground'
                 )}
               >
                 Cancel
@@ -100,7 +100,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 disabled={isSubmitting || !password}
                 className={cn(
                   'rounded-[10px] px-4 py-2 text-sm font-semibold',
-                  'bg-amber-500 text-[#101114] hover:bg-amber-400',
+                  'bg-amber-500 text-brand-dark hover:bg-amber-400',
                   'disabled:opacity-50'
                 )}
               >
diff --git a/frontend/src/components/admin/AdminLayout.tsx b/frontend/src/components/admin/AdminLayout.tsx
index c697fe50..7ad9d36c 100644
--- a/frontend/src/components/admin/AdminLayout.tsx
+++ b/frontend/src/components/admin/AdminLayout.tsx
@@ -36,7 +36,7 @@ export function AdminLayout() {
   return (
     <div className="flex h-full">
       {/* Desktop sidebar */}
-      <div className="hidden w-60 flex-shrink-0 border-r border-border bg-card md:block">
+      <div className="hidden w-60 shrink-0 border-r border-border bg-card md:block">
         <AdminSidebar />
       </div>
 
@@ -44,7 +44,7 @@ export function AdminLayout() {
       {mobileOpen && (
         <div className="fixed inset-0 z-40 md:hidden">
           <div
-            className="absolute inset-0 bg-card/80 backdrop-blur-sm"
+            className="absolute inset-0 bg-card/80 backdrop-blur-xs"
             onClick={() => setMobileOpen(false)}
           />
           <div className="absolute inset-y-0 left-0 w-60 border-r border-border bg-card shadow-xl">
@@ -63,7 +63,7 @@ export function AdminLayout() {
 
       {/* Content */}
       <div className="flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-screen-2xl p-6">
+        <div className="mx-auto max-w-(--breakpoint-2xl) p-6">
           {/* Mobile menu button */}
           <button
             onClick={() => setMobileOpen(true)}
diff --git a/frontend/src/components/admin/CreateCategoryModal.tsx b/frontend/src/components/admin/CreateCategoryModal.tsx
index 991d7882..adda04b5 100644
--- a/frontend/src/components/admin/CreateCategoryModal.tsx
+++ b/frontend/src/components/admin/CreateCategoryModal.tsx
@@ -58,7 +58,7 @@ export function CreateCategoryModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
       <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
@@ -98,7 +98,7 @@ export function CreateCategoryModal({
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                 'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -122,7 +122,7 @@ export function CreateCategoryModal({
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                 'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
diff --git a/frontend/src/components/admin/EditCategoryModal.tsx b/frontend/src/components/admin/EditCategoryModal.tsx
index 83f002ef..9af88445 100644
--- a/frontend/src/components/admin/EditCategoryModal.tsx
+++ b/frontend/src/components/admin/EditCategoryModal.tsx
@@ -67,7 +67,7 @@ export function EditCategoryModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
       <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
@@ -107,7 +107,7 @@ export function EditCategoryModal({
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                 'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -131,7 +131,7 @@ export function EditCategoryModal({
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                 'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
diff --git a/frontend/src/components/admin/SearchInput.tsx b/frontend/src/components/admin/SearchInput.tsx
index f6b09cca..662ccea0 100644
--- a/frontend/src/components/admin/SearchInput.tsx
+++ b/frontend/src/components/admin/SearchInput.tsx
@@ -48,7 +48,7 @@ export function SearchInput({ value = '', onSearch, placeholder = 'Search...', c
         placeholder={placeholder}
         className={cn(
           'h-9 w-full rounded-md border border-border bg-card pl-9 pr-8 text-sm text-foreground',
-          'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+          'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
         )}
       />
       {localValue && (
diff --git a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
index 64afac14..19923775 100644
--- a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
+++ b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
@@ -77,7 +77,7 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
         <select
           value={period}
           onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
-          className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-ring"
         >
           {PERIOD_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>
@@ -113,31 +113,31 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
             <AreaChart data={time_series}>
               <CartesianGrid
                 strokeDasharray="3 3"
-                stroke="hsl(var(--border))"
+                stroke="var(--color-border)"
                 vertical={false}
               />
               <XAxis
                 dataKey="date"
-                tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
+                tick={{ fill: 'var(--color-muted-foreground)', fontSize: 11 }}
                 tickLine={false}
-                axisLine={{ stroke: 'hsl(var(--border))' }}
+                axisLine={{ stroke: 'var(--color-border)' }}
                 tickFormatter={(value) => {
                   const d = new Date(String(value))
                   return `${d.getMonth() + 1}/${d.getDate()}`
                 }}
               />
               <YAxis
-                tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
+                tick={{ fill: 'var(--color-muted-foreground)', fontSize: 11 }}
                 tickLine={false}
                 axisLine={false}
                 allowDecimals={false}
               />
               <Tooltip
                 contentStyle={{
-                  backgroundColor: 'hsl(var(--card))',
-                  border: '1px solid hsl(var(--border))',
+                  backgroundColor: 'var(--color-card)',
+                  border: '1px solid var(--color-border)',
                   borderRadius: '8px',
-                  color: 'hsl(var(--foreground))',
+                  color: 'var(--color-foreground)',
                   fontSize: '13px',
                 }}
                 labelFormatter={(value) => {
diff --git a/frontend/src/components/assistant/ChatMessage.tsx b/frontend/src/components/assistant/ChatMessage.tsx
index 21f04e48..ce8f1ca9 100644
--- a/frontend/src/components/assistant/ChatMessage.tsx
+++ b/frontend/src/components/assistant/ChatMessage.tsx
@@ -29,7 +29,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
           className={`rounded-2xl px-4 py-3 text-[0.875rem] leading-relaxed ${
             role === 'user'
               ? 'bg-primary/15 text-foreground'
-              : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-[rgba(255,255,255,0.06)]'
+              : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-brand-border'
           }`}
         >
           <MarkdownContent content={content} className="text-[0.875rem] leading-relaxed" />
@@ -38,7 +38,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
         {/* Suggested flows (assistant only) */}
         {role === 'assistant' && suggestedFlows && suggestedFlows.length > 0 && (
           <div className="space-y-1.5">
-            <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
               Related Flows
             </span>
             {suggestedFlows.map(flow => (
diff --git a/frontend/src/components/assistant/ChatSidebar.tsx b/frontend/src/components/assistant/ChatSidebar.tsx
index 5f922dd9..49aa24b8 100644
--- a/frontend/src/components/assistant/ChatSidebar.tsx
+++ b/frontend/src/components/assistant/ChatSidebar.tsx
@@ -31,7 +31,7 @@ export function ChatSidebar({
       <div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <button
           onClick={onNewChat}
-          className="w-full flex items-center justify-center gap-2 bg-gradient-brand text-[#101114] font-semibold text-sm rounded-[10px] px-4 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all"
+          className="w-full flex items-center justify-center gap-2 bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-4 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all"
         >
           <Plus size={16} />
           New Chat
@@ -42,7 +42,7 @@ export function ChatSidebar({
       <div className="flex-1 overflow-y-auto py-2">
         {pinnedChats.length > 0 && (
           <div className="px-3 mb-1">
-            <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
               Pinned
             </span>
           </div>
diff --git a/frontend/src/components/assistant/ConcludeSessionModal.tsx b/frontend/src/components/assistant/ConcludeSessionModal.tsx
index 54669c96..b94d611c 100644
--- a/frontend/src/components/assistant/ConcludeSessionModal.tsx
+++ b/frontend/src/components/assistant/ConcludeSessionModal.tsx
@@ -136,7 +136,7 @@ export function ConcludeSessionModal({
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/60 backdrop-blur-xs"
         onClick={onClose}
       />
 
@@ -169,7 +169,7 @@ export function ConcludeSessionModal({
           </div>
           <button
             onClick={onClose}
-            className="p-2 rounded-lg hover:bg-[rgba(255,255,255,0.06)] text-muted-foreground hover:text-foreground transition-colors"
+            className="p-2 rounded-lg hover:bg-brand-border text-muted-foreground hover:text-foreground transition-colors"
           >
             <X size={18} />
           </button>
@@ -188,7 +188,7 @@ export function ConcludeSessionModal({
                     'w-8 h-px',
                     step === s || (i === 1 && step === 'summary') || (i === 2 && step === 'summary')
                       ? 'bg-primary/40'
-                      : 'bg-[rgba(255,255,255,0.06)]'
+                      : 'bg-brand-border'
                   )}
                 />
               )}
@@ -196,10 +196,10 @@ export function ConcludeSessionModal({
                 className={cn(
                   'w-6 h-6 rounded-full flex items-center justify-center text-[0.6875rem] font-label font-medium transition-colors',
                   step === s
-                    ? 'bg-gradient-brand text-[#101114]'
+                    ? 'bg-gradient-brand text-brand-dark'
                     : (i < ['select-outcome', 'add-notes', 'summary'].indexOf(step))
                     ? 'bg-primary/20 text-primary'
-                    : 'bg-[rgba(255,255,255,0.06)] text-muted-foreground'
+                    : 'bg-brand-border text-muted-foreground'
                 )}
               >
                 {i + 1}
@@ -233,7 +233,7 @@ export function ConcludeSessionModal({
                     className={cn(
                       'w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left',
                       'hover:scale-[1.01] active:scale-[0.99]',
-                      'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.06)]',
+                      'bg-[rgba(255,255,255,0.02)] border-brand-border',
                       'hover:border-[rgba(255,255,255,0.12)] hover:bg-[rgba(255,255,255,0.04)]'
                     )}
                   >
@@ -268,7 +268,7 @@ export function ConcludeSessionModal({
               </div>
 
               <div>
-                <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground block mb-2">
+                <label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-2">
                   Additional Notes (optional)
                 </label>
                 <textarea
@@ -282,7 +282,7 @@ export function ConcludeSessionModal({
                       : 'What still needs to be done, where you left off...'
                   }
                   rows={4}
-                  className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+                  className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
                   style={{ borderColor: 'var(--glass-border)' }}
                 />
               </div>
@@ -312,7 +312,7 @@ export function ConcludeSessionModal({
                 style={{ borderColor: 'var(--glass-border)' }}
               >
                 <div className="flex items-center justify-between mb-3">
-                  <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground flex items-center gap-1.5">
+                  <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground flex items-center gap-1.5">
                     <Sparkles size={10} className="text-primary" />
                     Generated Ticket Notes
                   </span>
@@ -335,7 +335,7 @@ export function ConcludeSessionModal({
               <div />
               <button
                 onClick={onClose}
-                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] transition-all"
+                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-brand-border hover:border-[rgba(255,255,255,0.12)] transition-all"
               >
                 Cancel
               </button>
@@ -346,14 +346,14 @@ export function ConcludeSessionModal({
             <>
               <button
                 onClick={() => setStep('select-outcome')}
-                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] transition-all"
+                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-brand-border hover:border-[rgba(255,255,255,0.12)] transition-all"
               >
                 Back
               </button>
               <button
                 onClick={handleGenerate}
                 disabled={generating}
-                className="flex items-center gap-2 bg-gradient-brand text-[#101114] font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-50"
+                className="flex items-center gap-2 bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-50"
               >
                 {generating ? (
                   <>
@@ -390,7 +390,7 @@ export function ConcludeSessionModal({
                     'flex items-center gap-2 px-4 py-2.5 rounded-[10px] text-sm font-semibold transition-all',
                     copied
                       ? 'bg-emerald-400/15 text-emerald-400 border border-emerald-400/30'
-                      : 'bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97]'
+                      : 'bg-gradient-brand text-brand-dark hover:opacity-90 active:scale-[0.97]'
                   )}
                 >
                   {copied ? (
@@ -407,7 +407,7 @@ export function ConcludeSessionModal({
                 </button>
                 <button
                   onClick={onClose}
-                  className="px-4 py-2.5 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] transition-all"
+                  className="px-4 py-2.5 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-brand-border hover:border-[rgba(255,255,255,0.12)] transition-all"
                 >
                   Done
                 </button>
diff --git a/frontend/src/components/common/ContextMenu.tsx b/frontend/src/components/common/ContextMenu.tsx
index a7e32770..0aa7ec0e 100644
--- a/frontend/src/components/common/ContextMenu.tsx
+++ b/frontend/src/components/common/ContextMenu.tsx
@@ -87,7 +87,7 @@ export function ContextMenu({ position, items, onClose }: ContextMenuProps) {
               'flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
               item.variant === 'danger'
                 ? 'text-rose-400 hover:bg-rose-500/10'
-                : 'text-foreground hover:bg-[rgba(255,255,255,0.06)]'
+                : 'text-foreground hover:bg-brand-border'
             )}
           >
             {item.icon && (
diff --git a/frontend/src/components/common/CreateFlowDropdown.tsx b/frontend/src/components/common/CreateFlowDropdown.tsx
index 871a542d..85816601 100644
--- a/frontend/src/components/common/CreateFlowDropdown.tsx
+++ b/frontend/src/components/common/CreateFlowDropdown.tsx
@@ -74,7 +74,7 @@ export function CreateFlowDropdown({
       {showMenu && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
-          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-sm">
+          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-xs">
             {/* Troubleshooting */}
             <Link
               to="/trees/new"
diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/common/Modal.tsx
index da787dfd..92e11022 100644
--- a/frontend/src/components/common/Modal.tsx
+++ b/frontend/src/components/common/Modal.tsx
@@ -125,7 +125,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
     >
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
         onClick={onClose}
         aria-hidden="true"
       />
@@ -139,13 +139,13 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
           isFullScreen
             ? 'fixed inset-4 max-w-none w-auto h-auto rounded-2xl'
             : cn(
-                'max-h-[100vh] rounded-t-2xl sm:max-h-[85vh] sm:rounded-2xl',
+                'max-h-screen rounded-t-2xl sm:max-h-[85vh] sm:rounded-2xl',
                 sizeClasses[size]
               )
         )}
       >
         {/* Header - Fixed at top */}
-        <div className="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
+        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
           <h2 id="modal-title" className="text-lg font-semibold text-foreground">
             {title}
           </h2>
@@ -168,7 +168,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
               className={cn(
                 'rounded-md p-1.5 text-muted-foreground transition-colors sm:p-1',
                 'hover:bg-accent hover:text-foreground',
-                'focus:outline-none focus:ring-2 focus:ring-primary/20'
+                'focus:outline-hidden focus:ring-2 focus:ring-primary/20'
               )}
               aria-label="Close modal"
             >
@@ -184,7 +184,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
 
         {/* Footer - Fixed at bottom */}
         {footer && (
-          <div className="flex-shrink-0 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
+          <div className="shrink-0 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
             {footer}
           </div>
         )}
diff --git a/frontend/src/components/common/TagInput.tsx b/frontend/src/components/common/TagInput.tsx
index fa9320f8..b790a727 100644
--- a/frontend/src/components/common/TagInput.tsx
+++ b/frontend/src/components/common/TagInput.tsx
@@ -186,7 +186,7 @@ export function TagInput({
             className={cn(
               'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-foreground',
               'placeholder:text-muted-foreground',
-              'focus:outline-none focus:ring-0'
+              'focus:outline-hidden focus:ring-0'
             )}
           />
         )}
diff --git a/frontend/src/components/copilot/CopilotPanel.tsx b/frontend/src/components/copilot/CopilotPanel.tsx
index 0e90a32b..0d292085 100644
--- a/frontend/src/components/copilot/CopilotPanel.tsx
+++ b/frontend/src/components/copilot/CopilotPanel.tsx
@@ -108,7 +108,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         </div>
         <button
           onClick={onClose}
-          className="p-1.5 rounded-lg hover:bg-[rgba(255,255,255,0.06)] text-muted-foreground hover:text-foreground transition-colors"
+          className="p-1.5 rounded-lg hover:bg-brand-border text-muted-foreground hover:text-foreground transition-colors"
         >
           <X size={16} />
         </button>
@@ -122,7 +122,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
               className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${
                 msg.role === 'user'
                   ? 'bg-primary/15 text-foreground'
-                  : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-[rgba(255,255,255,0.06)]'
+                  : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-brand-border'
               }`}
             >
               <MarkdownContent content={msg.content} className="text-[0.8125rem] leading-relaxed" />
@@ -131,7 +131,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         ))}
         {loading && (
           <div className="flex justify-start">
-            <div className="bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] rounded-xl px-3.5 py-2.5">
+            <div className="bg-[rgba(255,255,255,0.04)] border border-brand-border rounded-xl px-3.5 py-2.5">
               <Loader2 size={16} className="animate-spin text-primary" />
             </div>
           </div>
@@ -140,7 +140,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         {/* Suggested flows */}
         {suggestedFlows.length > 0 && (
           <div className="space-y-2 pt-2">
-            <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
               Related Flows
             </span>
             {suggestedFlows.map(flow => (
@@ -162,14 +162,14 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
             onKeyDown={handleKeyDown}
             placeholder="Ask about this step..."
             rows={1}
-            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
             style={{ borderColor: 'var(--glass-border)' }}
             disabled={loading || initializing}
           />
           <button
             onClick={handleSend}
             disabled={!input.trim() || loading || initializing}
-            className="bg-gradient-brand text-[#101114] p-2.5 rounded-xl hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40"
+            className="bg-gradient-brand text-brand-dark p-2.5 rounded-xl hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40"
           >
             <Send size={16} />
           </button>
diff --git a/frontend/src/components/copilot/CopilotToggle.tsx b/frontend/src/components/copilot/CopilotToggle.tsx
index 5f265a9b..6ae725ed 100644
--- a/frontend/src/components/copilot/CopilotToggle.tsx
+++ b/frontend/src/components/copilot/CopilotToggle.tsx
@@ -11,7 +11,7 @@ export function CopilotToggle({ isOpen, onToggle }: CopilotToggleProps) {
   return (
     <button
       onClick={onToggle}
-      className="fixed bottom-6 right-6 z-40 bg-gradient-brand text-[#101114] p-3.5 rounded-full shadow-lg shadow-primary/30 hover:opacity-90 active:scale-[0.97] transition-all"
+      className="fixed bottom-6 right-6 z-40 bg-gradient-brand text-brand-dark p-3.5 rounded-full shadow-lg shadow-primary/30 hover:opacity-90 active:scale-[0.97] transition-all"
       title="Open AI Copilot"
     >
       <MessageCircle size={22} />
diff --git a/frontend/src/components/dashboard/OpenSessions.tsx b/frontend/src/components/dashboard/OpenSessions.tsx
index 88c77695..310a2488 100644
--- a/frontend/src/components/dashboard/OpenSessions.tsx
+++ b/frontend/src/components/dashboard/OpenSessions.tsx
@@ -45,7 +45,7 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
                   {session.stepNumber && session.totalSteps
                     ? `Step ${session.stepNumber} of ${session.totalSteps}`
                     : 'In progress'}
-                  <span className="mx-1.5 text-[hsl(var(--text-dimmed))]">&middot;</span>
+                  <span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
                   <span className="font-label text-[0.625rem]">{session.timeAgo}</span>
                 </div>
               </div>
diff --git a/frontend/src/components/dashboard/QuickStats.tsx b/frontend/src/components/dashboard/QuickStats.tsx
index 385d1b25..f98de76b 100644
--- a/frontend/src/components/dashboard/QuickStats.tsx
+++ b/frontend/src/components/dashboard/QuickStats.tsx
@@ -21,7 +21,7 @@ export function QuickStats({ stats }: QuickStatsProps) {
           className={cn('glass-card p-4 fade-in', i === 0 && 'active-glow')}
           style={{ animationDelay: `${50 + i * 30}ms` }}
         >
-          <p className="font-label text-[0.625rem] font-medium uppercase tracking-[0.1em] text-muted-foreground">
+          <p className="font-label text-[0.625rem] font-medium uppercase tracking-widest text-muted-foreground">
             {stat.label}
           </p>
           <p
@@ -35,7 +35,7 @@ export function QuickStats({ stats }: QuickStatsProps) {
             {stat.value}
           </p>
           {stat.meta && (
-            <p className="mt-0.5 text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{stat.meta}</p>
+            <p className="mt-0.5 text-[0.6875rem] text-[var(--text-dimmed)]">{stat.meta}</p>
           )}
         </div>
       ))}
diff --git a/frontend/src/components/dashboard/SessionsPanel.tsx b/frontend/src/components/dashboard/SessionsPanel.tsx
index 52df7dea..aa49a20d 100644
--- a/frontend/src/components/dashboard/SessionsPanel.tsx
+++ b/frontend/src/components/dashboard/SessionsPanel.tsx
@@ -64,7 +64,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
             </span>
 
             {/* Time */}
-            <span className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
+            <span className="text-right text-[0.6875rem] text-[var(--text-dimmed)]">
               {session.timeAgo}
             </span>
           </Link>
diff --git a/frontend/src/components/dashboard/TreeListItem.tsx b/frontend/src/components/dashboard/TreeListItem.tsx
index 22d80a39..5561e7a3 100644
--- a/frontend/src/components/dashboard/TreeListItem.tsx
+++ b/frontend/src/components/dashboard/TreeListItem.tsx
@@ -33,7 +33,7 @@ export function TreeListItem({
   return (
     <div
       onClick={() => navigate(getTreeNavigatePath(id, treeType))}
-      className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[hsl(var(--sidebar-hover))]"
+      className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[var(--sidebar-hover)]"
       style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }}
     >
       {/* Icon box */}
@@ -75,7 +75,7 @@ export function TreeListItem({
       </div>
 
       {/* Updated */}
-      <div className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
+      <div className="text-right text-[0.6875rem] text-[var(--text-dimmed)]">
         {timeAgo}
       </div>
 
diff --git a/frontend/src/components/dashboard/WeeklyCalendar.tsx b/frontend/src/components/dashboard/WeeklyCalendar.tsx
index b9a1e51d..db289cfe 100644
--- a/frontend/src/components/dashboard/WeeklyCalendar.tsx
+++ b/frontend/src/components/dashboard/WeeklyCalendar.tsx
@@ -56,7 +56,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
                   borderBottom: day.isToday ? '2px solid #06b6d4' : '1px solid var(--glass-border)',
                 }}
               >
-                <span className={`font-label text-[0.625rem] uppercase tracking-[0.1em] ${day.isToday ? 'text-cyan-400' : 'text-muted-foreground'}`}>
+                <span className={`font-label text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-muted-foreground'}`}>
                   {day.label}
                 </span>
                 <div className={`text-sm font-heading font-bold ${day.isToday ? 'text-foreground' : 'text-muted-foreground'}`}>
@@ -65,7 +65,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
               </div>
               <div className="flex-1 overflow-y-auto p-1.5 space-y-1">
                 {dayEvents.length === 0 ? (
-                  <p className="text-[0.625rem] text-[hsl(var(--text-dimmed))] text-center py-2">No events</p>
+                  <p className="text-[0.625rem] text-[var(--text-dimmed)] text-center py-2">No events</p>
                 ) : (
                   dayEvents.map(event => (
                     <div
diff --git a/frontend/src/components/editor-ai/AIPromptDialog.tsx b/frontend/src/components/editor-ai/AIPromptDialog.tsx
index 1767fa9e..641ddfe4 100644
--- a/frontend/src/components/editor-ai/AIPromptDialog.tsx
+++ b/frontend/src/components/editor-ai/AIPromptDialog.tsx
@@ -45,7 +45,7 @@ export function AIPromptDialog({
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/60 backdrop-blur-xs"
         onClick={() => !isGenerating && onClose()}
       />
 
@@ -68,7 +68,7 @@ export function AIPromptDialog({
           placeholder={`Example: "A flow for troubleshooting VPN connectivity issues when users can't connect to the corporate network"`}
           rows={4}
           disabled={isGenerating}
-          className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none disabled:opacity-50"
+          className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden resize-none disabled:opacity-50"
           autoFocus
         />
 
@@ -83,14 +83,14 @@ export function AIPromptDialog({
           <button
             onClick={onClose}
             disabled={isGenerating}
-            className="rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors disabled:opacity-50"
+            className="rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-brand-border px-4 py-2 text-sm text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors disabled:opacity-50"
           >
             Cancel
           </button>
           <button
             onClick={handleGenerate}
             disabled={!prompt.trim() || isGenerating}
-            className="flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-50"
+            className="flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-brand-dark shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-50"
           >
             {isGenerating ? (
               <>
diff --git a/frontend/src/components/editor-ai/ChatTab.tsx b/frontend/src/components/editor-ai/ChatTab.tsx
index 7849bbe2..78dff9eb 100644
--- a/frontend/src/components/editor-ai/ChatTab.tsx
+++ b/frontend/src/components/editor-ai/ChatTab.tsx
@@ -50,7 +50,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
               className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${
                 msg.role === 'user'
                   ? 'bg-primary/15 text-foreground'
-                  : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-[rgba(255,255,255,0.06)]'
+                  : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-brand-border'
               }`}
             >
               <MarkdownContent content={msg.content} className="text-[0.8125rem] leading-relaxed" />
@@ -59,7 +59,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
         ))}
         {isLoading && (
           <div className="flex justify-start">
-            <div className="bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] rounded-xl px-3.5 py-2.5">
+            <div className="bg-[rgba(255,255,255,0.04)] border border-brand-border rounded-xl px-3.5 py-2.5">
               <Loader2 size={16} className="animate-spin text-primary" />
             </div>
           </div>
@@ -77,14 +77,14 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
             onKeyDown={handleKeyDown}
             placeholder="Ask AI to help..."
             rows={1}
-            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
             style={{ borderColor: 'var(--glass-border)' }}
             disabled={isLoading}
           />
           <button
             onClick={onSend}
             disabled={!input.trim() || isLoading}
-            className="bg-gradient-brand text-[#101114] p-2.5 rounded-xl hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40"
+            className="bg-gradient-brand text-brand-dark p-2.5 rounded-xl hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40"
           >
             <Send size={16} />
           </button>
diff --git a/frontend/src/components/editor-ai/EditorAIPanel.tsx b/frontend/src/components/editor-ai/EditorAIPanel.tsx
index 10285ff9..d6d3bf07 100644
--- a/frontend/src/components/editor-ai/EditorAIPanel.tsx
+++ b/frontend/src/components/editor-ai/EditorAIPanel.tsx
@@ -65,7 +65,7 @@ export function EditorAIPanel({
         </div>
         <button
           onClick={onClose}
-          className="p-1.5 rounded-lg hover:bg-[rgba(255,255,255,0.06)] text-muted-foreground hover:text-foreground transition-colors"
+          className="p-1.5 rounded-lg hover:bg-brand-border text-muted-foreground hover:text-foreground transition-colors"
         >
           <X size={16} />
         </button>
diff --git a/frontend/src/components/editor-ai/NodeSummary.tsx b/frontend/src/components/editor-ai/NodeSummary.tsx
index ad9e0e0c..84994ad6 100644
--- a/frontend/src/components/editor-ai/NodeSummary.tsx
+++ b/frontend/src/components/editor-ai/NodeSummary.tsx
@@ -29,7 +29,7 @@ export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummary
             {flowName || 'Untitled Flow'}
           </span>
         </div>
-        <div className="mt-1 flex items-center gap-3 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+        <div className="mt-1 flex items-center gap-3 font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
           <span>{flowType || 'flow'}</span>
           {nodeCount !== undefined && <span>{nodeCount} nodes</span>}
         </div>
@@ -44,7 +44,7 @@ export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummary
     <div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--glass-border)' }}>
       <div className="flex items-center gap-2">
         <Icon className={`h-3.5 w-3.5 ${colorClass}`} />
-        <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+        <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
           {node.type}
         </span>
       </div>
diff --git a/frontend/src/components/editor-ai/SuggestionsTab.tsx b/frontend/src/components/editor-ai/SuggestionsTab.tsx
index e427dcc3..4da91dce 100644
--- a/frontend/src/components/editor-ai/SuggestionsTab.tsx
+++ b/frontend/src/components/editor-ai/SuggestionsTab.tsx
@@ -28,7 +28,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
         return (
           <div key={s.id} className="rounded-lg border border-border bg-[rgba(255,255,255,0.02)] px-3 py-2">
             <div className="flex items-center justify-between">
-              <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 {s.action_type.replace(/_/g, ' ')}
               </span>
               <span className={`flex items-center gap-1 text-xs ${config.color}`}>
@@ -39,7 +39,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
             {s.target_node_id && (
               <p className="mt-1 text-xs text-muted-foreground truncate">Node: {s.target_node_id}</p>
             )}
-            <p className="mt-0.5 font-label text-[0.625rem] text-[#5a6170]">
+            <p className="mt-0.5 font-label text-[0.625rem] text-brand-text-muted">
               {new Date(s.created_at).toLocaleDateString()}
             </p>
           </div>
diff --git a/frontend/src/components/guides/GuideCard.tsx b/frontend/src/components/guides/GuideCard.tsx
index a6085c36..c165017e 100644
--- a/frontend/src/components/guides/GuideCard.tsx
+++ b/frontend/src/components/guides/GuideCard.tsx
@@ -24,7 +24,7 @@ export function GuideCard({ guide }: GuideCardProps) {
           <p className="text-xs text-muted-foreground leading-relaxed">
             {guide.summary}
           </p>
-          <span className="mt-2 inline-block font-label text-[0.625rem] uppercase tracking-[0.1em] text-primary">
+          <span className="mt-2 inline-block font-label text-[0.625rem] uppercase tracking-widest text-primary">
             {guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
           </span>
         </div>
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index 22fc0127..d56ddcfb 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -87,7 +87,7 @@ export function AppLayout() {
         }}
       />
 
-      <div className={cn('app-shell relative z-[1]', sidebarCollapsed && 'app-shell--collapsed')}>
+      <div className={cn('app-shell relative z-1', sidebarCollapsed && 'app-shell--collapsed')}>
       {/* Top Bar - spans full width */}
       <TopBar />
 
@@ -109,11 +109,11 @@ export function AppLayout() {
       {mobileMenuOpen && (
         <div className="fixed inset-0 z-50 md:hidden">
           <div
-            className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-fade-in"
+            className="absolute inset-0 bg-black/80 backdrop-blur-xs animate-fade-in"
             onClick={() => setMobileMenuOpen(false)}
             aria-hidden="true"
           />
-          <nav className="absolute inset-y-0 left-0 w-72 border-r border-border bg-[hsl(var(--sidebar-bg))] shadow-2xl animate-slide-in-left">
+          <nav className="absolute inset-y-0 left-0 w-72 border-r border-border bg-[var(--sidebar-bg)] shadow-2xl animate-slide-in-left">
             <div className="flex h-14 items-center justify-between border-b border-border px-4">
               <Link to="/" className="flex items-center gap-2.5">
                 <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-brand">
@@ -156,8 +156,8 @@ export function AppLayout() {
                       className={cn(
                         'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
                         isActive
-                          ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-                          : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                          ? 'bg-[var(--sidebar-active)] text-foreground'
+                          : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
                       )}
                     >
                       <Icon size={18} />
@@ -171,7 +171,7 @@ export function AppLayout() {
               <div className="mt-3 border-t border-border pt-3">
                 <button
                   onClick={handleLogout}
-                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors"
+                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors"
                 >
                   <LogOut size={18} />
                   Logout
diff --git a/frontend/src/components/layout/CommandPalette.tsx b/frontend/src/components/layout/CommandPalette.tsx
index 7de696e4..0b9bb7cf 100644
--- a/frontend/src/components/layout/CommandPalette.tsx
+++ b/frontend/src/components/layout/CommandPalette.tsx
@@ -124,10 +124,10 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[20vh]">
+    <div className="fixed inset-0 z-100 flex items-start justify-center pt-[20vh]">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
+        className="absolute inset-0 bg-black/60 backdrop-blur-xs animate-fade-in"
         onClick={onClose}
       />
 
@@ -143,7 +143,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
             onChange={e => { setQuery(e.target.value); setSelectedIndex(0) }}
             onKeyDown={handleKeyDown}
             placeholder="Search flows, sessions…"
-            className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
+            className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-hidden"
           />
           <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
             ESC
diff --git a/frontend/src/components/layout/EmailVerificationBanner.tsx b/frontend/src/components/layout/EmailVerificationBanner.tsx
index 903a811a..e65bdb2f 100644
--- a/frontend/src/components/layout/EmailVerificationBanner.tsx
+++ b/frontend/src/components/layout/EmailVerificationBanner.tsx
@@ -33,7 +33,7 @@ export function EmailVerificationBanner() {
 
   return (
     <div className="flex items-center gap-3 border-b border-amber-400/20 bg-amber-400/5 px-4 py-2 text-sm">
-      <AlertTriangle className="h-4 w-4 flex-shrink-0 text-amber-400" />
+      <AlertTriangle className="h-4 w-4 shrink-0 text-amber-400" />
       <span className="text-amber-200">
         Your email is not verified.
       </span>
diff --git a/frontend/src/components/layout/NavItem.tsx b/frontend/src/components/layout/NavItem.tsx
index 26da8534..10006b0c 100644
--- a/frontend/src/components/layout/NavItem.tsx
+++ b/frontend/src/components/layout/NavItem.tsx
@@ -41,8 +41,8 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
         className={cn(
           'group relative flex items-center justify-center rounded-lg p-2 transition-all duration-120',
           isActive
-            ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-            : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+            ? 'bg-[var(--sidebar-active)] text-foreground'
+            : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
         )}
         title={label}
       >
@@ -68,9 +68,9 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
           'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-120',
           isActive
             ? isParentDimmed
-              ? 'bg-[hsl(var(--sidebar-active))]/50 text-foreground/70'
-              : 'bg-[hsl(var(--sidebar-active))] text-foreground'
-            : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+              ? 'bg-[var(--sidebar-active)]/50 text-foreground/70'
+              : 'bg-[var(--sidebar-active)] text-foreground'
+            : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
         )}
       >
         {/* Active indicator bar */}
@@ -110,8 +110,8 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
                 className={cn(
                   'flex items-center gap-2 rounded-lg pl-9 pr-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
                   childActive
-                    ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-                    : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                    ? 'bg-[var(--sidebar-active)] text-foreground'
+                    : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
                 )}
               >
                 <span className="truncate">{child.label}</span>
diff --git a/frontend/src/components/layout/QuickLaunch.tsx b/frontend/src/components/layout/QuickLaunch.tsx
index 8e2a3090..17e42a2b 100644
--- a/frontend/src/components/layout/QuickLaunch.tsx
+++ b/frontend/src/components/layout/QuickLaunch.tsx
@@ -70,8 +70,8 @@ export function QuickLaunch({ open, onClose }: QuickLaunchProps) {
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh]">
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={onClose} />
+    <div className="fixed inset-0 z-100 flex items-start justify-center pt-[15vh]">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-xs animate-fade-in" onClick={onClose} />
       <div ref={containerRef} className="relative w-full max-w-md rounded-xl border border-border bg-card shadow-2xl animate-scale-in">
         <div className="flex items-center justify-between border-b border-border px-4 py-3">
           <h3 className="text-sm font-heading font-semibold text-foreground">Quick Launch</h3>
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index a395a1a7..1d431509 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -141,7 +141,7 @@ export function Sidebar() {
         <button
           onClick={toggleSidebar}
           className={cn(
-            "flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors",
+            "flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors",
             sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2"
           )}
           title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
diff --git a/frontend/src/components/library/AddToFolderMenu.tsx b/frontend/src/components/library/AddToFolderMenu.tsx
index ff3a4105..71d0e7c5 100644
--- a/frontend/src/components/library/AddToFolderMenu.tsx
+++ b/frontend/src/components/library/AddToFolderMenu.tsx
@@ -102,7 +102,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
         <div
           className={cn(
             'absolute right-0 top-full z-20 mt-1 w-48 rounded-md border border-border',
-            'bg-card backdrop-blur-sm py-1 shadow-lg'
+            'bg-card backdrop-blur-xs py-1 shadow-lg'
           )}
         >
           {isLoading ? (
diff --git a/frontend/src/components/library/FolderEditModal.tsx b/frontend/src/components/library/FolderEditModal.tsx
index 55d88bff..63b8415c 100644
--- a/frontend/src/components/library/FolderEditModal.tsx
+++ b/frontend/src/components/library/FolderEditModal.tsx
@@ -174,7 +174,7 @@ export function FolderEditModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
+      <div className="absolute inset-0 bg-black/80 backdrop-blur-xs" onClick={onClose} />
 
       {/* Modal */}
       <div className="relative z-10 w-full max-w-md bg-card border border-border rounded-2xl p-6 shadow-lg">
@@ -202,7 +202,7 @@ export function FolderEditModal({
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
                 'bg-card text-foreground placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'border-border'
               )}
               autoFocus
@@ -221,7 +221,7 @@ export function FolderEditModal({
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
                 'bg-card text-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'border-border'
               )}
             >
diff --git a/frontend/src/components/library/FolderSidebar.tsx b/frontend/src/components/library/FolderSidebar.tsx
index 186fde17..1d701c34 100644
--- a/frontend/src/components/library/FolderSidebar.tsx
+++ b/frontend/src/components/library/FolderSidebar.tsx
@@ -162,7 +162,7 @@ function FolderItem({
           <div
             className={cn(
               'absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-border',
-              'bg-card backdrop-blur-sm py-1 shadow-lg'
+              'bg-card backdrop-blur-xs py-1 shadow-lg'
             )}
           >
             <button
@@ -362,7 +362,7 @@ export function FolderSidebar({
     {/* Mobile backdrop */}
     {mobileOpen && (
       <div
-        className="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden"
+        className="fixed inset-0 z-40 bg-black/80 backdrop-blur-xs md:hidden"
         onClick={onMobileClose}
         aria-hidden="true"
       />
@@ -461,7 +461,7 @@ export function FolderSidebar({
       <div
         className={cn(
           'fixed z-50 w-44 rounded-md border border-border',
-          'bg-card backdrop-blur-sm py-1 shadow-lg'
+          'bg-card backdrop-blur-xs py-1 shadow-lg'
         )}
         style={{ left: contextMenu.x, top: contextMenu.y }}
         onClick={(e) => e.stopPropagation()}
diff --git a/frontend/src/components/library/ForkModal.tsx b/frontend/src/components/library/ForkModal.tsx
index d98c0629..c56b532e 100644
--- a/frontend/src/components/library/ForkModal.tsx
+++ b/frontend/src/components/library/ForkModal.tsx
@@ -87,7 +87,7 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
               maxLength={255}
               className={cn(
                 'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -105,7 +105,7 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
               placeholder="e.g. customizing for a specific client…"
               className={cn(
                 'w-full resize-none rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
diff --git a/frontend/src/components/library/ImportFlowModal.tsx b/frontend/src/components/library/ImportFlowModal.tsx
index 22be13cb..ec44fe46 100644
--- a/frontend/src/components/library/ImportFlowModal.tsx
+++ b/frontend/src/components/library/ImportFlowModal.tsx
@@ -143,7 +143,7 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
               />
               {parseError && (
                 <div className="flex items-start gap-2 rounded-lg border border-rose-500/20 bg-rose-500/5 px-3 py-2">
-                  <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-rose-400" />
+                  <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-rose-400" />
                   <p className="text-xs text-rose-400">{parseError}</p>
                 </div>
               )}
@@ -165,7 +165,7 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
                   maxLength={255}
                   className={cn(
                     'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
-                    'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                    'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 />
               </div>
diff --git a/frontend/src/components/library/ShareTreeModal.tsx b/frontend/src/components/library/ShareTreeModal.tsx
index ee4be0e8..3fab9b62 100644
--- a/frontend/src/components/library/ShareTreeModal.tsx
+++ b/frontend/src/components/library/ShareTreeModal.tsx
@@ -114,7 +114,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
         onClick={onClose}
       />
 
@@ -221,7 +221,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                       type="text"
                       value={activeShare.share_url}
                       readOnly
-                      className="flex-1 bg-transparent text-sm text-foreground outline-none"
+                      className="flex-1 bg-transparent text-sm text-foreground outline-hidden"
                     />
                     <button
                       onClick={handleCopyLink}
diff --git a/frontend/src/components/library/SortDropdown.tsx b/frontend/src/components/library/SortDropdown.tsx
index 18e04172..cea34d8b 100644
--- a/frontend/src/components/library/SortDropdown.tsx
+++ b/frontend/src/components/library/SortDropdown.tsx
@@ -30,7 +30,7 @@ export function SortDropdown({ value, onChange, className }: SortDropdownProps)
         onChange={(e) => onChange(e.target.value as SortBy)}
         className={cn(
           'rounded-md border border-border bg-card px-3 py-1.5 text-sm',
-          'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+          'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
         )}
       >
         {sortOptions.map((option) => (
diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx
index d6e082ad..7ac6bcfe 100644
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -37,20 +37,20 @@ export function TreeListView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-sm"
+          className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-xs"
         >
           {/* Left: Name and Description */}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
               <h3 className="font-semibold text-foreground truncate">{tree.name}</h3>
               {tree.status === 'draft' && (
-                <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 flex-shrink-0">
+                <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 shrink-0">
                   <FileText className="h-3 w-3" />
                   Draft
                 </span>
               )}
               {tree.tree_type === 'maintenance' && (
-                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide text-amber-400 flex-shrink-0">
+                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
                   <Wrench className="h-3 w-3" />
                   Maintenance
                 </span>
@@ -62,11 +62,11 @@ export function TreeListView({
               )}
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                  <Globe className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                  <Lock className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                 </span>
               )}
             </div>
@@ -90,7 +90,7 @@ export function TreeListView({
           </div>
 
           {/* Right: Metadata and Actions */}
-          <div className="flex items-center gap-3 flex-shrink-0">
+          <div className="flex items-center gap-3 shrink-0">
             <div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
               <span>v{tree.version}</span>
               <span>{tree.usage_count} uses</span>
diff --git a/frontend/src/components/library/TreeTableView.tsx b/frontend/src/components/library/TreeTableView.tsx
index 1cef6a40..db95a1c9 100644
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -173,13 +173,13 @@ export function TreeTableView({
                     {tree.name}
                   </span>
                   {tree.status === 'draft' && (
-                    <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 flex-shrink-0">
+                    <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 shrink-0">
                       <FileText className="h-3 w-3" />
                       Draft
                     </span>
                   )}
                   {tree.tree_type === 'maintenance' && (
-                    <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide text-amber-400 flex-shrink-0">
+                    <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
                       <Wrench className="h-3 w-3" />
                       Maintenance
                     </span>
@@ -191,11 +191,11 @@ export function TreeTableView({
                   )}
                   {tree.is_public ? (
                     <span title="Public tree">
-                      <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                      <Globe className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                     </span>
                   ) : (
                     <span title="Private tree">
-                      <Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                      <Lock className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                     </span>
                   )}
                 </div>
diff --git a/frontend/src/components/maintenance/BatchLaunchModal.tsx b/frontend/src/components/maintenance/BatchLaunchModal.tsx
index 43a16845..85669e9b 100644
--- a/frontend/src/components/maintenance/BatchLaunchModal.tsx
+++ b/frontend/src/components/maintenance/BatchLaunchModal.tsx
@@ -76,7 +76,7 @@ export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: Batc
   ]
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs">
       <div className="w-full max-w-lg rounded-xl border border-border bg-card shadow-2xl">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-border px-6 py-4">
@@ -116,7 +116,7 @@ export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: Batc
                 Server names (one per line)
               </label>
               <textarea
-                className="h-40 w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                className="h-40 w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 placeholder={"RDS-01\nRDS-02\nRDS-03"}
                 value={manualInput}
                 onChange={e => setManualInput(e.target.value)}
diff --git a/frontend/src/components/maintenance/BatchStatusCard.tsx b/frontend/src/components/maintenance/BatchStatusCard.tsx
index 62ce004e..30844579 100644
--- a/frontend/src/components/maintenance/BatchStatusCard.tsx
+++ b/frontend/src/components/maintenance/BatchStatusCard.tsx
@@ -132,7 +132,7 @@ export function BatchStatusCard({ session, targetLabel, treeId, batchId }: Batch
         {isNotStarted && (
           <button
             onClick={handleStart}
-            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-3 py-1.5 text-[0.8125rem] font-medium text-white shadow-sm shadow-primary/20 hover:opacity-90 transition-opacity"
+            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-3 py-1.5 text-[0.8125rem] font-medium text-white shadow-xs shadow-primary/20 hover:opacity-90 transition-opacity"
           >
             <Play className="h-3.5 w-3.5" />
             Start
diff --git a/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx b/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
index 180d74ff..679a38ee 100644
--- a/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
+++ b/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
@@ -36,13 +36,13 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
           value={field.label}
           onChange={(e) => onUpdate({ label: e.target.value })}
           placeholder="Field label"
-          className="min-w-0 flex-1 rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+          className="min-w-0 flex-1 rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         />
 
         <select
           value={field.field_type}
           onChange={(e) => onUpdate({ field_type: e.target.value as IntakeFieldType })}
-          className="rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+          className="rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           {FIELD_TYPE_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -84,7 +84,7 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
               value={field.variable_name}
               onChange={(e) => onUpdate({ variable_name: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '') })}
               placeholder="e.g. server_name"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
             <p className="mt-0.5 text-[10px] text-muted-foreground">Used as [VAR:{field.variable_name}]</p>
           </div>
@@ -96,7 +96,7 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
               value={field.placeholder || ''}
               onChange={(e) => onUpdate({ placeholder: e.target.value || undefined })}
               placeholder="Hint text"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
@@ -107,7 +107,7 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
               value={field.help_text || ''}
               onChange={(e) => onUpdate({ help_text: e.target.value || undefined })}
               placeholder="Description or instructions"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
@@ -118,7 +118,7 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
               value={field.default_value || ''}
               onChange={(e) => onUpdate({ default_value: e.target.value || undefined })}
               placeholder="Pre-filled value"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
@@ -129,7 +129,7 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
               value={field.group_name || ''}
               onChange={(e) => onUpdate({ group_name: e.target.value || undefined })}
               placeholder="e.g. Network Settings"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
@@ -144,7 +144,7 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
                 }}
                 placeholder="Option 1&#10;Option 2&#10;Option 3"
                 rows={3}
-                className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
           )}
diff --git a/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx b/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
index bc28e34b..7efc9910 100644
--- a/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
+++ b/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
@@ -18,7 +18,7 @@ export function IntakeFormBuilder() {
       </div>
 
       {intakeForm.length === 0 ? (
-        <div className="rounded-lg border border-dashed border-border bg-white/[0.02] py-8 text-center">
+        <div className="rounded-lg border border-dashed border-border bg-white/2 py-8 text-center">
           <FileText className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
           <p className="text-sm text-muted-foreground">No intake form fields yet</p>
           <p className="mt-1 text-xs text-muted-foreground">
diff --git a/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx b/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
index 0e513ac0..ee94d36c 100644
--- a/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
+++ b/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
@@ -154,7 +154,7 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
         <select
           value={frequency}
           onChange={(e) => setFrequency(e.target.value)}
-          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           {FREQUENCY_OPTIONS.map(opt => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -172,7 +172,7 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
             max={23}
             value={hour}
             onChange={(e) => setHour(Number(e.target.value))}
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
         <div>
@@ -183,7 +183,7 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
             max={59}
             value={minute}
             onChange={(e) => setMinute(Number(e.target.value))}
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       </div>
@@ -194,7 +194,7 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
         <select
           value={timezone}
           onChange={(e) => setTimezone(e.target.value)}
-          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           {TIMEZONE_OPTIONS.map(tz => (
             <option key={tz} value={tz}>{tz}</option>
@@ -209,7 +209,7 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
           <select
             value={selectedTargetListId}
             onChange={(e) => setSelectedTargetListId(e.target.value)}
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           >
             <option value="">None — manual targets only</option>
             {targetLists.map(tl => (
diff --git a/frontend/src/components/procedural-editor/StepEditor.tsx b/frontend/src/components/procedural-editor/StepEditor.tsx
index 26225d1c..46453d87 100644
--- a/frontend/src/components/procedural-editor/StepEditor.tsx
+++ b/frontend/src/components/procedural-editor/StepEditor.tsx
@@ -41,7 +41,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
             placeholder="Section title"
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       </div>
@@ -74,7 +74,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             type="text"
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -90,7 +90,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
             placeholder="—"
             min={1}
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -102,7 +102,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ description: e.target.value })}
             placeholder="Step instructions. Use [VAR:name] for variables."
             rows={4}
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
           {availableVariables.length > 0 && (
             <div className="mt-1 flex flex-wrap gap-1">
@@ -131,7 +131,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
             placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
             rows={3}
-            className="w-full rounded border border-border bg-card px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -181,7 +181,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
                   placeholder="Caution: This will restart the service..."
                   rows={2}
-                  className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-yellow-400/30 focus:outline-none focus:ring-1 focus:ring-yellow-400/20"
+                  className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-yellow-400/30 focus:outline-hidden focus:ring-1 focus:ring-yellow-400/20"
                 />
               </div>
             )}
@@ -194,7 +194,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                 value={step.expected_outcome || ''}
                 onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
                 placeholder="Server should respond with..."
-                className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
@@ -210,7 +210,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.verification_prompt || ''}
                   onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
                   placeholder="Confirm the role was installed"
-                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div>
@@ -218,7 +218,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                 <select
                   value={step.verification_type || ''}
                   onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
-                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 >
                   <option value="">None</option>
                   <option value="checkbox">Checkbox (confirm done)</option>
@@ -239,7 +239,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.reference_url || ''}
                   onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
                   placeholder="https://learn.microsoft.com/..."
-                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div className="flex items-end pb-1">
@@ -266,7 +266,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                 onChange={(e) => onUpdate({
                   library_visibility: e.target.value === '' ? undefined : e.target.value as 'team' | 'public'
                 })}
-                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               >
                 <option value="">Inherit from flow</option>
                 <option value="team">Team only</option>
diff --git a/frontend/src/components/procedural-editor/StepList.tsx b/frontend/src/components/procedural-editor/StepList.tsx
index f0e1d0ba..78fe875c 100644
--- a/frontend/src/components/procedural-editor/StepList.tsx
+++ b/frontend/src/components/procedural-editor/StepList.tsx
@@ -145,7 +145,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                       type="text"
                       value={step.title}
                       onChange={(e) => updateStep(step.id, { title: e.target.value })}
-                      className="flex-1 bg-transparent text-sm text-muted-foreground focus:outline-none"
+                      className="flex-1 bg-transparent text-sm text-muted-foreground focus:outline-hidden"
                       placeholder="Procedure Complete"
                     />
                     <span className="text-[10px] text-muted-foreground">END</span>
@@ -239,7 +239,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                       className={cn(
                         'group flex flex-col rounded-xl border border-border px-3 py-2.5 transition-colors',
                         'hover:border-primary/30 hover:bg-accent/50',
-                        isGhost && 'border-l-2 border-dashed !border-l-primary/40 opacity-60'
+                        isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60'
                       )}
                       onContextMenu={(e) => onStepContextMenu?.(e, step.id)}
                     >
diff --git a/frontend/src/components/procedural/IntakeFormModal.tsx b/frontend/src/components/procedural/IntakeFormModal.tsx
index 891cfd93..d3b09355 100644
--- a/frontend/src/components/procedural/IntakeFormModal.tsx
+++ b/frontend/src/components/procedural/IntakeFormModal.tsx
@@ -71,7 +71,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
     const error = errors[field.variable_name]
 
     const baseInputClass = cn(
-      'w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1',
+      'w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:ring-1',
       error
         ? 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20'
         : 'border-border focus:border-primary focus:ring-primary/20'
@@ -211,7 +211,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs">
       <div className="mx-4 w-full max-w-lg rounded-2xl border border-border bg-[#0a0a0a] shadow-xl">
         {/* Header */}
         <div className="border-b border-border px-6 py-4">
diff --git a/frontend/src/components/procedural/StepDetail.tsx b/frontend/src/components/procedural/StepDetail.tsx
index 1af4b6c2..9f485522 100644
--- a/frontend/src/components/procedural/StepDetail.tsx
+++ b/frontend/src/components/procedural/StepDetail.tsx
@@ -154,7 +154,7 @@ export function StepDetail({
 
       {/* Expected outcome */}
       {'expected_outcome' in step && step.expected_outcome && (
-        <div className="rounded-lg border border-border bg-white/[0.02] p-3">
+        <div className="rounded-lg border border-border bg-white/2 p-3">
           <h4 className="mb-1 text-xs font-medium text-muted-foreground">Expected Outcome</h4>
           <p className="text-sm text-muted-foreground">{resolve(step.expected_outcome)}</p>
         </div>
@@ -162,7 +162,7 @@ export function StepDetail({
 
       {/* Verification */}
       {verificationPrompt && (
-        <div className="rounded-lg border border-border bg-white/[0.02] p-3">
+        <div className="rounded-lg border border-border bg-white/2 p-3">
           <h4 className="mb-2 text-xs font-medium text-muted-foreground">Verification</h4>
           {verificationType === 'checkbox' ? (
             <label className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -184,7 +184,7 @@ export function StepDetail({
                 onChange={(e) => onVerificationChange(e.target.value)}
                 disabled={isCompleted}
                 placeholder="Enter observed value..."
-                className="w-full rounded border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
+                className="w-full rounded border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
               />
             </div>
           )}
@@ -200,7 +200,7 @@ export function StepDetail({
             onChange={(e) => onNotesChange(e.target.value)}
             placeholder="Add notes for this step..."
             rows={2}
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       )}
diff --git a/frontend/src/components/session/CSATModal.tsx b/frontend/src/components/session/CSATModal.tsx
index 6611bb6a..d8de2547 100644
--- a/frontend/src/components/session/CSATModal.tsx
+++ b/frontend/src/components/session/CSATModal.tsx
@@ -74,7 +74,7 @@ export function CSATModal({ isOpen, onClose, sessionId }: CSATModalProps) {
           placeholder="Any comments? (optional)"
           maxLength={500}
           rows={3}
-          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20 resize-none"
+          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20 resize-none"
         />
 
         {/* Actions */}
diff --git a/frontend/src/components/session/ContinuationModal.tsx b/frontend/src/components/session/ContinuationModal.tsx
index 3e594890..07ec81d2 100644
--- a/frontend/src/components/session/ContinuationModal.tsx
+++ b/frontend/src/components/session/ContinuationModal.tsx
@@ -62,7 +62,7 @@ export function ContinuationModal({
                     'hover:border-border hover:bg-accent'
                   )}
                 >
-                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-accent">
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent">
                     {nodeTypeIcons[node.type]}
                   </div>
                   <div className="min-w-0 flex-1">
@@ -71,7 +71,7 @@ export function ContinuationModal({
                       {nodeTypeLabels[node.type]}
                     </p>
                   </div>
-                  <ArrowRight className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                  <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" />
                 </button>
               ))}
             </div>
@@ -98,7 +98,7 @@ export function ContinuationModal({
               'hover:border-amber-500 hover:bg-amber-500/10'
             )}
           >
-            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-amber-500/10">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-500/10">
               <GitBranch className="h-5 w-5 text-amber-500" />
             </div>
             <div className="flex-1">
@@ -111,7 +111,7 @@ export function ContinuationModal({
 
           {/* Warning */}
           <div className="mt-3 flex items-start gap-2 rounded-md bg-yellow-400/10 p-3">
-            <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-yellow-400" />
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-yellow-400" />
             <p className="text-sm text-yellow-400">
               You'll need to complete this branch manually or mark the issue as resolved.
               Custom branches can be saved as a personal tree when your session ends.
diff --git a/frontend/src/components/session/ExportPreviewModal.tsx b/frontend/src/components/session/ExportPreviewModal.tsx
index 23b08431..5228a258 100644
--- a/frontend/src/components/session/ExportPreviewModal.tsx
+++ b/frontend/src/components/session/ExportPreviewModal.tsx
@@ -141,7 +141,7 @@ export function ExportPreviewModal({
         className={cn(
           'h-96 w-full resize-y rounded-md border border-border bg-card p-4',
           'font-mono text-sm text-foreground',
-          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+          'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
         )}
       />
 
@@ -153,7 +153,7 @@ export function ExportPreviewModal({
           className={cn(
             'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
             'text-muted-foreground hover:bg-accent hover:text-foreground',
-            'focus:outline-none focus:ring-2 focus:ring-primary/20'
+            'focus:outline-hidden focus:ring-2 focus:ring-primary/20'
           )}
         >
           {copied ? (
@@ -173,7 +173,7 @@ export function ExportPreviewModal({
           onClick={handleDownload}
           className={cn(
             'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
-            'hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-primary/20'
+            'hover:opacity-90 focus:outline-hidden focus:ring-2 focus:ring-primary/20'
           )}
         >
           <Download className="h-4 w-4" />
diff --git a/frontend/src/components/session/ForkTreeModal.tsx b/frontend/src/components/session/ForkTreeModal.tsx
index 0b906cad..34a1d210 100644
--- a/frontend/src/components/session/ForkTreeModal.tsx
+++ b/frontend/src/components/session/ForkTreeModal.tsx
@@ -83,7 +83,7 @@ export function ForkTreeModal({
     <Modal isOpen={isOpen} onClose={onClose} title="Save Custom Tree?" footer={footer}>
       <div className="space-y-4">
         <div className="flex items-start gap-3 rounded-lg bg-accent/50 p-4">
-          <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-accent">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent">
             <GitFork className="h-5 w-5 text-foreground" />
           </div>
           <div>
@@ -107,7 +107,7 @@ export function ForkTreeModal({
               placeholder="My Custom Tree"
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20'
+                'focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -124,7 +124,7 @@ export function ForkTreeModal({
               rows={3}
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20',
+                'focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20',
                 'resize-none'
               )}
             />
diff --git a/frontend/src/components/session/SaveSessionAsTreeModal.tsx b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
index fd3f841c..aceaa836 100644
--- a/frontend/src/components/session/SaveSessionAsTreeModal.tsx
+++ b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
@@ -33,7 +33,7 @@ export function SaveSessionAsTreeModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
       <div className="bg-card border border-border w-full max-w-lg rounded-2xl p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
@@ -70,7 +70,7 @@ export function SaveSessionAsTreeModal({
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                 'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -91,7 +91,7 @@ export function SaveSessionAsTreeModal({
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                 'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
diff --git a/frontend/src/components/session/ScratchpadSidebar.tsx b/frontend/src/components/session/ScratchpadSidebar.tsx
index 8f99d980..3c3f6650 100644
--- a/frontend/src/components/session/ScratchpadSidebar.tsx
+++ b/frontend/src/components/session/ScratchpadSidebar.tsx
@@ -141,7 +141,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
       {/* Mobile backdrop */}
       {!isCollapsed && (
         <div
-          className="fixed inset-0 z-30 bg-black/80 backdrop-blur-sm sm:hidden"
+          className="fixed inset-0 z-30 bg-black/80 backdrop-blur-xs sm:hidden"
           onClick={() => setIsCollapsed(true)}
           aria-hidden="true"
         />
@@ -203,7 +203,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
               className={cn(
                 'h-full min-h-[200px] w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm',
                 'text-foreground placeholder:text-muted-foreground',
-                'focus:outline-none focus:ring-0'
+                'focus:outline-hidden focus:ring-0'
               )}
             />
           )}
diff --git a/frontend/src/components/session/SessionFilters.tsx b/frontend/src/components/session/SessionFilters.tsx
index 30833348..7f82b263 100644
--- a/frontend/src/components/session/SessionFilters.tsx
+++ b/frontend/src/components/session/SessionFilters.tsx
@@ -102,7 +102,7 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
             className={cn(
               'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
               'text-foreground placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
@@ -118,7 +118,7 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
             className={cn(
               'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
               'text-foreground placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
@@ -129,7 +129,7 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           onChange={(e) => handleFilterChange('treeName', e.target.value)}
           className={cn(
             'rounded-md border border-border bg-card px-3 py-2',
-            'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
             'sm:min-w-[200px]'
           )}
         >
diff --git a/frontend/src/components/session/SessionOutcomeModal.tsx b/frontend/src/components/session/SessionOutcomeModal.tsx
index b97131e5..ac5e1f31 100644
--- a/frontend/src/components/session/SessionOutcomeModal.tsx
+++ b/frontend/src/components/session/SessionOutcomeModal.tsx
@@ -111,7 +111,7 @@ export function SessionOutcomeModal({
             className={cn(
               'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
               'text-sm text-foreground placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
@@ -126,7 +126,7 @@ export function SessionOutcomeModal({
             className={cn(
               'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
               'text-sm text-foreground placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
diff --git a/frontend/src/components/session/SessionTimeline.tsx b/frontend/src/components/session/SessionTimeline.tsx
index e6c72337..15787eb2 100644
--- a/frontend/src/components/session/SessionTimeline.tsx
+++ b/frontend/src/components/session/SessionTimeline.tsx
@@ -135,7 +135,7 @@ export function SessionTimeline({
         {decisions.map((decision, index) => (
           <div key={index} className="ml-1 border-l-2 border-border pl-6">
             <div className="relative">
-              <span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-muted-foreground" />
+              <span className="absolute -left-6.5 top-1 h-2 w-2 rounded-full bg-muted-foreground" />
               <div className="bg-card border border-border rounded-xl p-4">
                 <div className="flex items-start justify-between gap-2">
                   <div className="flex-1">
diff --git a/frontend/src/components/session/ShareSessionModal.tsx b/frontend/src/components/session/ShareSessionModal.tsx
index 3d6d0d0a..7ea2b23f 100644
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -181,7 +181,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
         onClick={onClose}
       />
 
@@ -265,7 +265,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                 placeholder="e.g. Training link, Customer escalation"
                 className={cn(
                   'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
                 maxLength={100}
               />
@@ -299,8 +299,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   onChange={(e) => setCustomDatetime(e.target.value)}
                   className={cn(
                     'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
-                    '[color-scheme:dark]'
+                    'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+                    'scheme-dark'
                   )}
                 />
               )}
diff --git a/frontend/src/components/session/SharedSessionTreePreview.tsx b/frontend/src/components/session/SharedSessionTreePreview.tsx
index 28682dc3..54e8db23 100644
--- a/frontend/src/components/session/SharedSessionTreePreview.tsx
+++ b/frontend/src/components/session/SharedSessionTreePreview.tsx
@@ -76,7 +76,7 @@ export function SharedSessionTreePreview({
 
   return (
     <div className="bg-card border border-border rounded-2xl">
-      <div className="sticky top-0 z-10 rounded-t-2xl border-b border-border bg-black/80 px-6 py-4 backdrop-blur">
+      <div className="sticky top-0 z-10 rounded-t-2xl border-b border-border bg-black/80 px-6 py-4 backdrop-blur-sm">
         <h3 className="text-sm font-semibold text-foreground">Tree Structure</h3>
       </div>
       <div className="max-h-[600px] overflow-y-auto py-2">
diff --git a/frontend/src/components/session/StepRatingModal.tsx b/frontend/src/components/session/StepRatingModal.tsx
index 3872f1b1..1d1b604f 100644
--- a/frontend/src/components/session/StepRatingModal.tsx
+++ b/frontend/src/components/session/StepRatingModal.tsx
@@ -77,7 +77,7 @@ export function StepRatingModal({
   const getRating = (stepId: string) => ratings.get(stepId)
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs p-4">
       <div className="bg-card border border-border w-full max-w-2xl max-h-[90vh] flex flex-col rounded-2xl shadow-lg">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-border px-6 py-4">
@@ -174,7 +174,7 @@ export function StepRatingModal({
                       className={cn(
                         'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                         'placeholder:text-muted-foreground',
-                        'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                        'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                         'disabled:opacity-50'
                       )}
                     />
diff --git a/frontend/src/components/session/VariablePromptModal.tsx b/frontend/src/components/session/VariablePromptModal.tsx
index 364facd0..9182b9aa 100644
--- a/frontend/src/components/session/VariablePromptModal.tsx
+++ b/frontend/src/components/session/VariablePromptModal.tsx
@@ -21,7 +21,7 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
       <div className="bg-card border border-border w-full max-w-md rounded-2xl p-6 shadow-lg">
         <h2 className="mb-1 text-lg font-semibold text-foreground">Input Required</h2>
         <p className="mb-4 text-sm text-muted-foreground">
@@ -40,7 +40,7 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
             autoFocus
             className={cn(
               'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
-              'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
 
diff --git a/frontend/src/components/sidebar/CategoryList.tsx b/frontend/src/components/sidebar/CategoryList.tsx
index 81dcb97f..cbb37e8f 100644
--- a/frontend/src/components/sidebar/CategoryList.tsx
+++ b/frontend/src/components/sidebar/CategoryList.tsx
@@ -38,8 +38,8 @@ export function CategoryList({ categories, activeId, onSelect }: CategoryListPro
             className={cn(
               'flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-sm transition-colors',
               activeId === cat.id
-                ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-                : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                ? 'bg-[var(--sidebar-active)] text-foreground'
+                : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
             )}
           >
             <span
@@ -47,13 +47,13 @@ export function CategoryList({ categories, activeId, onSelect }: CategoryListPro
               style={{ backgroundColor: cat.color }}
             />
             <span className="flex-1 truncate text-left">{cat.name}</span>
-            <span className="font-label text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{cat.count}</span>
+            <span className="font-label text-[0.6875rem] text-[var(--text-dimmed)]">{cat.count}</span>
           </button>
         ))}
         {hasMore && (
           <button
             onClick={() => setExpanded(v => !v)}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors"
           >
             {expanded ? (
               <>
diff --git a/frontend/src/components/sidebar/PinnedFlowsSection.tsx b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
index 79c8968f..187f9d6a 100644
--- a/frontend/src/components/sidebar/PinnedFlowsSection.tsx
+++ b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
@@ -46,7 +46,7 @@ export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps)
       </button>
 
       <div
-        className="overflow-hidden transition-[max-height] duration-[250ms] ease-out"
+        className="overflow-hidden transition-[max-height] duration-250 ease-out"
         style={{
           maxHeight: collapsed ? 0 : showAll
             ? `${flows.length * 36 + 40}px`
@@ -70,7 +70,7 @@ export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps)
                   }}
                   className={cn(
                     'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
-                    'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                    'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
                   )}
                   title={`${flow.tree_name} (right-click to unpin)`}
                 >
diff --git a/frontend/src/components/step-library/CustomStepModal.tsx b/frontend/src/components/step-library/CustomStepModal.tsx
index a232ed3f..638f2a07 100644
--- a/frontend/src/components/step-library/CustomStepModal.tsx
+++ b/frontend/src/components/step-library/CustomStepModal.tsx
@@ -65,7 +65,7 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/80 backdrop-blur-sm sm:items-center sm:p-4">
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/80 backdrop-blur-xs sm:items-center sm:p-4">
       <div className="relative flex h-[95vh] w-full max-w-full flex-col border border-border bg-card shadow-lg sm:h-[90vh] sm:max-w-4xl sm:rounded-2xl">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-border p-4">
@@ -133,7 +133,7 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
 
         {/* Loading Overlay */}
         {isSubmitting && (
-          <div className="absolute inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+          <div className="absolute inset-0 flex items-center justify-center bg-black/80 backdrop-blur-xs">
             <div className="flex flex-col items-center gap-3">
               <Spinner className="border-t-foreground" />
               <p className="text-sm text-muted-foreground">Creating step...</p>
diff --git a/frontend/src/components/step-library/StepDetailModal.tsx b/frontend/src/components/step-library/StepDetailModal.tsx
index 481e2cc0..56fe83c2 100644
--- a/frontend/src/components/step-library/StepDetailModal.tsx
+++ b/frontend/src/components/step-library/StepDetailModal.tsx
@@ -75,7 +75,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
   const visibleReviews = showAllReviews ? allTextReviews : allTextReviews.slice(0, 3)
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
       <div className="relative flex h-[90vh] w-full max-w-3xl flex-col bg-card border border-border rounded-2xl shadow-lg">
         {/* Header */}
         <div className="flex items-start justify-between border-b border-border p-6 pb-4">
diff --git a/frontend/src/components/step-library/StepForm.tsx b/frontend/src/components/step-library/StepForm.tsx
index 11902da2..df73d3fa 100644
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -179,7 +179,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           onChange={(e) => setTitle(e.target.value)}
           placeholder="Enter step title"
           className={cn(
-            'w-full rounded-md border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20',
+            'w-full rounded-md border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20',
             errors.title ? 'border-red-400/50' : 'border-border'
           )}
         />
@@ -201,7 +201,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           placeholder="Describe what to do in this step..."
           rows={6}
           className={cn(
-            'w-full rounded-md border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20',
+            'w-full rounded-md border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20',
             errors.instructions ? 'border-red-400/50' : 'border-border'
           )}
         />
@@ -221,7 +221,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           onChange={(e) => setHelpText(e.target.value)}
           placeholder="Additional context or tips..."
           rows={3}
-          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
         />
       </div>
 
@@ -296,7 +296,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           id="category"
           value={categoryId}
           onChange={(e) => setCategoryId(e.target.value)}
-          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
         >
           <option value="">None</option>
           {categories.map(cat => (
@@ -318,7 +318,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
             onChange={(e) => setTagInput(e.target.value)}
             onKeyDown={handleTagInputKeyDown}
             placeholder="Type tag and press Enter"
-            className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           />
           <button
             type="button"
@@ -359,7 +359,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           id="visibility"
           value={visibility}
           onChange={(e) => setVisibility(e.target.value as 'private' | 'team' | 'public')}
-          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
         >
           <option value="private">Private (only me)</option>
           <option value="team">Team (my team members)</option>
diff --git a/frontend/src/components/step-library/StepFormModal.tsx b/frontend/src/components/step-library/StepFormModal.tsx
index 58a7a95c..422bd705 100644
--- a/frontend/src/components/step-library/StepFormModal.tsx
+++ b/frontend/src/components/step-library/StepFormModal.tsx
@@ -49,7 +49,7 @@ export function StepFormModal({ isOpen, onClose, onSuccess, editingStep }: StepF
   } : undefined
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs p-4">
       <div className="relative flex h-[90vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-border p-6 pb-4">
diff --git a/frontend/src/components/step-library/StepLibraryBrowser.tsx b/frontend/src/components/step-library/StepLibraryBrowser.tsx
index 146cac20..ad71e7da 100644
--- a/frontend/src/components/step-library/StepLibraryBrowser.tsx
+++ b/frontend/src/components/step-library/StepLibraryBrowser.tsx
@@ -151,7 +151,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             placeholder="Search steps..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full rounded-md border border-border bg-card py-2 pl-10 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-md border border-border bg-card py-2 pl-10 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -162,7 +162,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by category"
             value={selectedCategoryId || ''}
             onChange={(e) => setSelectedCategoryId(e.target.value || undefined)}
-            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All Categories</option>
             {categories.map(cat => (
@@ -175,7 +175,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by step type"
             value={selectedStepType || ''}
             onChange={(e) => setSelectedStepType((e.target.value as 'decision' | 'action' | 'solution') || undefined)}
-            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All Types</option>
             <option value="decision">Decision</option>
@@ -188,7 +188,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by minimum rating"
             value={minRating?.toString() || ''}
             onChange={(e) => setMinRating(e.target.value ? Number(e.target.value) : undefined)}
-            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">Any Rating</option>
             <option value="4">4+ Stars</option>
@@ -201,7 +201,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Sort steps by"
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as 'recent' | 'popular' | 'highest_rated' | 'most_used')}
-            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="recent">Most Recent</option>
             <option value="popular">Most Popular</option>
diff --git a/frontend/src/components/tree-editor/AIFixReviewModal.tsx b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
index acda5769..1f3a096e 100644
--- a/frontend/src/components/tree-editor/AIFixReviewModal.tsx
+++ b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
@@ -39,7 +39,7 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
   const allHandled = pendingFixes.length === 0
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs p-4">
       <div className="relative flex h-[80vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-border px-6 py-4">
@@ -127,7 +127,7 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
                     <div className="mt-3 flex gap-2">
                       <button
                         onClick={() => handleApply(fix)}
-                        className="flex items-center gap-1 rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-sm shadow-primary/20 hover:opacity-90"
+                        className="flex items-center gap-1 rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-xs shadow-primary/20 hover:opacity-90"
                       >
                         <Check className="h-3 w-3" />
                         Apply
diff --git a/frontend/src/components/tree-editor/FlowCanvas.tsx b/frontend/src/components/tree-editor/FlowCanvas.tsx
index 17e159ed..32330b9b 100644
--- a/frontend/src/components/tree-editor/FlowCanvas.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvas.tsx
@@ -139,14 +139,14 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType, onN
         proOptions={{ hideAttribution: true }}
         className="dark bg-accent/30"
       >
-        <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
-        <Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" />
+        <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="oklch(0.63 0.02 260 / 0.25)" />
+        <Controls showInteractive={false} className="bg-card! border-border! shadow-lg!" />
         {minimapVisible && (
           <MiniMap
             pannable
             zoomable
             nodeColor={minimapNodeColor}
-            className="!bg-card !border-border"
+            className="bg-card! border-border!"
             nodeStrokeWidth={2}
           />
         )}
diff --git a/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx b/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
index 2fd84eee..9b37ce3a 100644
--- a/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
@@ -16,7 +16,7 @@ function FlowCanvasAnswerNodeComponent({ data, selected }: NodeProps) {
 
   return (
     <>
-      <Handle type="target" position={Position.Top} className="!bg-border !w-2 !h-2 !border-0" />
+      <Handle type="target" position={Position.Top} className="bg-border! w-2! h-2! border-0!" />
 
       <div
         className={cn(
@@ -61,7 +61,7 @@ function FlowCanvasAnswerNodeComponent({ data, selected }: NodeProps) {
         )}
       </div>
 
-      <Handle type="source" position={Position.Bottom} className="!bg-border !w-2 !h-2 !border-0" />
+      <Handle type="source" position={Position.Bottom} className="bg-border! w-2! h-2! border-0!" />
     </>
   )
 }
diff --git a/frontend/src/components/tree-editor/FlowCanvasNode.tsx b/frontend/src/components/tree-editor/FlowCanvasNode.tsx
index 38800d12..49a9eaf9 100644
--- a/frontend/src/components/tree-editor/FlowCanvasNode.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvasNode.tsx
@@ -62,15 +62,15 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
   return (
     <>
       {/* Target handle at top */}
-      <Handle type="target" position={Position.Top} className="!bg-border !w-2 !h-2 !border-0" />
+      <Handle type="target" position={Position.Top} className="bg-border! w-2! h-2! border-0!" />
 
       <div
         onContextMenu={(e) => onContextMenu?.(e, node.id)}
         className={cn(
-          'w-[280px] rounded-xl border border-border bg-card shadow-sm cursor-pointer transition-all',
+          'w-[280px] rounded-xl border border-border bg-card shadow-xs cursor-pointer transition-all',
           config.borderClass,
           selected && 'ring-1 ring-primary shadow-md',
-          isGhost && 'border-dashed !border-primary/40 opacity-60'
+          isGhost && 'border-dashed border-primary/40! opacity-60'
         )}
       >
         {/* Header */}
@@ -175,7 +175,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
       </div>
 
       {/* Source handle at bottom */}
-      <Handle type="source" position={Position.Bottom} className="!bg-border !w-2 !h-2 !border-0" />
+      <Handle type="source" position={Position.Bottom} className="bg-border! w-2! h-2! border-0!" />
     </>
   )
 }
diff --git a/frontend/src/components/tree-editor/MetadataSidePanel.tsx b/frontend/src/components/tree-editor/MetadataSidePanel.tsx
index 25ebafb3..65a6e817 100644
--- a/frontend/src/components/tree-editor/MetadataSidePanel.tsx
+++ b/frontend/src/components/tree-editor/MetadataSidePanel.tsx
@@ -28,7 +28,7 @@ export function MetadataSidePanel({ isOpen, onClose }: MetadataSidePanelProps) {
     <>
       {/* Backdrop — click to close */}
       <div
-        className="fixed inset-0 z-40 bg-background/40 backdrop-blur-sm"
+        className="fixed inset-0 z-40 bg-background/40 backdrop-blur-xs"
         onClick={onClose}
         aria-hidden="true"
       />
diff --git a/frontend/src/components/tree-editor/NodeFormAction.tsx b/frontend/src/components/tree-editor/NodeFormAction.tsx
index 71efaff3..7fe6d886 100644
--- a/frontend/src/components/tree-editor/NodeFormAction.tsx
+++ b/frontend/src/components/tree-editor/NodeFormAction.tsx
@@ -62,7 +62,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
             'bg-card text-foreground placeholder:text-muted-foreground',
-            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
             titleError ? 'border-red-400' : 'border-border'
           )}
         />
@@ -107,7 +107,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
             className={cn(
               'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
               'bg-background text-foreground placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
             )}
           />
         )}
@@ -134,7 +134,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
               className={cn(
                 'block w-full rounded-md border border-border px-3 py-2 font-mono text-sm',
                 'bg-background text-foreground placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
               )}
             />
           )}
@@ -154,7 +154,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
           className={cn(
             'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
             'bg-background text-foreground placeholder:text-muted-foreground',
-            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+            'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
           )}
         />
       </div>
@@ -195,7 +195,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
             className={cn(
               'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
               'bg-card text-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           >
             <option value="">Link to existing node...</option>
diff --git a/frontend/src/components/tree-editor/NodeFormDecision.tsx b/frontend/src/components/tree-editor/NodeFormDecision.tsx
index b4d9c537..eb84019a 100644
--- a/frontend/src/components/tree-editor/NodeFormDecision.tsx
+++ b/frontend/src/components/tree-editor/NodeFormDecision.tsx
@@ -104,7 +104,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
             'bg-card text-foreground placeholder:text-muted-foreground',
-            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
             questionError ? 'border-red-400' : 'border-border'
           )}
         />
@@ -126,7 +126,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
           className={cn(
             'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
             'bg-background text-foreground placeholder:text-muted-foreground',
-            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+            'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
           )}
         />
       </div>
@@ -187,7 +187,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
                       className={cn(
                         'block w-full rounded-md border px-3 py-2 text-sm',
                         'bg-background text-foreground placeholder:text-muted-foreground',
-                        'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                        'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary',
                         optionLabelError ? 'border-red-400' : 'border-border'
                       )}
                     />
diff --git a/frontend/src/components/tree-editor/NodeFormResolution.tsx b/frontend/src/components/tree-editor/NodeFormResolution.tsx
index 77d3ff79..4541813a 100644
--- a/frontend/src/components/tree-editor/NodeFormResolution.tsx
+++ b/frontend/src/components/tree-editor/NodeFormResolution.tsx
@@ -59,7 +59,7 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
             'bg-card text-foreground placeholder:text-muted-foreground',
-            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
             titleError ? 'border-red-400' : 'border-border'
           )}
         />
@@ -103,7 +103,7 @@ Document what was done and the outcome.
             className={cn(
               'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
               'bg-background text-foreground placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
             )}
           />
         )}
@@ -134,7 +134,7 @@ Document what was done and the outcome.
                 className={cn(
                   'block w-full rounded-md border border-border px-3 py-2 text-sm',
                   'bg-background text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
                 )}
               />
             </div>
diff --git a/frontend/src/components/tree-editor/NodeList.tsx b/frontend/src/components/tree-editor/NodeList.tsx
index e7dfaad3..2069b955 100644
--- a/frontend/src/components/tree-editor/NodeList.tsx
+++ b/frontend/src/components/tree-editor/NodeList.tsx
@@ -184,7 +184,7 @@ function NodeListItem({
           'group flex items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors cursor-pointer',
           isRootNode
             ? isSelected
-              ? 'bg-blue-500/20 ring-2 ring-blue-500 shadow-sm'
+              ? 'bg-blue-500/20 ring-2 ring-blue-500 shadow-xs'
               : 'bg-blue-500/10 border border-blue-500/30 hover:bg-blue-500/15'
             : isSelected
             ? 'bg-primary/10 ring-1 ring-primary'
@@ -581,7 +581,7 @@ export function NodeList() {
 
       {/* Add Node Type Selector */}
       {addingToParent && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-xs">
           <div className="w-full max-w-xs rounded-lg border border-border bg-card p-4 shadow-lg">
             <h3 className="mb-3 text-sm font-semibold">Select Node Type</h3>
             <div className="space-y-2">
diff --git a/frontend/src/components/tree-editor/NodePicker.tsx b/frontend/src/components/tree-editor/NodePicker.tsx
index 7710120c..3b8ac0bb 100644
--- a/frontend/src/components/tree-editor/NodePicker.tsx
+++ b/frontend/src/components/tree-editor/NodePicker.tsx
@@ -167,7 +167,7 @@ export function NodePicker({
               className={cn(
                 'flex-1 rounded-md border border-border px-2 py-1 text-sm',
                 'bg-card text-foreground placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -201,7 +201,7 @@ export function NodePicker({
             className={cn(
               'block w-full rounded-md border px-3 py-2 text-sm',
               'bg-card text-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
               error ? 'border-red-400' : 'border-border'
             )}
           >
diff --git a/frontend/src/components/tree-editor/TreeCanvas.tsx b/frontend/src/components/tree-editor/TreeCanvas.tsx
index a89cfd25..56243d7d 100644
--- a/frontend/src/components/tree-editor/TreeCanvas.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvas.tsx
@@ -64,7 +64,7 @@ interface AddNodePickerProps {
 
 function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
   return (
-    <div className="flex items-center gap-2 rounded-xl border border-dashed border-primary/40 bg-card px-3 py-2 shadow-sm">
+    <div className="flex items-center gap-2 rounded-xl border border-dashed border-primary/40 bg-card px-3 py-2 shadow-xs">
       <span className="text-xs text-muted-foreground shrink-0">Add:</span>
 
       <button
@@ -691,7 +691,7 @@ export function TreeCanvas() {
       style={{
         // Subtle dot grid background
         backgroundImage:
-          'radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)',
+          'radial-gradient(circle, var(--color-border) 1px, transparent 1px)',
         backgroundSize: '24px 24px',
       }}
     >
diff --git a/frontend/src/components/tree-editor/TreeCanvasNode.tsx b/frontend/src/components/tree-editor/TreeCanvasNode.tsx
index 692ba10f..d1073e2e 100644
--- a/frontend/src/components/tree-editor/TreeCanvasNode.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvasNode.tsx
@@ -168,7 +168,7 @@ export function TreeCanvasNode({
   return (
     <div
       className={cn(
-        'relative rounded-xl border border-border bg-card shadow-sm transition-all duration-150',
+        'relative rounded-xl border border-border bg-card shadow-xs transition-all duration-150',
         config.borderClass,
         isExpanded && 'ring-1 ring-primary shadow-md',
         isSelected && !isExpanded && 'ring-1 ring-primary/50',
diff --git a/frontend/src/components/tree-editor/TreeMetadataForm.tsx b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
index 2bacbcb1..53b441a7 100644
--- a/frontend/src/components/tree-editor/TreeMetadataForm.tsx
+++ b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
@@ -73,7 +73,7 @@ export function TreeMetadataForm() {
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
             'bg-card text-foreground placeholder:text-muted-foreground',
-            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
             nameError ? 'border-red-400' : 'border-border'
           )}
         />
@@ -94,7 +94,7 @@ export function TreeMetadataForm() {
           className={cn(
             'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
             'bg-card text-foreground placeholder:text-muted-foreground',
-            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+            'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
           )}
         />
       </div>
@@ -112,7 +112,7 @@ export function TreeMetadataForm() {
             className={cn(
               'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
               'bg-card text-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           >
             <option value="">No category</option>
@@ -134,7 +134,7 @@ export function TreeMetadataForm() {
               className={cn(
                 'block min-w-0 flex-1 rounded-md border border-border px-3 py-2 text-sm',
                 'bg-card text-foreground placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
               autoFocus
             />
diff --git a/frontend/src/components/tree-editor/ValidationSummary.tsx b/frontend/src/components/tree-editor/ValidationSummary.tsx
index 987be180..c267b42f 100644
--- a/frontend/src/components/tree-editor/ValidationSummary.tsx
+++ b/frontend/src/components/tree-editor/ValidationSummary.tsx
@@ -76,7 +76,7 @@ export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing
               'flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors',
               isFixing
                 ? 'bg-primary/10 text-primary cursor-wait'
-                : 'bg-gradient-brand text-white shadow-sm shadow-primary/20 hover:opacity-90'
+                : 'bg-gradient-brand text-white shadow-xs shadow-primary/20 hover:opacity-90'
             )}
           >
             {isFixing ? (
@@ -109,7 +109,7 @@ export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing
                   : 'cursor-default'
               )}
             >
-              <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-red-400" />
+              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
               <div className="flex-1">
                 <p className="text-red-400">{error.message}</p>
                 {error.nodeId && (
@@ -133,7 +133,7 @@ export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing
                   : 'cursor-default'
               )}
             >
-              <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-yellow-400" />
+              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-yellow-400" />
               <div className="flex-1">
                 <p className="text-yellow-400">{warning.message}</p>
                 {warning.nodeId && (
diff --git a/frontend/src/components/tree-editor/useTreeLayout.ts b/frontend/src/components/tree-editor/useTreeLayout.ts
index eda895de..5dd78c7d 100644
--- a/frontend/src/components/tree-editor/useTreeLayout.ts
+++ b/frontend/src/components/tree-editor/useTreeLayout.ts
@@ -155,10 +155,10 @@ export function useTreeLayout(): UseTreeLayoutResult {
             target: child.id,
             type: 'smoothstep',
             label: edgeLabel,
-            labelStyle: { fill: 'hsl(var(--muted-foreground))', fontSize: 11 },
-            labelBgStyle: { fill: 'hsl(var(--card))', fillOpacity: 0.9 },
+            labelStyle: { fill: 'var(--color-muted-foreground)', fontSize: 11 },
+            labelBgStyle: { fill: 'var(--color-card)', fillOpacity: 0.9 },
             labelBgPadding: [4, 2] as [number, number],
-            style: { stroke: 'hsl(var(--border))' },
+            style: { stroke: 'var(--color-border)' },
           })
 
           walk(child, node.id)
@@ -183,17 +183,17 @@ export function useTreeLayout(): UseTreeLayoutResult {
             type: 'smoothstep',
             animated: true,
             label: ref.label ? truncateLabel(ref.label) : undefined,
-            labelStyle: { fill: 'hsl(var(--primary))', fontSize: 10, fontWeight: 500 },
-            labelBgStyle: { fill: 'hsl(var(--card))', fillOpacity: 0.95 },
+            labelStyle: { fill: 'var(--color-primary)', fontSize: 10, fontWeight: 500 },
+            labelBgStyle: { fill: 'var(--color-card)', fillOpacity: 0.95 },
             labelBgPadding: [4, 2] as [number, number],
             style: {
-              stroke: 'hsl(var(--primary))',
+              stroke: 'var(--color-primary)',
               strokeWidth: 2,
               strokeDasharray: '6 3',
             },
             markerEnd: {
               type: 'arrowclosed' as const,
-              color: 'hsl(var(--primary))',
+              color: 'var(--color-primary)',
               width: 16,
               height: 16,
             },
diff --git a/frontend/src/components/tree-preview/TreePreviewNode.tsx b/frontend/src/components/tree-preview/TreePreviewNode.tsx
index 0837426d..27eae65e 100644
--- a/frontend/src/components/tree-preview/TreePreviewNode.tsx
+++ b/frontend/src/components/tree-preview/TreePreviewNode.tsx
@@ -186,7 +186,7 @@ export function TreePreviewNode({
         {/* Solution path indicator - shows when this branch leads to a solution */}
         {leadsTosolution && (
           <div
-            className="absolute -top-1.5 -right-1.5 flex items-center justify-center rounded-full bg-green-500/90 p-0.5 shadow-sm"
+            className="absolute -top-1.5 -right-1.5 flex items-center justify-center rounded-full bg-green-500/90 p-0.5 shadow-xs"
             title="This branch leads to a solution"
           >
             <CheckCircle className="h-3 w-3 text-foreground" />
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 2b584873..bf6a71a4 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -3,14 +3,14 @@ import { cn } from '@/lib/utils'
 import { Spinner } from '@/components/common/Spinner'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.97]',
+  'inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.97]',
   {
     variants: {
       variant: {
         primary:
-          'bg-gradient-brand text-[#101114] font-semibold shadow-lg shadow-primary/20 hover:opacity-90',
+          'bg-gradient-brand text-brand-dark font-semibold shadow-lg shadow-primary/20 hover:opacity-90',
         secondary:
-          'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] hover:bg-[rgba(255,255,255,0.06)]',
+          'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground hover:border-[rgba(255,255,255,0.12)] hover:bg-brand-border',
         destructive:
           'bg-red-400/10 text-red-400 border border-red-400/20 hover:bg-red-400/20',
         ghost:
diff --git a/frontend/src/components/ui/Input.tsx b/frontend/src/components/ui/Input.tsx
index fd5505d2..f7ae46b0 100644
--- a/frontend/src/components/ui/Input.tsx
+++ b/frontend/src/components/ui/Input.tsx
@@ -12,7 +12,7 @@ export function Input({ className, error, id, ...props }: InputProps) {
         className={cn(
           'flex h-9 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
           'placeholder:text-muted-foreground',
-          'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20',
+          'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',
           className
diff --git a/frontend/src/components/ui/Skeleton.tsx b/frontend/src/components/ui/Skeleton.tsx
index 0744b535..2ead45e7 100644
--- a/frontend/src/components/ui/Skeleton.tsx
+++ b/frontend/src/components/ui/Skeleton.tsx
@@ -6,7 +6,7 @@ export function Skeleton({ className, ...props }: SkeletonProps) {
   return (
     <div
       className={cn(
-        'animate-pulse rounded-lg bg-[rgba(255,255,255,0.06)]',
+        'animate-pulse rounded-lg bg-brand-border',
         className
       )}
       {...props}
diff --git a/frontend/src/components/ui/Textarea.tsx b/frontend/src/components/ui/Textarea.tsx
index 3de30808..2d5c9a44 100644
--- a/frontend/src/components/ui/Textarea.tsx
+++ b/frontend/src/components/ui/Textarea.tsx
@@ -12,7 +12,7 @@ export function Textarea({ className, error, id, ...props }: TextareaProps) {
         className={cn(
           'flex w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
           'placeholder:text-muted-foreground',
-          'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20',
+          'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',
           className
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 05709183..bdd0bbe7 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,63 +1,187 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-@layer base {
-  :root {
-    /* ResolutionFlow Dark Theme — Slate & Ice Modern */
-    --background: 228 12% 7%;
-    --foreground: 210 40% 98%;
-    --card: 220 10% 10%;
-    --card-foreground: 210 40% 98%;
-    --popover: 220 10% 10%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 187 72% 43%;
-    --primary-foreground: 228 12% 7%;
-    --secondary: 220 8% 14%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 220 8% 14%;
-    --muted-foreground: 215 10% 58%;
-    --accent: 220 8% 14%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 350 81% 55%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 220 8% 14%;
-    --input: 220 8% 14%;
-    --ring: 187 72% 43%;
-    --radius: 0.75rem;
+@custom-variant dark (&:where(.dark, .dark *));
 
-    /* App Shell tokens */
-    --sidebar-w: 260px;
-    --sidebar-bg: 228 12% 6%;
-    --sidebar-hover: 220 8% 14%;
-    --sidebar-active: 187 72% 43% / 0.10;
-    --border-subtle: 220 8% 12%;
-    --text-dimmed: 218 10% 39%;
+@theme {
+  /* ── Brand tokens ─────────────────────────────────── */
+  --color-brand-gradient-from: oklch(0.65 0.13 195);   /* #06b6d4 cyan-500 */
+  --color-brand-gradient-to: oklch(0.74 0.12 195);     /* #22d3ee cyan-400 */
+  --color-brand-dark: oklch(0.145 0.013 264);           /* #101114 */
+  --color-brand-dark-card: oklch(0.17 0.01 264);        /* #14161a */
+  --color-brand-dark-surface: oklch(0.17 0.01 264);     /* #14161a */
+  --color-brand-text-primary: oklch(0.98 0.005 264);    /* #f8fafc */
+  --color-brand-text-secondary: oklch(0.63 0.02 260);   /* #8891a0 */
+  --color-brand-text-muted: oklch(0.45 0.015 260);      /* #5a6170 */
+  --color-brand-border: oklch(0.35 0 0 / 0.06);
 
-    /* Glass system */
-    --glass-bg: rgba(24, 26, 31, 0.55);
-    --glass-bg-hover: rgba(24, 26, 31, 0.7);
-    --glass-border: rgba(255, 255, 255, 0.06);
-    --glass-border-hover: rgba(255, 255, 255, 0.12);
-    --glass-blur: blur(16px);
-    --glass-blur-strong: blur(20px);
-    --glass-blur-light: blur(12px);
+  /* ── Semantic color tokens (OKLCH, direct values) ── */
+  --color-background: oklch(0.145 0.013 264);           /* dark charcoal #101114 */
+  --color-foreground: oklch(0.98 0.005 264);            /* near-white #f8fafc */
 
-    /* Shadow system */
-    --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3);
-    --shadow-float-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
-    --shadow-cyan-glow: 0 8px 32px rgba(6, 182, 212, 0.08);
+  --color-card: oklch(0.178 0.008 264);                 /* #17191d */
+  --color-card-foreground: oklch(0.98 0.005 264);
 
-    /* Easing */
-    --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --color-popover: oklch(0.178 0.008 264);
+  --color-popover-foreground: oklch(0.98 0.005 264);
+
+  --color-primary: oklch(0.65 0.13 195);                /* cyan #1ea8c4 */
+  --color-primary-foreground: oklch(0.145 0.013 264);   /* dark bg for contrast */
+
+  --color-secondary: oklch(0.22 0.008 264);             /* #212329 */
+  --color-secondary-foreground: oklch(0.98 0.005 264);
+
+  --color-muted: oklch(0.22 0.008 264);
+  --color-muted-foreground: oklch(0.63 0.02 260);       /* #8891a0 */
+
+  --color-accent: oklch(0.22 0.008 264);
+  --color-accent-foreground: oklch(0.98 0.005 264);
+
+  --color-destructive: oklch(0.55 0.22 15);             /* rose #e63359 */
+  --color-destructive-foreground: oklch(0.98 0.005 264);
+
+  --color-border: oklch(0.22 0.008 264);
+  --color-input: oklch(0.22 0.008 264);
+  --color-ring: oklch(0.65 0.13 195);                   /* cyan, matches primary */
+
+  /* ── Radii ───────────────────────────────────────── */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+
+  /* ── Fonts ───────────────────────────────────────── */
+  --font-sans:
+    'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, sans-serif;
+  --font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
+  --font-label: 'JetBrains Mono', monospace;
+
+  /* ── Gradients ───────────────────────────────────── */
+  --background-image-gradient-brand: linear-gradient(
+    135deg,
+    oklch(0.65 0.13 195) 0%,
+    oklch(0.74 0.12 195) 100%
+  );
+  --background-image-gradient-brand-hover: linear-gradient(
+    135deg,
+    oklch(0.58 0.12 195) 0%,
+    oklch(0.65 0.13 195) 100%
+  );
+
+  /* ── Animations (keyframes inside @theme) ────────── */
+  --animate-fade-in: fade-in 200ms ease-out;
+  --animate-fade-in-up: fade-in-up 200ms ease-out;
+  --animate-slide-in-left: slide-in-from-left 200ms ease-out;
+  --animate-slide-in-bottom: slide-in-from-bottom 200ms ease-out;
+  --animate-scale-in: scale-in 150ms ease-out;
+  --animate-slide-down: slideDown 400ms ease-out;
+  --animate-slide-in-right: slideInRight 300ms ease-out;
+  --animate-fade-in-right: fadeInRight 400ms ease-out;
+  --animate-breathe-glow: breatheGlow 3s ease-in-out infinite alternate;
+  --animate-bell-wobble: bellWobble 500ms ease-in-out;
+  --animate-fade: fadeIn 300ms ease forwards;
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes slide-in-from-left {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes slide-in-from-bottom {
+    from { opacity: 0; transform: translateY(16px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes slideDown {
+    from { transform: translateY(-100%); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+
+  @keyframes slideInRight {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes fadeInRight {
+    from { transform: translateX(30px); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(6px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes breatheGlow {
+    from {
+      box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.3),
+        0 0 20px oklch(0.65 0.13 195 / 0.04);
+    }
+    to {
+      box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.3),
+        0 0 30px oklch(0.65 0.13 195 / 0.12);
+    }
+  }
+
+  @keyframes bellWobble {
+    0% { transform: rotate(0deg); }
+    20% { transform: rotate(8deg); }
+    40% { transform: rotate(-6deg); }
+    60% { transform: rotate(4deg); }
+    80% { transform: rotate(-2deg); }
+    100% { transform: rotate(0deg); }
   }
 }
 
+/* ── Root CSS variables (non-theme: glass, shadows, layout) ── */
+:root {
+  /* App Shell tokens */
+  --sidebar-w: 260px;
+  --sidebar-bg: oklch(0.13 0.013 264);
+  --sidebar-hover: var(--color-secondary);
+  --sidebar-active: oklch(0.65 0.13 195 / 0.10);
+  --text-dimmed: oklch(0.42 0.015 260);
+
+  /* Glass system */
+  --glass-bg: oklch(0.16 0.01 264 / 0.55);
+  --glass-bg-hover: oklch(0.16 0.01 264 / 0.7);
+  --glass-border: oklch(1 0 0 / 0.06);
+  --glass-border-hover: oklch(1 0 0 / 0.12);
+  --glass-blur: blur(16px);
+  --glass-blur-strong: blur(20px);
+  --glass-blur-light: blur(12px);
+
+  /* Shadow system */
+  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3);
+  --shadow-float-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px oklch(1 0 0 / 0.08);
+  --shadow-cyan-glow: 0 8px 32px oklch(0.65 0.13 195 / 0.08);
+
+  /* Easing */
+  --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Base styles ─────────────────────────────────────── */
 @layer base {
   * {
     @apply border-border;
     scrollbar-width: thin;
-    scrollbar-color: hsl(var(--border)) transparent;
+    scrollbar-color: var(--color-border) transparent;
   }
   *::-webkit-scrollbar {
     width: 6px;
@@ -67,333 +191,201 @@
     background: transparent;
   }
   *::-webkit-scrollbar-thumb {
-    background-color: hsl(var(--border));
+    background-color: var(--color-border);
     border-radius: 9999px;
   }
   *::-webkit-scrollbar-thumb:hover {
-    background-color: hsl(var(--muted-foreground));
+    background-color: var(--color-muted-foreground);
   }
 
   body {
-    @apply bg-background text-foreground;
-    font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    @apply bg-background text-foreground font-sans;
   }
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+    font-family: var(--font-heading);
     font-weight: 700;
     letter-spacing: -0.02em;
   }
 }
 
-/* App Shell Grid Layout */
-.app-shell {
-  display: grid;
-  grid-template-columns: var(--sidebar-w) 1fr;
-  grid-template-rows: 56px 1fr;
-  height: 100vh;
-  overflow: hidden;
-  transition: grid-template-columns 200ms ease;
+/* ── Custom utilities ────────────────────────────────── */
+@utility btn-press {
+  @apply active:scale-[0.98] transition-transform;
 }
 
-.app-shell--collapsed {
-  grid-template-columns: 56px 1fr;
+@utility text-gradient-brand {
+  @apply bg-gradient-brand bg-clip-text text-transparent;
 }
 
-.topbar {
-  grid-column: 1 / -1;
-}
-
-.sidebar {
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.main-content {
-  min-height: 0;
-  min-width: 0;
-  overflow-y: auto;
-}
-
-/* Mobile: single column */
-@media (max-width: 767px) {
-  .app-shell {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Staggered fade-in for page sections */
-.fade-in {
-  animation: fadeIn 0.3s ease forwards;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-/* Animations */
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes slide-in-from-left {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
-}
-
-@keyframes slide-in-from-bottom {
-  from { opacity: 0; transform: translateY(16px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes scale-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-}
-
-@keyframes slideDown {
-  from { transform: translateY(-100%); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes slideInRight {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
-}
-
-@keyframes fadeInRight {
-  from { transform: translateX(30px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-@keyframes breatheGlow {
-  from { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(6, 182, 212, 0.04); }
-  to { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 30px rgba(6, 182, 212, 0.12); }
-}
-
-@keyframes bellWobble {
-  0% { transform: rotate(0deg); }
-  20% { transform: rotate(8deg); }
-  40% { transform: rotate(-6deg); }
-  60% { transform: rotate(4deg); }
-  80% { transform: rotate(-2deg); }
-  100% { transform: rotate(0deg); }
-}
-
-@layer utilities {
-  .animate-fade-in {
-    animation: fade-in 200ms ease-out;
-  }
-
-  .animate-fade-in-up {
-    animation: fade-in-up 200ms ease-out;
-  }
-
-  .animate-slide-in-left {
-    animation: slide-in-from-left 200ms ease-out;
-  }
-
-  .animate-slide-in-bottom {
-    animation: slide-in-from-bottom 200ms ease-out;
-  }
-
-  .animate-scale-in {
-    animation: scale-in 150ms ease-out;
-  }
-
-  /* Button press feedback */
-  .btn-press {
-    @apply active:scale-[0.98] transition-transform;
-  }
-
-  /* Brand gradient text */
-  .text-gradient-brand {
-    @apply bg-gradient-brand bg-clip-text text-transparent;
-  }
-
-  /* Glass card — interactive with hover lift */
-  .glass-card {
-    background: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border: 1px solid var(--glass-border);
-    border-radius: 16px;
-    box-shadow: var(--shadow-float);
-    transition: transform 200ms var(--ease-out-smooth),
-                border-color 200ms var(--ease-out-smooth),
-                box-shadow 200ms var(--ease-out-smooth);
-  }
-  .glass-card:hover {
+@utility glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-float);
+  transition:
+    transform 200ms var(--ease-out-smooth),
+    border-color 200ms var(--ease-out-smooth),
+    box-shadow 200ms var(--ease-out-smooth);
+  &:hover {
     transform: scale(1.02);
     border-color: var(--glass-border-hover);
     box-shadow: var(--shadow-float-hover);
   }
+}
 
-  /* Glass card — static, no hover transform */
-  .glass-card-static {
-    background: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border: 1px solid var(--glass-border);
-    border-radius: 16px;
-    box-shadow: var(--shadow-float);
+@utility glass-card-static {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-float);
+}
+
+@utility active-glow {
+  animation: breatheGlow 3s ease-in-out infinite alternate;
+}
+
+@utility rdp-custom {
+  @apply text-foreground;
+  & .rdp-month { @apply w-full; }
+  & .rdp-caption { @apply flex justify-center items-center mb-4; }
+  & .rdp-caption_label { @apply text-sm font-medium; }
+  & .rdp-nav { @apply flex gap-1; }
+  & .rdp-nav_button { @apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100; }
+  & .rdp-table { @apply w-full border-collapse; }
+  & .rdp-head_cell { @apply text-muted-foreground font-normal text-xs; }
+  & .rdp-cell { @apply text-center text-sm p-0; }
+  & .rdp-day { @apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors; }
+  & .rdp-day_selected { @apply bg-primary text-primary-foreground hover:bg-primary/90; }
+  & .rdp-day_today { @apply bg-accent text-accent-foreground; }
+  & .rdp-day_outside { @apply text-muted-foreground opacity-50; }
+  & .rdp-day_disabled { @apply text-muted-foreground opacity-50; }
+  & .rdp-day_range_middle { @apply bg-accent text-accent-foreground; }
+  & .rdp-day_hidden { @apply invisible; }
+}
+
+/* ── Layout utilities ────────────────────────────────── */
+@layer utilities {
+  .app-shell {
+    display: grid;
+    grid-template-columns: var(--sidebar-w) 1fr;
+    grid-template-rows: 56px 1fr;
+    height: 100vh;
+    overflow: hidden;
+    transition: grid-template-columns 200ms ease;
   }
 
-  /* Breathing glow for highlighted stat cards */
-  .active-glow {
-    animation: breatheGlow 3s ease-in-out infinite alternate;
+  .app-shell--collapsed {
+    grid-template-columns: 56px 1fr;
+  }
+
+  .topbar {
+    grid-column: 1 / -1;
+  }
+
+  .sidebar {
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .main-content {
+    min-height: 0;
+    min-width: 0;
+    overflow-y: auto;
+  }
+
+  @media (max-width: 767px) {
+    .app-shell {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* Staggered fade-in helper */
+  .fade-in {
+    animation: fadeIn 0.3s ease forwards;
   }
 }
 
-/* Sonner Toast Customization — outside @layer for higher specificity */
+/* ── Sonner toast overrides ──────────────────────────── */
 [data-sonner-toast] {
-  background-color: hsl(var(--card)) !important;
-  color: hsl(var(--card-foreground)) !important;
-  border: 1px solid hsl(var(--border)) !important;
+  background-color: var(--color-card) !important;
+  color: var(--color-card-foreground) !important;
+  border: 1px solid var(--color-border) !important;
   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
   border-radius: 0.75rem;
-  font-family: 'IBM Plex Sans', system-ui, sans-serif;
+  font-family: var(--font-sans);
 }
 
 [data-sonner-toast] [data-title] {
-  font-family: 'IBM Plex Sans', system-ui, sans-serif;
+  font-family: var(--font-sans);
   font-weight: 600;
 }
 
-[data-sonner-toast][data-type="success"] {
-  border-color: rgba(52, 211, 153, 0.3) !important;
+[data-sonner-toast][data-type='success'] {
+  border-color: oklch(0.76 0.15 163 / 0.3) !important;
 }
-[data-sonner-toast][data-type="success"] [data-icon] {
-  color: #34d399;
+[data-sonner-toast][data-type='success'] [data-icon] {
+  color: oklch(0.76 0.15 163);
 }
 
-[data-sonner-toast][data-type="error"] {
-  border-color: rgba(248, 113, 113, 0.3) !important;
+[data-sonner-toast][data-type='error'] {
+  border-color: oklch(0.7 0.16 22 / 0.3) !important;
 }
-[data-sonner-toast][data-type="error"] [data-icon] {
-  color: #f87171;
+[data-sonner-toast][data-type='error'] [data-icon] {
+  color: oklch(0.7 0.16 22);
 }
 
-[data-sonner-toast][data-type="info"] {
-  border-color: hsl(var(--border)) !important;
+[data-sonner-toast][data-type='info'] {
+  border-color: var(--color-border) !important;
 }
-[data-sonner-toast][data-type="info"] [data-icon] {
-  color: hsl(var(--muted-foreground));
+[data-sonner-toast][data-type='info'] [data-icon] {
+  color: var(--color-muted-foreground);
 }
 
-[data-sonner-toast][data-type="warning"] {
-  border-color: rgba(251, 191, 36, 0.3) !important;
+[data-sonner-toast][data-type='warning'] {
+  border-color: oklch(0.82 0.16 85 / 0.3) !important;
 }
-[data-sonner-toast][data-type="warning"] [data-icon] {
-  color: #fbbf24;
+[data-sonner-toast][data-type='warning'] [data-icon] {
+  color: oklch(0.82 0.16 85);
 }
 
 [data-sonner-toast] [data-close-button] {
-  color: hsl(var(--muted-foreground));
+  color: var(--color-muted-foreground);
   border-radius: 0.375rem;
   transition: color 150ms, background-color 150ms;
 }
 [data-sonner-toast] [data-close-button]:hover {
-  background-color: hsl(var(--accent));
-  color: hsl(var(--accent-foreground));
+  background-color: var(--color-accent);
+  color: var(--color-accent-foreground);
 }
 
-/* React Day Picker Customization */
-@layer components {
-  .rdp-custom {
-    @apply text-foreground;
-  }
-
-  .rdp-custom .rdp-month {
-    @apply w-full;
-  }
-
-  .rdp-custom .rdp-caption {
-    @apply flex justify-center items-center mb-4;
-  }
-
-  .rdp-custom .rdp-caption_label {
-    @apply text-sm font-medium;
-  }
-
-  .rdp-custom .rdp-nav {
-    @apply flex gap-1;
-  }
-
-  .rdp-custom .rdp-nav_button {
-    @apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100;
-  }
-
-  .rdp-custom .rdp-table {
-    @apply w-full border-collapse;
-  }
-
-  .rdp-custom .rdp-head_cell {
-    @apply text-muted-foreground font-normal text-xs;
-  }
-
-  .rdp-custom .rdp-cell {
-    @apply text-center text-sm p-0;
-  }
-
-  .rdp-custom .rdp-day {
-    @apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors;
-  }
-
-  .rdp-custom .rdp-day_selected {
-    @apply bg-primary text-primary-foreground hover:bg-primary/90;
-  }
-
-  .rdp-custom .rdp-day_today {
-    @apply bg-accent text-accent-foreground;
-  }
-
-  .rdp-custom .rdp-day_outside {
-    @apply text-muted-foreground opacity-50;
-  }
-
-  .rdp-custom .rdp-day_disabled {
-    @apply text-muted-foreground opacity-50;
-  }
-
-  .rdp-custom .rdp-day_range_middle {
-    @apply bg-accent text-accent-foreground;
-  }
-
-  .rdp-custom .rdp-day_hidden {
-    @apply invisible;
-  }
-}
-
-/* React Flow dark theme overrides */
+/* ── React Flow dark theme overrides ─────────────────── */
 .react-flow__background {
   background-color: transparent !important;
 }
 
 .react-flow__controls {
-  background-color: hsl(var(--card)) !important;
-  border: 1px solid hsl(var(--border)) !important;
+  background-color: var(--color-card) !important;
+  border: 1px solid var(--color-border) !important;
   border-radius: 0.75rem !important;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
   overflow: hidden;
 }
 
 .react-flow__controls-button {
-  background-color: hsl(var(--card)) !important;
-  border-color: hsl(var(--border)) !important;
-  fill: hsl(var(--muted-foreground)) !important;
-  color: hsl(var(--muted-foreground)) !important;
+  background-color: var(--color-card) !important;
+  border-color: var(--color-border) !important;
+  fill: var(--color-muted-foreground) !important;
+  color: var(--color-muted-foreground) !important;
 }
 
 .react-flow__controls-button:hover {
-  background-color: hsl(var(--accent)) !important;
-  fill: hsl(var(--foreground)) !important;
+  background-color: var(--color-accent) !important;
+  fill: var(--color-foreground) !important;
 }
 
 .react-flow__controls-button svg {
@@ -401,34 +393,32 @@
 }
 
 .react-flow__minimap {
-  background-color: hsl(var(--card)) !important;
-  border: 1px solid hsl(var(--border)) !important;
+  background-color: var(--color-card) !important;
+  border: 1px solid var(--color-border) !important;
   border-radius: 0.75rem !important;
 }
 
 .react-flow__edge-path {
-  stroke: hsl(var(--border));
+  stroke: var(--color-border);
 }
 
 .react-flow__edge-text {
-  fill: hsl(var(--muted-foreground));
+  fill: var(--color-muted-foreground);
 }
 
 .react-flow__edge-textbg {
-  fill: hsl(var(--card));
+  fill: var(--color-card);
 }
 
-/* Hide default React Flow attribution */
 .react-flow__attribution {
   display: none;
 }
 
-/* Handle styles */
 .react-flow__handle {
-  background-color: hsl(var(--border));
+  background-color: var(--color-border);
 }
 
-/* Accessibility: Reduce motion for users who prefer it */
+/* ── Accessibility: Reduce motion ────────────────────── */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx
index d84514ea..156a9c6e 100644
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -189,7 +189,7 @@ export function AccountSettingsPage() {
                     className={cn(
                       'flex-1 rounded-md border border-border bg-card px-3 py-2',
                       'text-foreground placeholder:text-muted-foreground',
-                      'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                      'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                     )}
                     autoFocus
                     onKeyDown={(e) => {
@@ -367,7 +367,7 @@ export function AccountSettingsPage() {
                           }}
                           className={cn(
                             'rounded-md border border-border bg-card px-2 py-0.5 text-xs',
-                            'text-foreground focus:border-primary focus:outline-none'
+                            'text-foreground focus:border-primary focus:outline-hidden'
                           )}
                         >
                           <option value="engineer">engineer</option>
@@ -415,7 +415,7 @@ export function AccountSettingsPage() {
                   className={cn(
                     'flex-1 rounded-md border border-border bg-card px-3 py-2',
                     'text-foreground placeholder:text-muted-foreground',
-                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                    'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 />
                 <select
@@ -423,7 +423,7 @@ export function AccountSettingsPage() {
                   onChange={(e) => setInviteRole(e.target.value)}
                   className={cn(
                     'rounded-md border border-border bg-card px-3 py-2',
-                    'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                    'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 >
                   <option value="engineer">Engineer</option>
@@ -609,7 +609,7 @@ export function AccountSettingsPage() {
               className={cn(
                 'mt-2 block w-full max-w-xs rounded-xl border border-border bg-card px-3 py-2',
                 'text-sm text-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             >
               <option value="markdown">Markdown (.md)</option>
diff --git a/frontend/src/pages/AssistantChatPage.tsx b/frontend/src/pages/AssistantChatPage.tsx
index dacec1fa..718c0182 100644
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -223,7 +223,7 @@ export default function AssistantChatPage() {
                   <div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center">
                     <Sparkles size={14} className="text-primary" />
                   </div>
-                  <div className="bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] rounded-2xl px-4 py-3">
+                  <div className="bg-[rgba(255,255,255,0.04)] border border-brand-border rounded-2xl px-4 py-3">
                     <Loader2 size={16} className="animate-spin text-primary" />
                   </div>
                 </div>
@@ -242,7 +242,7 @@ export default function AssistantChatPage() {
                     onKeyDown={handleKeyDown}
                     placeholder="Ask about IT, networking, troubleshooting..."
                     rows={3}
-                    className="flex-1 resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+                    className="flex-1 resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
                     style={{ borderColor: 'var(--glass-border)' }}
                     disabled={loading}
                   />
@@ -250,7 +250,7 @@ export default function AssistantChatPage() {
                     <button
                       onClick={handleSend}
                       disabled={!input.trim() || loading}
-                      className="bg-gradient-brand text-[#101114] p-3 rounded-xl hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40"
+                      className="bg-gradient-brand text-brand-dark p-3 rounded-xl hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40"
                       title="Send message"
                     >
                       <Send size={18} />
@@ -286,7 +286,7 @@ export default function AssistantChatPage() {
             </p>
             <button
               onClick={handleNewChat}
-              className="bg-gradient-brand text-[#101114] font-semibold text-sm rounded-[10px] px-6 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all"
+              className="bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-6 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all"
             >
               Start a Conversation
             </button>
diff --git a/frontend/src/pages/ChangePasswordPage.tsx b/frontend/src/pages/ChangePasswordPage.tsx
index cc711bff..f72cefdc 100644
--- a/frontend/src/pages/ChangePasswordPage.tsx
+++ b/frontend/src/pages/ChangePasswordPage.tsx
@@ -97,7 +97,7 @@ export function ChangePasswordPage() {
                 className={cn(
                   'block w-full rounded-xl border border-border bg-card px-3 py-2',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
               />
@@ -116,7 +116,7 @@ export function ChangePasswordPage() {
                 className={cn(
                   'block w-full rounded-xl border border-border bg-card px-3 py-2',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="At least 10 characters"
@@ -139,7 +139,7 @@ export function ChangePasswordPage() {
                 className={cn(
                   'block w-full rounded-xl border border-border bg-card px-3 py-2',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
               />
@@ -151,7 +151,7 @@ export function ChangePasswordPage() {
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
                 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
-                'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
+                'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}
diff --git a/frontend/src/pages/FeedbackPage.tsx b/frontend/src/pages/FeedbackPage.tsx
index b1f1ff63..385b17b7 100644
--- a/frontend/src/pages/FeedbackPage.tsx
+++ b/frontend/src/pages/FeedbackPage.tsx
@@ -171,7 +171,7 @@ export function FeedbackPage() {
                 onChange={e => setEmail(e.target.value)}
                 placeholder="your@email.com"
                 required
-                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-none"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden"
               />
               <p className="mt-1 text-xs text-muted-foreground">We'll reply to this address if we need more details.</p>
             </div>
@@ -193,7 +193,7 @@ export function FeedbackPage() {
                   onClick={() => setTypeDropdownOpen(!typeDropdownOpen)}
                   onKeyDown={handleDropdownKeyDown}
                   className={cn(
-                    "w-full rounded-lg border border-border bg-card px-3 py-2 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-none",
+                    "w-full rounded-lg border border-border bg-card px-3 py-2 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden",
                     feedbackType ? "text-foreground" : "text-muted-foreground"
                   )}
                 >
@@ -244,7 +244,7 @@ export function FeedbackPage() {
                 required
                 minLength={10}
                 rows={6}
-                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-none resize-y"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden resize-y"
               />
               <p className="mt-1 text-xs text-muted-foreground">
                 {message.trim().length < 10
diff --git a/frontend/src/pages/ForgotPasswordPage.tsx b/frontend/src/pages/ForgotPasswordPage.tsx
index f4413ccb..62058a8f 100644
--- a/frontend/src/pages/ForgotPasswordPage.tsx
+++ b/frontend/src/pages/ForgotPasswordPage.tsx
@@ -75,7 +75,7 @@ export function ForgotPasswordPage() {
                   className={cn(
                     'block w-full rounded-xl border border-border bg-card px-3 py-2',
                     'text-foreground placeholder:text-muted-foreground',
-                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                    'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
                   placeholder="you@example.com"
@@ -88,7 +88,7 @@ export function ForgotPasswordPage() {
                 className={cn(
                   'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
                   'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
-                  'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
+                  'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
                   'disabled:cursor-not-allowed disabled:opacity-50',
                   'transition-all'
                 )}
diff --git a/frontend/src/pages/GuideDetailPage.tsx b/frontend/src/pages/GuideDetailPage.tsx
index 3454a50e..95e7c84d 100644
--- a/frontend/src/pages/GuideDetailPage.tsx
+++ b/frontend/src/pages/GuideDetailPage.tsx
@@ -14,7 +14,7 @@ export default function GuideDetailPage() {
         <p className="text-sm text-muted-foreground mb-4">The guide you're looking for doesn't exist.</p>
         <Link
           to="/guides"
-          className="bg-gradient-brand text-[#101114] font-semibold text-sm rounded-[10px] px-5 py-2 hover:opacity-90 active:scale-[0.97] transition-all"
+          className="bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-5 py-2 hover:opacity-90 active:scale-[0.97] transition-all"
         >
           Back to Guides
         </Link>
@@ -47,10 +47,10 @@ export default function GuideDetailPage() {
           </div>
         </div>
         <div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: 'var(--glass-border)' }}>
-          <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+          <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
             {guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
           </span>
-          <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+          <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
             {guide.sections.reduce((acc, s) => acc + s.steps.length, 0)} steps
           </span>
         </div>
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 7db69370..0ec2b34f 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -106,7 +106,7 @@ export function LoginPage() {
                 className={cn(
                   'block w-full rounded-[10px] border border-border bg-card px-3 py-2.5',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20',
+                  'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="you@example.com"
@@ -127,7 +127,7 @@ export function LoginPage() {
                 className={cn(
                   'block w-full rounded-[10px] border border-border bg-card px-3 py-2.5',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20',
+                  'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="••••••••••"
@@ -145,8 +145,8 @@ export function LoginPage() {
               disabled={isLoading}
               className={cn(
                 'w-full rounded-[10px] px-4 py-2.5 text-sm font-semibold',
-                'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97]',
-                'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
+                'bg-gradient-brand text-brand-dark shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97]',
+                'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}
diff --git a/frontend/src/pages/MyAnalyticsPage.tsx b/frontend/src/pages/MyAnalyticsPage.tsx
index 47cfa700..28460d55 100644
--- a/frontend/src/pages/MyAnalyticsPage.tsx
+++ b/frontend/src/pages/MyAnalyticsPage.tsx
@@ -90,7 +90,7 @@ export default function MyAnalyticsPage() {
           <select
             value={period}
             onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
-            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           >
             {PERIOD_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>
@@ -134,31 +134,31 @@ export default function MyAnalyticsPage() {
           <AreaChart data={time_series}>
             <CartesianGrid
               strokeDasharray="3 3"
-              stroke="hsl(var(--border))"
+              stroke="var(--color-border)"
               vertical={false}
             />
             <XAxis
               dataKey="date"
-              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
               tickLine={false}
-              axisLine={{ stroke: 'hsl(var(--border))' }}
+              axisLine={{ stroke: 'var(--color-border)' }}
               tickFormatter={(value: string) => {
                 const d = new Date(value)
                 return `${d.getMonth() + 1}/${d.getDate()}`
               }}
             />
             <YAxis
-              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
               tickLine={false}
               axisLine={false}
               allowDecimals={false}
             />
             <Tooltip
               contentStyle={{
-                backgroundColor: 'hsl(var(--card))',
-                border: '1px solid hsl(var(--border))',
+                backgroundColor: 'var(--color-card)',
+                border: '1px solid var(--color-border)',
                 borderRadius: '8px',
-                color: 'hsl(var(--foreground))',
+                color: 'var(--color-foreground)',
                 fontSize: '13px',
               }}
               labelFormatter={(value) => {
@@ -298,7 +298,7 @@ export default function MyAnalyticsPage() {
                     <div className="flex items-center justify-between mb-1">
                       <div className="flex items-center gap-2">
                         <div
-                          className="h-2.5 w-2.5 rounded-full flex-shrink-0"
+                          className="h-2.5 w-2.5 rounded-full shrink-0"
                           style={{
                             backgroundColor:
                               OUTCOME_COLORS[outcome] ?? '#94a3b8',
diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx
index 9b5efbc0..38e6df6f 100644
--- a/frontend/src/pages/MyTreesPage.tsx
+++ b/frontend/src/pages/MyTreesPage.tsx
@@ -136,7 +136,7 @@ export function MyTreesPage() {
             {showCreateMenu && (
               <>
                 <div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
-                <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-sm">
+                <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-xs">
                   <Link
                     to="/trees/new"
                     onClick={() => setShowCreateMenu(false)}
diff --git a/frontend/src/pages/ProceduralEditorPage.tsx b/frontend/src/pages/ProceduralEditorPage.tsx
index 7a87c3cb..5419b0ce 100644
--- a/frontend/src/pages/ProceduralEditorPage.tsx
+++ b/frontend/src/pages/ProceduralEditorPage.tsx
@@ -255,7 +255,7 @@ export function ProceduralEditorPage() {
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 placeholder="e.g. Domain Controller Build"
-                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
@@ -266,7 +266,7 @@ export function ProceduralEditorPage() {
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder="Brief description of this procedure..."
                 rows={2}
-                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
diff --git a/frontend/src/pages/ProceduralNavigationPage.tsx b/frontend/src/pages/ProceduralNavigationPage.tsx
index f89cc4ab..3a3e786f 100644
--- a/frontend/src/pages/ProceduralNavigationPage.tsx
+++ b/frontend/src/pages/ProceduralNavigationPage.tsx
@@ -671,10 +671,10 @@ export function ProceduralNavigationPage() {
       {paramsOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">
           <div
-            className="absolute inset-0 bg-background/60 backdrop-blur-sm"
+            className="absolute inset-0 bg-background/60 backdrop-blur-xs"
             onClick={() => setParamsOpen(false)}
           />
-          <div className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl backdrop-blur-sm">
+          <div className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl backdrop-blur-xs">
             <div className="flex items-center justify-between border-b border-border px-5 py-4">
               <h3 className="text-sm font-semibold text-foreground">Project Parameters</h3>
               <button
diff --git a/frontend/src/pages/QuickStartPage.tsx b/frontend/src/pages/QuickStartPage.tsx
index 999ae934..c90a4b9b 100644
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -316,7 +316,7 @@ export function QuickStartPage() {
                 className={cn('glass-card p-4 flex flex-col justify-between fade-in', stat.glow && 'active-glow')}
                 style={{ animationDelay: `${500 + i * 70}ms` }}
               >
-                <p className="font-label text-[0.625rem] font-medium uppercase tracking-[0.1em] text-muted-foreground">
+                <p className="font-label text-[0.625rem] font-medium uppercase tracking-widest text-muted-foreground">
                   {stat.label}
                 </p>
                 <p className={cn('font-heading text-2xl font-extrabold tracking-tight', stat.gradient && 'text-gradient-brand')}>
@@ -343,7 +343,7 @@ export function QuickStartPage() {
             onChange={(e) => setQuery(e.target.value)}
             onFocus={() => query.length >= 2 && setShowResults(true)}
             placeholder="Search flows, sessions, tags…"
-            className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
           {showResults && (
             <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
@@ -566,7 +566,7 @@ export function QuickStartPage() {
                         const val = e.target.value
                         setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
                       }}
-                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
+                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-hidden"
                     >
                       {pageSizeOptions.map((opt) => (
                         <option key={String(opt)} value={String(opt)}>
@@ -587,7 +587,7 @@ export function QuickStartPage() {
                         const val = e.target.value
                         setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
                       }}
-                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
+                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-hidden"
                     >
                       {pageSizeOptions.map((opt) => (
                         <option key={String(opt)} value={String(opt)}>
@@ -605,7 +605,7 @@ export function QuickStartPage() {
 
       {/* Fork Modal */}
       {forkTarget && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-xs">
           <div className="w-full max-w-sm rounded-xl border border-border bg-card p-5 shadow-xl">
             <h3 className="mb-1 text-sm font-semibold text-foreground">Fork this flow?</h3>
             <p className="mb-4 text-xs text-muted-foreground">
@@ -620,7 +620,7 @@ export function QuickStartPage() {
               onChange={(e) => setForkReason(e.target.value)}
               placeholder="e.g. Adding Cisco Meraki steps for our network"
               maxLength={255}
-              className="mb-4 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="mb-4 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               onKeyDown={(e) => e.key === 'Enter' && handleFork()}
             />
             <div className="flex gap-2">
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 263a2c96..7b2eae0f 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -123,7 +123,7 @@ export function RegisterPage() {
                 className={cn(
                   'mt-1 block w-full rounded-xl border bg-card px-3 py-2 font-mono tracking-wider',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:outline-none focus:ring-1',
+                  'focus:outline-hidden focus:ring-1',
                   inviteCodeStatus === 'valid' && 'border-emerald-400/50 focus:border-emerald-400 focus:ring-emerald-400/30',
                   inviteCodeStatus === 'invalid' && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/30',
                   inviteCodeStatus === 'idle' && 'border-border focus:border-primary focus:ring-primary/20',
@@ -157,7 +157,7 @@ export function RegisterPage() {
                 className={cn(
                   'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="John Smith"
               />
@@ -178,7 +178,7 @@ export function RegisterPage() {
                 className={cn(
                   'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="you@example.com"
               />
@@ -198,7 +198,7 @@ export function RegisterPage() {
                 className={cn(
                   'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="••••••••••"
               />
@@ -221,7 +221,7 @@ export function RegisterPage() {
                 className={cn(
                   'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                  'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="••••••••••"
               />
@@ -233,7 +233,7 @@ export function RegisterPage() {
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
                 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
-                'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
+                'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}
diff --git a/frontend/src/pages/ResetPasswordPage.tsx b/frontend/src/pages/ResetPasswordPage.tsx
index b083d4aa..afeb563b 100644
--- a/frontend/src/pages/ResetPasswordPage.tsx
+++ b/frontend/src/pages/ResetPasswordPage.tsx
@@ -133,7 +133,7 @@ export function ResetPasswordPage() {
                   className={cn(
                     'block w-full rounded-xl border border-border bg-card px-3 py-2',
                     'text-foreground placeholder:text-muted-foreground',
-                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                    'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
                   placeholder="At least 10 characters"
@@ -156,7 +156,7 @@ export function ResetPasswordPage() {
                   className={cn(
                     'block w-full rounded-xl border border-border bg-card px-3 py-2',
                     'text-foreground placeholder:text-muted-foreground',
-                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                    'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
                 />
@@ -168,7 +168,7 @@ export function ResetPasswordPage() {
                 className={cn(
                   'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
                   'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
-                  'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
+                  'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                   'disabled:cursor-not-allowed disabled:opacity-50',
                   'transition-all'
                 )}
diff --git a/frontend/src/pages/SessionDetailPage.tsx b/frontend/src/pages/SessionDetailPage.tsx
index 00adc888..0c1a6074 100644
--- a/frontend/src/pages/SessionDetailPage.tsx
+++ b/frontend/src/pages/SessionDetailPage.tsx
@@ -425,7 +425,7 @@ export function SessionDetailPage() {
           value={exportFormat}
           onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
           aria-label="Export format"
-          className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+          className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           <option value="markdown">Markdown</option>
           <option value="text">Plain Text</option>
@@ -437,7 +437,7 @@ export function SessionDetailPage() {
             value={maxStepIndex ?? ''}
             onChange={(e) => setMaxStepIndex(e.target.value ? Number(e.target.value) : null)}
             aria-label="Export through step"
-            className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All steps</option>
             {session.decisions.map((_, idx) => (
@@ -449,7 +449,7 @@ export function SessionDetailPage() {
           value={detailLevel}
           onChange={(e) => setDetailLevel(e.target.value as 'standard' | 'full')}
           aria-label="Detail level"
-          className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+          className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           <option value="standard">Standard</option>
           <option value="full">Full Detail</option>
diff --git a/frontend/src/pages/StepLibraryPage.tsx b/frontend/src/pages/StepLibraryPage.tsx
index 5a58fe36..b1ca8970 100644
--- a/frontend/src/pages/StepLibraryPage.tsx
+++ b/frontend/src/pages/StepLibraryPage.tsx
@@ -130,7 +130,7 @@ export default function StepLibraryPage() {
 
       {/* Delete Confirmation Dialog */}
       {deletingStep && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs p-4">
           <div className="w-full max-w-sm rounded-xl bg-card border border-border p-6 shadow-lg">
             <div className="mb-4 flex items-center gap-3">
               <div className="rounded-full bg-red-400/10 p-2">
diff --git a/frontend/src/pages/SurveyPage.tsx b/frontend/src/pages/SurveyPage.tsx
index bc25bd2c..d70165d5 100644
--- a/frontend/src/pages/SurveyPage.tsx
+++ b/frontend/src/pages/SurveyPage.tsx
@@ -329,7 +329,7 @@ export default function SurveyPage() {
             <span className="hidden sm:inline">Resolution<span className="text-gradient-brand">Flow</span></span>
           </a>
           <div className="flex flex-1 items-center gap-2 sm:gap-2.5" style={{ maxWidth: '280px' }}>
-            <div className="flex-1 h-[3px] rounded-full overflow-hidden" style={{ background: 'hsl(var(--border))' }}>
+            <div className="flex-1 h-[3px] rounded-full overflow-hidden" style={{ background: 'var(--color-border)' }}>
               <div className="h-full rounded-full bg-gradient-brand transition-[width] duration-500" style={{ width: `${progressPct}%` }} />
             </div>
             <span className="text-[11px] font-label text-muted-foreground whitespace-nowrap tabular-nums">{answeredCount}/{TOTAL_QUESTIONS}</span>
@@ -376,7 +376,7 @@ export default function SurveyPage() {
                 key={i}
                 className="flex-1 h-1 sm:h-[3px] rounded-full transition-colors duration-300"
                 style={{
-                  background: i < currentSlide ? '#34d399' : i === currentSlide ? 'linear-gradient(90deg, #06b6d4, #22d3ee)' : 'hsl(var(--border))',
+                  background: i < currentSlide ? '#34d399' : i === currentSlide ? 'linear-gradient(90deg, #06b6d4, #22d3ee)' : 'var(--color-border)',
                 }}
               />
             ))}
@@ -399,12 +399,12 @@ export default function SurveyPage() {
                   </button>
                 ) : <div />}
                 {si < SLIDES.length - 1 ? (
-                  <button onClick={() => goSlide(si + 1)} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-[10px] text-sm font-semibold bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20 transition-all duration-150 hover:opacity-90 active:scale-[0.97]">
+                  <button onClick={() => goSlide(si + 1)} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-[10px] text-sm font-semibold bg-gradient-brand text-brand-dark shadow-lg shadow-primary/20 transition-all duration-150 hover:opacity-90 active:scale-[0.97]">
                     Next
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
                   </button>
                 ) : (
-                  <button onClick={handleSubmit} disabled={isSubmitting} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-[10px] text-sm font-semibold bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20 transition-all duration-150 hover:opacity-90 active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed">
+                  <button onClick={handleSubmit} disabled={isSubmitting} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-[10px] text-sm font-semibold bg-gradient-brand text-brand-dark shadow-lg shadow-primary/20 transition-all duration-150 hover:opacity-90 active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed">
                     {isSubmitting ? 'Submitting...' : 'Submit'}
                     {!isSubmitting && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5"/></svg>}
                   </button>
@@ -433,7 +433,7 @@ export default function SurveyPage() {
 
             {/* Email a copy */}
             <div className="glass-card-static p-4 sm:p-6 max-w-[420px] mx-auto mb-5">
-              <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
+              <p className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-3">
                 Email a copy to yourself
               </p>
               {!emailSent ? (
@@ -443,7 +443,7 @@ export default function SurveyPage() {
                     value={emailInput}
                     onChange={e => setEmailInput(e.target.value)}
                     placeholder="your@email.com"
-                    className="flex-1 rounded-[9px] px-3.5 py-2.5 text-sm text-foreground placeholder:text-[#5a6170] focus:outline-none"
+                    className="flex-1 rounded-[9px] px-3.5 py-2.5 text-sm text-foreground placeholder:text-brand-text-muted focus:outline-hidden"
                     style={{ background: 'rgba(16, 17, 20, 0.6)', border: '1px solid var(--glass-border)' }}
                     onFocus={e => { e.currentTarget.style.borderColor = 'rgba(6, 182, 212, 0.4)' }}
                     onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)' }}
@@ -473,7 +473,7 @@ export default function SurveyPage() {
                       }
                     }}
                     disabled={!emailInput.trim() || emailSending}
-                    className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-[9px] text-sm font-semibold bg-gradient-brand text-[#101114] transition-all duration-150 hover:opacity-90 active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed whitespace-nowrap"
+                    className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-[9px] text-sm font-semibold bg-gradient-brand text-brand-dark transition-all duration-150 hover:opacity-90 active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed whitespace-nowrap"
                   >
                     {emailSending ? (
                       <>
@@ -502,7 +502,7 @@ export default function SurveyPage() {
               </button>
               <button
                 onClick={() => navigate('/survey/thank-you')}
-                className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 rounded-[10px] text-sm font-semibold bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20 transition-all duration-150 hover:opacity-90 active:scale-[0.97]"
+                className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 rounded-[10px] text-sm font-semibold bg-gradient-brand text-brand-dark shadow-lg shadow-primary/20 transition-all duration-150 hover:opacity-90 active:scale-[0.97]"
               >
                 Finish
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
@@ -535,7 +535,7 @@ function ScenarioBox({ scenario }: { scenario: { title: string; symptom: string;
 
 function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQuestion; answer?: string | string[]; setAnswer: (id: string, val: string | string[]) => void }) {
   return (
-    <div className="glass-card-static p-4 sm:p-7 mb-3 sm:mb-4 transition-[border-color] duration-200 focus-within:!border-[rgba(6,182,212,0.25)]">
+    <div className="glass-card-static p-4 sm:p-7 mb-3 sm:mb-4 transition-[border-color] duration-200 focus-within:border-[rgba(6,182,212,0.25)]!">
       <div className="font-label text-[11px] mb-1.5 font-medium" style={{ color: '#06b6d4' }}>Q{q.num}</div>
       <div className="font-heading text-[14px] sm:text-[15px] font-semibold text-foreground leading-snug mb-1">{q.text}</div>
       {q.hint && <div className="text-[12px] text-muted-foreground mb-3 sm:mb-4 leading-snug">{q.hint}</div>}
@@ -551,10 +551,10 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
               style={{
                 background: answer === opt ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
                 border: `1px solid ${answer === opt ? '#06b6d4' : 'var(--glass-border)'}`,
-                color: answer === opt ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
+                color: answer === opt ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
               }}
             >
-              <div className="w-[18px] h-[18px] rounded-full flex-shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? '#06b6d4' : 'var(--glass-border)'}` }}>
+              <div className="w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? '#06b6d4' : 'var(--glass-border)'}` }}>
                 {answer === opt && <div className="w-2 h-2 rounded-full" style={{ background: '#06b6d4' }} />}
               </div>
               <span className="leading-snug">{opt}</span>
@@ -578,10 +578,10 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
                 style={{
                   background: selected ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
                   border: `1px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`,
-                  color: selected ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
+                  color: selected ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
                 }}
               >
-                <div className="w-[18px] h-[18px] rounded-[5px] flex-shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`, background: selected ? '#06b6d4' : 'transparent', color: selected ? 'white' : 'transparent' }}>
+                <div className="w-[18px] h-[18px] rounded-[5px] shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`, background: selected ? '#06b6d4' : 'transparent', color: selected ? 'white' : 'transparent' }}>
                   {'\u2713'}
                 </div>
                 <span className="leading-snug">{opt}</span>
@@ -600,7 +600,7 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
           value={(answer as string) || ''}
           onChange={e => setAnswer(q.id, e.target.value)}
           placeholder="Type your answer here..."
-          className="w-full min-h-[100px] rounded-[9px] p-3 sm:p-3.5 text-[13px] sm:text-sm text-foreground leading-relaxed resize-y transition-all duration-200 placeholder:text-[#5a6170] focus:outline-none"
+          className="w-full min-h-[100px] rounded-[9px] p-3 sm:p-3.5 text-[13px] sm:text-sm text-foreground leading-relaxed resize-y transition-all duration-200 placeholder:text-brand-text-muted focus:outline-hidden"
           style={{
             background: 'rgba(16, 17, 20, 0.6)',
             border: '1px solid var(--glass-border)',
@@ -633,7 +633,7 @@ function RangeInput({ question: q, value, onChange }: { question: SurveyQuestion
         onChange={e => onChange(e.target.value + (q.suffix || ''))}
         className="w-full h-2 sm:h-1 rounded-full appearance-none cursor-pointer touch-none"
         style={{
-          background: `linear-gradient(to right, #06b6d4 0%, #06b6d4 ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, hsl(var(--border)) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, hsl(var(--border)) 100%)`,
+          background: `linear-gradient(to right, #06b6d4 0%, #06b6d4 ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) 100%)`,
         }}
       />
       <div className="flex justify-between text-[11px] text-muted-foreground mt-2.5">
@@ -733,13 +733,13 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
             border: `1px solid ${overIdx === idx || draggingIdx === idx ? '#06b6d4' : 'var(--glass-border)'}`,
             opacity: draggingIdx === idx ? 0.5 : 1,
             cursor: 'grab',
-            color: 'hsl(var(--muted-foreground))',
+            color: 'var(--color-muted-foreground)',
           }}
         >
-          <div className="flex-shrink-0 text-[#5a6170]">
+          <div className="shrink-0 text-brand-text-muted">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="6" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="18" r="1"/></svg>
           </div>
-          <div className="font-label text-[11px] font-semibold w-5 text-center flex-shrink-0" style={{ color: '#06b6d4' }}>{idx + 1}</div>
+          <div className="font-label text-[11px] font-semibold w-5 text-center shrink-0" style={{ color: '#06b6d4' }}>{idx + 1}</div>
           <div className="flex-1 leading-snug">{item}</div>
         </div>
       ))}
diff --git a/frontend/src/pages/SurveyThankYouPage.tsx b/frontend/src/pages/SurveyThankYouPage.tsx
index a94c6ae0..49398454 100644
--- a/frontend/src/pages/SurveyThankYouPage.tsx
+++ b/frontend/src/pages/SurveyThankYouPage.tsx
@@ -55,7 +55,7 @@ export default function SurveyThankYouPage() {
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" strokeWidth="2">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
               </svg>
-              <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-primary font-semibold">
+              <span className="font-label text-[0.625rem] uppercase tracking-widest text-primary font-semibold">
                 Have Feedback?
               </span>
             </div>
diff --git a/frontend/src/pages/TeamAnalyticsPage.tsx b/frontend/src/pages/TeamAnalyticsPage.tsx
index 533d4809..48fa4c32 100644
--- a/frontend/src/pages/TeamAnalyticsPage.tsx
+++ b/frontend/src/pages/TeamAnalyticsPage.tsx
@@ -100,7 +100,7 @@ export default function TeamAnalyticsPage() {
           <select
             value={period}
             onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
-            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           >
             {PERIOD_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>
@@ -144,31 +144,31 @@ export default function TeamAnalyticsPage() {
           <AreaChart data={time_series}>
             <CartesianGrid
               strokeDasharray="3 3"
-              stroke="hsl(var(--border))"
+              stroke="var(--color-border)"
               vertical={false}
             />
             <XAxis
               dataKey="date"
-              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
               tickLine={false}
-              axisLine={{ stroke: 'hsl(var(--border))' }}
+              axisLine={{ stroke: 'var(--color-border)' }}
               tickFormatter={(value: string) => {
                 const d = new Date(value)
                 return `${d.getMonth() + 1}/${d.getDate()}`
               }}
             />
             <YAxis
-              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
               tickLine={false}
               axisLine={false}
               allowDecimals={false}
             />
             <Tooltip
               contentStyle={{
-                backgroundColor: 'hsl(var(--card))',
-                border: '1px solid hsl(var(--border))',
+                backgroundColor: 'var(--color-card)',
+                border: '1px solid var(--color-border)',
                 borderRadius: '8px',
-                color: 'hsl(var(--foreground))',
+                color: 'var(--color-foreground)',
                 fontSize: '13px',
               }}
               labelFormatter={(value) => {
diff --git a/frontend/src/pages/TreeEditorPage.tsx b/frontend/src/pages/TreeEditorPage.tsx
index 7d35c150..344a5284 100644
--- a/frontend/src/pages/TreeEditorPage.tsx
+++ b/frontend/src/pages/TreeEditorPage.tsx
@@ -528,7 +528,7 @@ export function TreeEditorPage() {
 
       {/* Draft Restore Prompt */}
       {showDraftPrompt && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
           <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
             <h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Restore Draft?</h2>
             <p className="mb-4 text-sm text-muted-foreground">
@@ -560,7 +560,7 @@ export function TreeEditorPage() {
 
       {/* Unsaved Changes Dialog */}
       {blocker.state === 'blocked' && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
           <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
             <h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Unsaved Changes</h2>
             <p className="mb-4 text-sm text-muted-foreground">
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 174b6a01..aed0be7d 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -312,7 +312,7 @@ export function TreeLibraryPage() {
                   className={cn(
                     'flex-1 rounded-md border border-border bg-card px-3 py-2',
                     'text-foreground placeholder:text-muted-foreground',
-                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                    'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 />
                 <button
@@ -332,7 +332,7 @@ export function TreeLibraryPage() {
                 aria-label="Filter by category"
                 className={cn(
                   'rounded-md border border-border bg-card px-3 py-2',
-                  'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                  'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
               >
                 <option value="">All Categories</option>
diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index 3b3b1704..1de7c257 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -579,7 +579,7 @@ export function TreeNavigationPage() {
               className={cn(
                 'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
                 'text-foreground placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -596,7 +596,7 @@ export function TreeNavigationPage() {
               className={cn(
                 'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
                 'text-foreground placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -761,7 +761,7 @@ export function TreeNavigationPage() {
       </div>
 
       {/* Current Node */}
-      <div className="bg-card border border-border rounded-xl p-6 shadow-sm">
+      <div className="bg-card border border-border rounded-xl p-6 shadow-xs">
         {/* Answer placeholder guard */}
         {currentNode && currentNode.type === 'answer' && (
           <div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-6 text-center">
@@ -829,7 +829,7 @@ export function TreeNavigationPage() {
                         'flex items-center gap-3'
                       )}
                     >
-                      <span className="flex-shrink-0 rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
+                      <span className="shrink-0 rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
                         Custom
                       </span>
                       <span>{cs.step_data.title}</span>
@@ -922,7 +922,7 @@ export function TreeNavigationPage() {
                         className={cn(
                           'block w-full rounded-md border border-border bg-accent px-3 py-2',
                           'font-mono text-sm text-foreground placeholder:text-muted-foreground',
-                          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                          'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                         )}
                       />
                       <p className="mt-1 text-right text-xs text-muted-foreground">
@@ -949,7 +949,7 @@ export function TreeNavigationPage() {
                     )}
                   >
                     <span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
-                    <ArrowRight className="h-4 w-4 flex-shrink-0" />
+                    <ArrowRight className="h-4 w-4 shrink-0" />
                   </button>
                 </div>
               )
@@ -1046,7 +1046,7 @@ export function TreeNavigationPage() {
                         className={cn(
                           'block w-full rounded-md border border-border bg-accent px-3 py-2',
                           'font-mono text-sm text-foreground placeholder:text-muted-foreground',
-                          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                          'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                         )}
                       />
                       <p className="mt-1 text-right text-xs text-muted-foreground">
@@ -1136,7 +1136,7 @@ export function TreeNavigationPage() {
             className={cn(
               'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
               'text-foreground placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
diff --git a/frontend/src/pages/VerifyEmailPage.tsx b/frontend/src/pages/VerifyEmailPage.tsx
index 2a9973bf..eb6e5ebb 100644
--- a/frontend/src/pages/VerifyEmailPage.tsx
+++ b/frontend/src/pages/VerifyEmailPage.tsx
@@ -39,7 +39,7 @@ export function VerifyEmailPage() {
             <Link
               to="/"
               className={cn(
-                'mt-6 inline-flex items-center rounded-[10px] bg-gradient-brand px-6 py-2 text-sm font-semibold text-[#101114]',
+                'mt-6 inline-flex items-center rounded-[10px] bg-gradient-brand px-6 py-2 text-sm font-semibold text-brand-dark',
                 'shadow-lg shadow-primary/20 hover:opacity-90'
               )}
             >
@@ -55,7 +55,7 @@ export function VerifyEmailPage() {
             <Link
               to="/"
               className={cn(
-                'mt-6 inline-flex items-center rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-6 py-2 text-sm font-medium text-foreground',
+                'mt-6 inline-flex items-center rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-brand-border px-6 py-2 text-sm font-medium text-foreground',
                 'hover:border-[rgba(255,255,255,0.12)]'
               )}
             >
diff --git a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
index 49bdd9ff..83e3cd53 100644
--- a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
+++ b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
@@ -64,7 +64,7 @@ export default function ChatRetentionSettingsPage() {
 
         <div className="space-y-4">
           <div>
-            <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground block mb-1.5">
+            <label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
               Retention Period (days)
             </label>
             <input
@@ -73,7 +73,7 @@ export default function ChatRetentionSettingsPage() {
               onChange={e => setRetentionDays(e.target.value)}
               min={1}
               max={365}
-              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
               style={{ borderColor: 'var(--glass-border)' }}
             />
             <p className="text-xs text-muted-foreground mt-1">
@@ -82,7 +82,7 @@ export default function ChatRetentionSettingsPage() {
           </div>
 
           <div>
-            <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground block mb-1.5">
+            <label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
               Max Conversations
             </label>
             <input
@@ -91,7 +91,7 @@ export default function ChatRetentionSettingsPage() {
               onChange={e => setMaxCount(e.target.value)}
               min={10}
               max={10000}
-              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
               style={{ borderColor: 'var(--glass-border)' }}
             />
             <p className="text-xs text-muted-foreground mt-1">
@@ -104,7 +104,7 @@ export default function ChatRetentionSettingsPage() {
           <button
             onClick={handleSave}
             disabled={saving}
-            className="bg-gradient-brand text-[#101114] font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40 flex items-center gap-2"
+            className="bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40 flex items-center gap-2"
           >
             {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
             Save Settings
diff --git a/frontend/src/pages/account/ProfileSettingsPage.tsx b/frontend/src/pages/account/ProfileSettingsPage.tsx
index b195ba95..33169e53 100644
--- a/frontend/src/pages/account/ProfileSettingsPage.tsx
+++ b/frontend/src/pages/account/ProfileSettingsPage.tsx
@@ -10,7 +10,7 @@ import type { UserUpdate } from '@/types'
 const inputClass = cn(
   'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
   'text-foreground placeholder:text-muted-foreground',
-  'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
+  'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
 )
 
 export function ProfileSettingsPage() {
@@ -122,7 +122,7 @@ export function ProfileSettingsPage() {
 
           {error && (
             <div className="flex items-center gap-2 text-sm text-rose-500">
-              <AlertCircle className="h-4 w-4 flex-shrink-0" />
+              <AlertCircle className="h-4 w-4 shrink-0" />
               {error}
             </div>
           )}
@@ -132,7 +132,7 @@ export function ProfileSettingsPage() {
               type="submit"
               disabled={isSaving || !hasChanges}
               className={cn(
-                'inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-[#101114]',
+                'inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-brand-dark',
                 'shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97]',
                 'disabled:opacity-50 disabled:cursor-not-allowed'
               )}
@@ -145,7 +145,7 @@ export function ProfileSettingsPage() {
               to="/change-password"
               className={cn(
                 'inline-flex items-center rounded-[10px] px-4 py-2 text-sm font-medium',
-                'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
+                'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground',
                 'hover:border-[rgba(255,255,255,0.12)]'
               )}
             >
diff --git a/frontend/src/pages/account/TargetListsPage.tsx b/frontend/src/pages/account/TargetListsPage.tsx
index 17ced4e6..0a1cca55 100644
--- a/frontend/src/pages/account/TargetListsPage.tsx
+++ b/frontend/src/pages/account/TargetListsPage.tsx
@@ -205,7 +205,7 @@ export default function TargetListsPage() {
               type="text"
               value={editorName}
               onChange={e => setEditorName(e.target.value)}
-              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               placeholder="e.g. RDS Farm A"
             />
           </div>
@@ -217,7 +217,7 @@ export default function TargetListsPage() {
               type="text"
               value={editorDescription}
               onChange={e => setEditorDescription(e.target.value)}
-              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               placeholder="e.g. Production RDS servers"
             />
           </div>
@@ -229,7 +229,7 @@ export default function TargetListsPage() {
               value={editorTargets}
               onChange={e => setEditorTargets(e.target.value)}
               rows={6}
-              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
             />
           </div>
diff --git a/frontend/src/pages/account/TeamCategoriesPage.tsx b/frontend/src/pages/account/TeamCategoriesPage.tsx
index a4f3c592..c2665cdc 100644
--- a/frontend/src/pages/account/TeamCategoriesPage.tsx
+++ b/frontend/src/pages/account/TeamCategoriesPage.tsx
@@ -78,7 +78,7 @@ export function TeamCategoriesPage() {
     setForm({ name: cat.name, slug: cat.slug, description: cat.description || '' })
   }
 
-  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')
+  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
     <div className="space-y-6">
diff --git a/frontend/src/pages/admin/AuditLogsPage.tsx b/frontend/src/pages/admin/AuditLogsPage.tsx
index 2158bf51..d56cdff5 100644
--- a/frontend/src/pages/admin/AuditLogsPage.tsx
+++ b/frontend/src/pages/admin/AuditLogsPage.tsx
@@ -135,7 +135,7 @@ export function AuditLogsPage() {
           placeholder="Filter by action..."
           className={cn(
             'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
-            'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+            'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
           )}
         />
         <input
@@ -145,7 +145,7 @@ export function AuditLogsPage() {
           placeholder="Filter by resource type..."
           className={cn(
             'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
-            'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+            'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
           )}
         />
       </div>
diff --git a/frontend/src/pages/admin/FeatureFlagsPage.tsx b/frontend/src/pages/admin/FeatureFlagsPage.tsx
index 2b612454..26f0d077 100644
--- a/frontend/src/pages/admin/FeatureFlagsPage.tsx
+++ b/frontend/src/pages/admin/FeatureFlagsPage.tsx
@@ -145,7 +145,7 @@ export function FeatureFlagsPage() {
     },
   ]
 
-  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')
+  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
     <div className="space-y-8">
diff --git a/frontend/src/pages/admin/GlobalCategoriesPage.tsx b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
index 4a465610..cc42e109 100644
--- a/frontend/src/pages/admin/GlobalCategoriesPage.tsx
+++ b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
@@ -87,7 +87,7 @@ export function GlobalCategoriesPage() {
     },
   ]
 
-  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')
+  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
     <div className="space-y-6">
diff --git a/frontend/src/pages/admin/InviteCodesPage.tsx b/frontend/src/pages/admin/InviteCodesPage.tsx
index 8a2fd120..05788ce5 100644
--- a/frontend/src/pages/admin/InviteCodesPage.tsx
+++ b/frontend/src/pages/admin/InviteCodesPage.tsx
@@ -109,7 +109,7 @@ export function InviteCodesPage() {
 
   const inputClass = cn(
     'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-    'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+    'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
 
   const columns: Column<InviteCodeResponse>[] = [
diff --git a/frontend/src/pages/admin/PlanLimitsPage.tsx b/frontend/src/pages/admin/PlanLimitsPage.tsx
index b451baa2..63026298 100644
--- a/frontend/src/pages/admin/PlanLimitsPage.tsx
+++ b/frontend/src/pages/admin/PlanLimitsPage.tsx
@@ -110,7 +110,7 @@ export function PlanLimitsPage() {
 
   const inputCn = cn(
     'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-    'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+    'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
 
   return (
diff --git a/frontend/src/pages/admin/SettingsPage.tsx b/frontend/src/pages/admin/SettingsPage.tsx
index 236f2d97..cf48822e 100644
--- a/frontend/src/pages/admin/SettingsPage.tsx
+++ b/frontend/src/pages/admin/SettingsPage.tsx
@@ -100,7 +100,7 @@ export function SettingsPage() {
               placeholder="We're performing scheduled maintenance. Please check back later."
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
diff --git a/frontend/src/pages/admin/SurveyInvitesPage.tsx b/frontend/src/pages/admin/SurveyInvitesPage.tsx
index 595117e0..2928df50 100644
--- a/frontend/src/pages/admin/SurveyInvitesPage.tsx
+++ b/frontend/src/pages/admin/SurveyInvitesPage.tsx
@@ -74,7 +74,7 @@ export default function SurveyInvitesPage() {
         <h3 className="font-heading text-sm font-semibold text-foreground mb-4">Create Invite</h3>
         <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
           <div className="flex-1">
-            <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5 block">
+            <label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1.5 block">
               Recipient Name
             </label>
             <input
@@ -82,11 +82,11 @@ export default function SurveyInvitesPage() {
               value={name}
               onChange={e => setName(e.target.value)}
               placeholder="John Smith"
-              className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+              className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden"
             />
           </div>
           <div className="flex-1">
-            <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5 block">
+            <label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1.5 block">
               Email (optional)
             </label>
             <input
@@ -94,14 +94,14 @@ export default function SurveyInvitesPage() {
               value={email}
               onChange={e => setEmail(e.target.value)}
               placeholder="john@example.com"
-              className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+              className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden"
             />
           </div>
           <div className="flex gap-2">
             <button
               onClick={() => handleCreate(false)}
               disabled={creating || !name.trim()}
-              className="inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              className="inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-brand-dark shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
             >
               {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Link2 className="h-4 w-4" />}
               Generate Link
@@ -109,7 +109,7 @@ export default function SurveyInvitesPage() {
             <button
               onClick={() => handleCreate(true)}
               disabled={creating || !name.trim() || !email.trim()}
-              className="inline-flex items-center gap-2 rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] active:scale-[0.97] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              className="inline-flex items-center gap-2 rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-brand-border px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] active:scale-[0.97] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
             >
               {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
               Send Email
@@ -132,7 +132,7 @@ export default function SurveyInvitesPage() {
               </div>
               <button
                 onClick={() => handleCopy(lastCreated.survey_url)}
-                className="shrink-0 rounded-lg p-2 text-muted-foreground hover:bg-[rgba(255,255,255,0.06)] hover:text-foreground transition-colors"
+                className="shrink-0 rounded-lg p-2 text-muted-foreground hover:bg-brand-border hover:text-foreground transition-colors"
               >
                 {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
               </button>
@@ -147,13 +147,13 @@ export default function SurveyInvitesPage() {
           <table className="w-full">
             <thead>
               <tr className="border-b border-border">
-                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Name</th>
-                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Email</th>
-                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Status</th>
-                <th className="px-4 py-3 text-center font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Sent</th>
-                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Created</th>
-                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Completed</th>
-                <th className="px-4 py-3 text-center font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Link</th>
+                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">Name</th>
+                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">Email</th>
+                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">Status</th>
+                <th className="px-4 py-3 text-center font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">Sent</th>
+                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">Created</th>
+                <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">Completed</th>
+                <th className="px-4 py-3 text-center font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">Link</th>
               </tr>
             </thead>
             <tbody>
@@ -188,7 +188,7 @@ export default function SurveyInvitesPage() {
                     <td className="px-4 py-3 text-center">
                       <button
                         onClick={() => handleCopy(invite.survey_url)}
-                        className="rounded-lg p-1.5 text-muted-foreground hover:bg-[rgba(255,255,255,0.06)] hover:text-foreground transition-colors"
+                        className="rounded-lg p-1.5 text-muted-foreground hover:bg-brand-border hover:text-foreground transition-colors"
                         title="Copy survey link"
                       >
                         <Copy className="h-3.5 w-3.5" />
diff --git a/frontend/src/pages/admin/SurveyResponsesPage.tsx b/frontend/src/pages/admin/SurveyResponsesPage.tsx
index 79a9526d..a3621190 100644
--- a/frontend/src/pages/admin/SurveyResponsesPage.tsx
+++ b/frontend/src/pages/admin/SurveyResponsesPage.tsx
@@ -104,7 +104,7 @@ function ExpandedDetail({ response }: { response: SurveyResponseDetail }) {
                   border: '1px solid var(--glass-border)',
                 }}
               >
-                <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-primary mb-1">
+                <p className="font-label text-[0.625rem] uppercase tracking-widest text-primary mb-1">
                   Q{q.num}
                 </p>
                 <p className="text-xs text-muted-foreground mb-2">{q.text}</p>
@@ -151,7 +151,7 @@ function ResponseRow({
       <tr
         className={cn(
           'border-b border-border/50 transition-colors cursor-pointer',
-          !response.is_read && 'bg-primary/[0.03]',
+          !response.is_read && 'bg-primary/3',
           'hover:bg-[rgba(255,255,255,0.02)]'
         )}
       >
@@ -194,7 +194,7 @@ function ResponseRow({
               )}
             </span>
           ) : (
-            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wider bg-[rgba(255,255,255,0.06)] text-muted-foreground">
+            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wider bg-brand-border text-muted-foreground">
               <Link2 className="h-3 w-3" />
               Direct
             </span>
@@ -214,7 +214,7 @@ function ResponseRow({
         <td className="px-3 py-3 w-10 relative">
           <button
             onClick={e => { e.stopPropagation(); setShowMenu(!showMenu) }}
-            className="p-1.5 rounded-lg hover:bg-[rgba(255,255,255,0.06)] text-muted-foreground hover:text-foreground transition-colors"
+            className="p-1.5 rounded-lg hover:bg-brand-border text-muted-foreground hover:text-foreground transition-colors"
           >
             <MoreHorizontal className="h-4 w-4" />
           </button>
@@ -437,7 +437,7 @@ export default function SurveyResponsesPage() {
                 'inline-flex items-center gap-2 rounded-[10px] px-3 py-2 text-xs font-medium transition-colors border',
                 showArchived
                   ? 'bg-primary/10 text-primary border-primary/20'
-                  : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)]'
+                  : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground border-brand-border hover:border-[rgba(255,255,255,0.12)]'
               )}
             >
               <Archive className="h-3.5 w-3.5" />
@@ -446,7 +446,7 @@ export default function SurveyResponsesPage() {
             <button
               onClick={handleExport}
               disabled={exporting || responses.length === 0}
-              className="inline-flex items-center gap-2 rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-[rgba(255,255,255,0.12)] disabled:opacity-50"
+              className="inline-flex items-center gap-2 rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-brand-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-[rgba(255,255,255,0.12)] disabled:opacity-50"
             >
               {exporting ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
@@ -468,7 +468,7 @@ export default function SurveyResponsesPage() {
       {/* Stat cards */}
       <div className="flex gap-4">
         <div className="glass-card-static px-5 py-4 flex-1">
-          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
+          <p className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1">
             Total Responses
           </p>
           <p className="text-2xl font-heading font-bold text-gradient-brand">
@@ -476,7 +476,7 @@ export default function SurveyResponsesPage() {
           </p>
         </div>
         <div className="glass-card-static px-5 py-4 flex-1">
-          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
+          <p className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1">
             This Week
           </p>
           <p className="text-2xl font-heading font-bold text-foreground">
@@ -484,7 +484,7 @@ export default function SurveyResponsesPage() {
           </p>
         </div>
         <div className="glass-card-static px-5 py-4 flex-1">
-          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
+          <p className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1">
             Unread
           </p>
           <p className={cn(
@@ -508,21 +508,21 @@ export default function SurveyResponsesPage() {
           <div className="flex-1" />
           <button
             onClick={() => handleBulkAction('mark_read')}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-brand-border transition-colors"
           >
             <Eye className="h-3.5 w-3.5" />
             Mark Read
           </button>
           <button
             onClick={() => handleBulkAction('mark_unread')}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-brand-border transition-colors"
           >
             <EyeOff className="h-3.5 w-3.5" />
             Mark Unread
           </button>
           <button
             onClick={() => handleBulkAction('archive')}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-brand-border transition-colors"
           >
             <Archive className="h-3.5 w-3.5" />
             Archive
@@ -536,7 +536,7 @@ export default function SurveyResponsesPage() {
           </button>
           <button
             onClick={() => setSelectedIds(new Set())}
-            className="px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
+            className="px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-brand-border transition-colors"
           >
             Clear
           </button>
@@ -559,19 +559,19 @@ export default function SurveyResponsesPage() {
               </th>
               <th className="px-1 py-3 w-6" />
               <th className="px-2 py-3 w-8" />
-              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 #
               </th>
-              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 Respondent
               </th>
-              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 Source
               </th>
-              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 Date
               </th>
-              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 Answered
               </th>
               <th className="px-3 py-3 w-10" />
diff --git a/frontend/src/pages/admin/UserDetailPage.tsx b/frontend/src/pages/admin/UserDetailPage.tsx
index 646ec7cc..40deb024 100644
--- a/frontend/src/pages/admin/UserDetailPage.tsx
+++ b/frontend/src/pages/admin/UserDetailPage.tsx
@@ -188,7 +188,7 @@ export function UserDetailPage() {
 
   const inputClass = cn(
     'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-    'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+    'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
 
   if (loading) {
diff --git a/frontend/src/pages/admin/UsersPage.tsx b/frontend/src/pages/admin/UsersPage.tsx
index 3238e0e2..7a372610 100644
--- a/frontend/src/pages/admin/UsersPage.tsx
+++ b/frontend/src/pages/admin/UsersPage.tsx
@@ -348,7 +348,7 @@ export function UsersPage() {
             onChange={(e) => setNewRole(e.target.value)}
             className={cn(
               'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-              'focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+              'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
             )}
           >
             <option value="engineer">Engineer</option>
@@ -394,7 +394,7 @@ export function UsersPage() {
               placeholder="e.g. ABC-1234"
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
@@ -435,7 +435,7 @@ export function UsersPage() {
               placeholder="Full name"
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
@@ -448,7 +448,7 @@ export function UsersPage() {
               placeholder="user@example.com"
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
@@ -459,7 +459,7 @@ export function UsersPage() {
               onChange={(e) => setCreateForm(f => ({ ...f, account_mode: e.target.value as 'existing' | 'personal' }))}
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             >
               <option value="personal">Personal (new account)</option>
@@ -477,7 +477,7 @@ export function UsersPage() {
                   placeholder="e.g. ABC12345"
                   className={cn(
                     'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                    'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                    'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
                   )}
                 />
               </div>
@@ -488,7 +488,7 @@ export function UsersPage() {
                   onChange={(e) => setCreateForm(f => ({ ...f, account_role: e.target.value as 'engineer' | 'viewer' }))}
                   className={cn(
                     'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                    'focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                    'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
                   )}
                 >
                   <option value="engineer">Engineer</option>
@@ -588,7 +588,7 @@ export function UsersPage() {
               placeholder="user@example.com"
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
@@ -601,7 +601,7 @@ export function UsersPage() {
               placeholder="e.g. ABC12345"
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
@@ -612,7 +612,7 @@ export function UsersPage() {
               onChange={(e) => setInviteForm(f => ({ ...f, role: e.target.value as 'engineer' | 'viewer' }))}
               className={cn(
                 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+                'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             >
               <option value="engineer">Engineer</option>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
deleted file mode 100644
index c1c3c67d..00000000
--- a/frontend/tailwind.config.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: ["class"],
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        // ResolutionFlow Brand Colors
-        brand: {
-          gradient: {
-            from: '#06b6d4',
-            to: '#22d3ee',
-          },
-          dark: {
-            DEFAULT: '#101114',
-            card: '#14161a',
-            surface: '#14161a',
-          },
-          text: {
-            primary: '#f8fafc',
-            secondary: '#8891a0',
-            muted: '#5a6170',
-          },
-          border: 'rgba(255, 255, 255, 0.06)',
-        },
-        // shadcn/ui color system
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ['IBM Plex Sans', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
-        heading: ['Bricolage Grotesque', 'system-ui', 'sans-serif'],
-        label: ['JetBrains Mono', 'monospace'],
-      },
-      backgroundImage: {
-        'gradient-brand': 'linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%)',
-        'gradient-brand-hover': 'linear-gradient(135deg, #0891b2 0%, #06b6d4 100%)',
-      },
-    },
-  },
-  plugins: [],
-}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 212286e6..38c64084 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,12 +1,14 @@
 /// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 import { sentryVitePlugin } from '@sentry/vite-plugin'
 import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
+    tailwindcss(),
     react(),
     sentryVitePlugin({
       org: process.env.SENTRY_ORG,