fix(css): resolve Tailwind spacing conflict breaking layout

The custom --spacing-2xl variable was overriding Tailwind's default
max-w-2xl utility (672px -> 64px), causing text to wrap word-by-word.

Renamed custom spacing tokens to space-* prefix to avoid conflicts
with Tailwind's default utilities.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: davidagustin

app/globals.css

@@ -146,13 +146,13 @@ html.light {
   --font-sans: var(--font-inter);
   --font-mono: var(--font-jetbrains);
 
-  /* Spacing scale - generous */
-  --spacing-xs: 0.5rem;
-  --spacing-sm: 1rem;
-  --spacing-md: 1.5rem;
-  --spacing-lg: 2rem;
-  --spacing-xl: 3rem;
-  --spacing-2xl: 4rem;
+  /* Custom spacing scale - use unique names to avoid conflicts with Tailwind defaults */
+  --spacing-space-xs: 0.5rem;
+  --spacing-space-sm: 1rem;
+  --spacing-space-md: 1.5rem;
+  --spacing-space-lg: 2rem;
+  --spacing-space-xl: 3rem;
+  --spacing-space-2xl: 4rem;
 
   /* Border radius */
   --radius-sm: 0.375rem;

tailwind.config.ts

@@ -48,12 +48,12 @@ const config: Config = {
         info: 'var(--info)',
       },
       spacing: {
-        xs: 'var(--spacing-xs)',
-        sm: 'var(--spacing-sm)',
-        md: 'var(--spacing-md)',
-        lg: 'var(--spacing-lg)',
-        xl: 'var(--spacing-xl)',
-        '2xl': 'var(--spacing-2xl)',
+        'space-xs': 'var(--spacing-space-xs)',
+        'space-sm': 'var(--spacing-space-sm)',
+        'space-md': 'var(--spacing-space-md)',
+        'space-lg': 'var(--spacing-space-lg)',
+        'space-xl': 'var(--spacing-space-xl)',
+        'space-2xl': 'var(--spacing-space-2xl)',
       },
       borderRadius: {
         sm: 'var(--radius-sm)',