font sizes

components/ui/Button.tsx

@@ -24,10 +24,10 @@ export function Button({ className, variant = 'primary', size = 'md', href, ...p
   };
 
   const sizes = {
-    sm: 'h-9 px-4 text-sm',
-    md: 'h-11 px-6 text-base',
-    lg: 'h-14 px-8 text-lg',
-    xl: 'h-16 px-10 text-xl',
+    sm: 'h-9 px-4 text-sm md:text-base',
+    md: 'h-11 px-6 text-base md:text-lg',
+    lg: 'h-14 px-8 text-base md:text-lg',
+    xl: 'h-16 px-10 text-lg md:text-xl',
   };
 
   const styles = cn(baseStyles, variants[variant], sizes[size], className);

components/ui/Callout.tsx

@@ -54,9 +54,9 @@ export function Callout({ type = 'info', title, children, className }: CalloutPr
         </div>
         <div className="flex-1">
           {title && (
-            <h4 className="font-bold text-lg mb-2">{title}</h4>
+            <h4 className="font-bold text-base md:text-lg mb-2">{title}</h4>
           )}
-          <div className="prose prose-sm max-w-none">
+          <div className="prose prose-sm md:prose-base max-w-none">
             {children}
           </div>
         </div>

components/ui/Heading.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { cn } from './utils';
 
-export function Heading({ 
-  level = 2, 
-  children, 
-  className, 
+export function Heading({
+  level = 2,
+  children,
+  className,
   subtitle,
   align = 'left'
-}: { 
-  level?: 1 | 2 | 3 | 4; 
-  children: React.ReactNode; 
+}: {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  children: React.ReactNode;
   className?: string;
   subtitle?: string;
   align?: 'left' | 'center' | 'right';
@@ -17,10 +17,12 @@ export function Heading({
   const Tag = `h${level}` as any;
   
   const sizes = {
-    1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1]',
-    2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-tight',
-    3: 'text-2xl md:text-3xl lg:text-4xl font-bold',
-    4: 'text-xl md:text-2xl font-bold',
+    1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1] tracking-tight',
+    2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-[1.2] tracking-tight',
+    3: 'text-2xl md:text-3xl lg:text-4xl font-bold leading-[1.3] tracking-tight',
+    4: 'text-xl md:text-2xl font-bold leading-[1.4]',
+    5: 'text-lg md:text-xl font-bold leading-[1.5]',
+    6: 'text-base md:text-lg font-semibold leading-[1.6]',
   };
 
   const alignments = {
@@ -30,7 +32,7 @@ export function Heading({
   };
 
   return (
-    <div className={cn('mb-8 md:mb-16 text-primary', alignments[align], className)}>
+    <div className={cn('mb-6 md:mb-12 text-primary', alignments[align], className)}>
       {subtitle && (
         <span className="inline-block text-accent font-bold tracking-widest uppercase text-xs md:text-sm mb-3 md:mb-4 animate-fade-in">
           {subtitle}