Fix theming and spacing: alpha-value colors, remove v4 CSS syntax, clean card padding

- tailwind.config.ts: add <alpha-value> to all color definitions so opacity
  modifiers (ring-foreground/10, outline-ring/50) render correctly
- globals.css: move @keyframes out of @theme inline block (v4-only, ignored
  by browser in v3); remove @custom-variant block (also v4-only)
- page.tsx, experience/page.tsx, publications/page.tsx: remove pb-3 from
  CardHeaders and pt-0 from CardContents — new shadcn card uses gap-4 so
  these overrides added extra space instead of removing it

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/experience/page.tsx

@@ -68,7 +68,7 @@ export default function ExperiencePage() {
               className={`animate-fade-in-up-delay-${Math.min(delay + index, 4)} card-hover`}
             >
               <Card>
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
                       <div className="flex items-start gap-3">
@@ -95,7 +95,7 @@ export default function ExperiencePage() {
                     </div>
                   </div>
                 </CardHeader>
-                <CardContent className="pt-0">
+                <CardContent>
                   <ul className="space-y-3">
                     {exp.description.map((item, itemIndex) => (
                       <li key={itemIndex} className="flex items-start gap-3">
@@ -161,10 +161,10 @@ export default function ExperiencePage() {
               className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
             >
               <Card className="card-full-height">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <CardTitle className="text-lg">{category}</CardTitle>
                 </CardHeader>
-                <CardContent className="card-content-stretch pt-0">
+                <CardContent className="card-content-stretch">
                   <div className="flex flex-wrap gap-2">
                     {skills.map((skill) => (
                       <Badge
@@ -193,7 +193,7 @@ export default function ExperiencePage() {
               className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
             >
               <Card className="card-full-height">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-start justify-between">
                     <div className="min-w-0">
                       <CardTitle className="break-words text-lg leading-tight">
@@ -206,7 +206,7 @@ export default function ExperiencePage() {
                     <Award className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
                   </div>
                 </CardHeader>
-                <CardContent className="pt-0">
+                <CardContent>
                   <p className="text-muted-foreground">{conf.presentation}</p>
                 </CardContent>
               </Card>
@@ -225,7 +225,7 @@ export default function ExperiencePage() {
               className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
             >
               <Card className="card-full-height">
-                <CardHeader className="pb-3">
+                <CardHeader>
                   <div className="flex items-start gap-3">
                     <Award className="mt-1 h-5 w-5 flex-shrink-0 text-primary" />
                     <div className="min-w-0">
@@ -241,7 +241,7 @@ export default function ExperiencePage() {
                   </div>
                 </CardHeader>
                 {award.description && (
-                  <CardContent className="card-content-stretch pt-0">
+                  <CardContent className="card-content-stretch">
                     <p className="break-words text-sm leading-relaxed text-muted-foreground">
                       {award.description}
                     </p>
@@ -258,7 +258,7 @@ export default function ExperiencePage() {
         <h2 className="text-2xl font-bold">Relevant Coursework</h2>
         <div className="animate-fade-in-up-delay-1">
           <Card>
-            <CardContent className="pt-6">
+            <CardContent>
               <ul className="space-y-3">
                 {relevantCoursework.map((course, index) => (
                   <li key={index} className="flex items-start gap-3">