fix: apply designer agent improvements to src/app/globals.css

src/app/globals.css

@@ -2,28 +2,101 @@
 @tailwind components;
 @tailwind utilities;
 
-/* React Quill overrides */
+@layer base {
-.ql-toolbar {
+  :root {
-  @apply rounded-t-lg border-gray-300 bg-gray-50;
+    --font-inter: 'Inter', system-ui, sans-serif;
+  }
+
+  * {
+    @apply border-slate-200;
+  }
+
+  html {
+    @apply scroll-smooth antialiased;
+  }
+
+  body {
+    @apply bg-surface text-ink font-sans;
+  }
+
+  /* Focus ring — consistent, accessible */
+  :focus-visible {
+    @apply outline-2 outline-offset-2 outline-brand-500 rounded-sm;
+  }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar        { @apply w-2; }
+  ::-webkit-scrollbar-track  { @apply bg-surface-subtle; }
+  ::-webkit-scrollbar-thumb  { @apply bg-slate-300 rounded-full; }
+  ::-webkit-scrollbar-thumb:hover { @apply bg-slate-400; }
 }
 
-.ql-container {
+@layer components {
-  @apply rounded-b-lg border-gray-300 min-h-[200px] text-base;
+  /* ── Buttons ─────────────────────────────────────── */
+  .btn {
+    @apply inline-flex items-center justify-center gap-2
+           font-medium rounded-xl transition-all duration-200
+           focus-visible:outline focus-visible:outline-2
+           focus-visible:outline-offset-2 disabled:opacity-50
+           disabled:pointer-events-none select-none;
+  }
+
+  .btn-primary {
+    @apply btn px-6 py-3 text-sm
+           bg-brand-600 text-white shadow-glow-sm
+           hover:bg-brand-700 hover:shadow-glow
+           active:scale-[0.98] focus-visible:outline-brand-600;
+  }
+
+  .btn-secondary {
+    @apply btn px-6 py-3 text-sm
+           bg-white text-ink border border-slate-200
+           shadow-card hover:bg-surface-subtle hover:border-slate-300
+           active:scale-[0.98] focus-visible:outline-brand-500;
+  }
+
+  .btn-ghost {
+    @apply btn px-4 py-2 text-sm text-ink-muted
+           hover:bg-surface-subtle hover:text-ink
+           active:scale-[0.98] focus-visible:outline-brand-500;
+  }
+
+  /* ── Cards ───────────────────────────────────────── */
+  .card {
+    @apply bg-white rounded-2xl border border-slate-100
+           shadow-card transition-all duration-300;
+  }
+
+  .card-hover {
+    @apply card hover:shadow-card-hover hover:-translate-y-1;
+  }
+
+  /* ── Prose / body text ───────────────────────────── */
+  .prose-cms {
+    @apply prose prose-slate max-w-none
+           prose-headings:font-display prose-headings:text-ink
+           prose-a:text-brand-600 prose-a:no-underline
+           hover:prose-a:underline
+           prose-code:bg-surface-subtle prose-code:rounded
+           prose-code:px-1 prose-code:py-0.5;
+  }
+
+  /* ── Section ─────────────────────────────────────── */
+  .section {
+    @apply w-full px-4 sm:px-6 lg:px-8;
+  }
+
+  .container-cms {
+    @apply max-w-6xl mx-auto;
+  }
 }
 
-.ql-editor {
+@layer utilities {
-  @apply min-h-[200px];
+  .text-balance  { text-wrap: balance; }
-}
+  .text-pretty   { text-wrap: pretty; }
-
+  .animation-delay-100 { animation-delay: 100ms; }
-/* Smooth transitions */
+  .animation-delay-200 { animation-delay: 200ms; }
-* {
+  .animation-delay-300 { animation-delay: 300ms; }
-  @apply transition-colors duration-150;
+  .animation-delay-400 { animation-delay: 400ms; }
-}
+  .animation-delay-500 { animation-delay: 500ms; }
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  @apply bg-gray-50 text-gray-900 antialiased;
 }