feat: light theme + audited color-conflict-safe tokens

- global.css: rewrite all CSS variables for light-first theme
  - White bg, dark text, yellow accent (preserved)
  - New --color-bg, --color-bg-soft, --color-bg-alt tokens
  - All button variants audited: btn-primary (yellow/black, never matches
    any white/yellow/soft bg), btn-dark (black/white, safe on yellow/light),
    btn-outline-dark, btn-outline-light (only on dark), btn-outline-yellow
  - Form inputs: white bg, dark text, gray border, yellow focus ring
  - Nav: white bg, dark text, yellow hover underline
  - Footer: white bg, dark text, social icons on soft bg
  - Section variants: .section-soft, .section-yellow (utility classes)
  - Removed dark variants: .section-dark, .btn-dark-as-section-bg

- Base.astro: theme-color = #fed400 (yellow)
- Hero.astro: kinetic hero on WHITE bg with yellow badge + dark text
- PageHero.astro: light hero with yellow accent line at bottom
- Navigation.astro: white bg, dark links, yellow CTA, white logo banner
  with /images/logo-long-black.png (works on light/yellow)
- Footer.astro: white bg, dark text, social icons, yellow CTA
- Card components: white bg, gray border, yellow hover state

src/components/BlogCard.astro

@@ -1,4 +1,8 @@
 ---
+/**
+ * MOREMINIMORE - BLOG CARD COMPONENT (LIGHT THEME)
+ */
+
 interface Props {
   title: string;
   excerpt: string;
@@ -17,10 +21,13 @@ const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month:
     {image && <img src={image} alt={title} loading="lazy" />}
   </div>
   <div class="blog-content">
-    <span class="blog-date">{formattedDate}</span>
+    <span class="blog-category">{category}</span>
     <h3 class="blog-title">{title}</h3>
     <p class="blog-excerpt">{excerpt}</p>
-    <span class="blog-link">อ่านต่อ →</span>
+    <div class="blog-footer">
+      <span class="blog-date">{formattedDate}</span>
+      <span class="blog-link">อ่านต่อ →</span>
+    </div>
   </div>
 </a>
 
@@ -28,47 +35,68 @@ const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month:
   .blog-card {
     display: block;
     background: var(--color-white);
-    border-radius: 16px;
+    border-radius: var(--radius-xl);
     overflow: hidden;
-    border: 1px solid rgba(0,0,0,0.05);
-    transition: all 0.3s ease;
+    border: 1px solid var(--color-gray-200);
+    transition: all 0.3s var(--ease-out-expo);
   }
+
   .blog-card:hover {
     transform: translateY(-8px);
-    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    box-shadow: var(--shadow-md);
+    border-color: var(--color-primary);
   }
+
   .blog-image {
     aspect-ratio: 16/9;
     overflow: hidden;
-    background: var(--color-gray-100);
+    background: var(--color-bg-soft);
   }
+
   .blog-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
   }
-  .blog-card:hover .blog-image img { transform: scale(1.05); }
-  .blog-content { padding: 24px; }
-  .blog-date {
-    font-size: 12px;
-    color: var(--color-medium-gray);
-    margin-bottom: 8px;
-    display: block;
+
+  .blog-card:hover .blog-image img {
+    transform: scale(1.05);
   }
-  .blog-title {
-    font-size: 18px;
-    font-weight: 700;
-    margin-bottom: 12px;
+
+  .blog-content {
+    padding: 24px;
+  }
+
+  .blog-category {
+    display: inline-block;
+    background: var(--color-primary);
     color: var(--color-black);
+    padding: 4px 12px;
+    border-radius: var(--radius-sm);
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 12px;
+  }
+
+  .blog-title {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 800;
+    color: var(--color-black);
+    margin-bottom: 12px;
+    line-height: 1.3;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+
   .blog-excerpt {
     font-size: 14px;
-    color: var(--color-medium-gray);
+    color: var(--color-gray-600);
     line-height: 1.6;
     margin-bottom: 16px;
     display: -webkit-box;
@@ -76,9 +104,26 @@ const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month:
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
-  .blog-link {
-    color: var(--color-primary);
-    font-weight: 600;
-    font-size: 14px;
+
+  .blog-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
-</style>
+
+  .blog-date {
+    font-size: 12px;
+    color: var(--color-gray-500);
+  }
+
+  .blog-link {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--color-black);
+    transition: color 0.3s ease;
+  }
+
+  .blog-card:hover .blog-link {
+    color: var(--color-primary-dark);
+  }
+</style>