feat(blog): 디자인 토큰 후속 — 액센트 대비 AA 확보 + 중립 토큰 확장 (#94)

apps/blog/src/app/global.css

@@ -5,10 +5,15 @@
    arbitrary 유틸리티로 참조한다(이 프로젝트의 Turbopack+v4 빌드에서 @theme는
    유틸리티를 생성하지 않아, 코드베이스가 이미 쓰는 arbitrary value 방식으로 통일). */
 :root {
-  /* 브랜드 액센트(인디고). 활성 칩·현재 시리즈·포커스 링 등에 절제 있게 적용한다. */
-  --color-brand: #6366f1;
+  /* 브랜드 액센트(인디고) 스케일. */
+  --color-brand: #6366f1; /* 비텍스트 액센트(포커스 링 등) */
+  --color-brand-strong: #4f46e5; /* 브랜드 위 흰 텍스트용 — 대비 AA(6.3:1) 확보 */
   /* 다크 서피스 단일 토큰. 헤더·드롭다운·사이드바·뱃지의 검정 계열(black/gray-900/950)을 통일한다. */
   --color-ink: #0a0a0a;
+  /* 중립 구조색. 값은 기존 Tailwind gray와 동일해 시각 변화 없이 단일 출처로 모은다. */
+  --color-surface-muted: #f9fafb; /* gray-50: 카드 배경 */
+  --color-border: #e5e7eb; /* gray-200: 카드/모달 경계 */
+  --color-border-subtle: #f3f4f6; /* gray-100: 옅은 구분선 */
 }
 
 html,

apps/blog/src/components/badge.tsx

@@ -28,7 +28,9 @@ export function Badge({ href, children, onClick, color = 'secondary', active }:
         'px-[8px] py-[8px]',
         'md:px-[12px] md:py-[6px]',
         'whitespace-nowrap',
-        color === 'primary' ? 'bg-[var(--color-brand)] text-white' : 'bg-gray-100 text-gray-700',
+        color === 'primary'
+          ? 'bg-[var(--color-brand-strong)] text-white'
+          : 'bg-gray-100 text-gray-700',
         'hover:brightness-95 active:brightness-90',
       )}
     >

apps/blog/src/components/introduce-card.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 export function IntroduceCard() {
   // 데스크톱 첫 화면 밀도 확보를 위해 상단 마진을 md:mt-30(120px)에서 절반 수준(60px)으로 축소한다. 모바일(mt-7.5)은 유지.
   return (
-    <div className="rounded-md border border-gray-100 flex relative shadow-md mt-7.5 md:mt-15 break-keep">
+    <div className="rounded-md border border-[var(--color-border-subtle)] flex relative shadow-md mt-7.5 md:mt-15 break-keep">
       {/* === INTRODUCE CARD LEFT Bar === */}
       <div className="w-2 md:w-4.25 h-full bg-gray-700  absolute left-0 top-0"></div>
 

apps/blog/src/components/post-card.tsx

@@ -35,7 +35,7 @@ export function PostCard({ post, showSeriesBadge = true }: PostCardProps) {
       key={post.route}
       onClick={onCardClick}
       // hover 시 배경/보더/포인터로 카드 전체가 클릭 가능함을 시각적으로 알린다.
-      className="px-3 py-3 mb-[30px] rounded-lg border border-transparent cursor-pointer transition-all duration-200 hover:bg-gray-50 hover:border-gray-200"
+      className="px-3 py-3 mb-[30px] rounded-lg border border-transparent cursor-pointer transition-all duration-200 hover:bg-[var(--color-surface-muted)] hover:border-[var(--color-border)]"
     >
       {/* === POST TITLE AND LINK === */}
       {/* 제목 Link는 키보드 포커스/새 탭 열기 등 접근성을 위해 실제 <a>로 유지한다. */}

apps/blog/src/components/post-detail/post-navigator.tsx

@@ -14,7 +14,7 @@ export function PostNavigator({ mode, post }: PostNavigatorProps) {
       href={post.route}
       className={classNames(
         'group/navigator',
-        'flex bg-gray-50 p-3 rounded-md gap-5 items-center grow basis-0 min-w-0 cursor-pointer',
+        'flex bg-[var(--color-surface-muted)] p-3 rounded-md gap-5 items-center grow basis-0 min-w-0 cursor-pointer',
         mode === 'prev' ? 'flex-row' : 'flex-row-reverse',
       )}
     >

apps/blog/src/components/post-detail/post-recommendation.tsx

@@ -34,7 +34,7 @@ export function PostRecommendation({ currentPost }: PostRecommendationProps) {
           <Link
             key={post.id}
             href={post.route}
-            className="group/rec-card shrink-0 flex flex-col gap-2 bg-gray-50 p-4 rounded-md w-55 cursor-pointer"
+            className="group/rec-card shrink-0 flex flex-col gap-2 bg-[var(--color-surface-muted)] p-4 rounded-md w-55 cursor-pointer"
           >
             <span className="text-xs text-gray-400">{post.series.title}</span>
             <span className="text-sm font-bold leading-snug group-hover/rec-card:underline line-clamp-3">

apps/blog/src/components/search/search-modal.tsx

@@ -107,7 +107,7 @@ export function SearchModal() {
         onKeyDown={onKeyDown}
       >
         {/* 검색 입력 영역 */}
-        <div className="flex items-center gap-3 border-b border-gray-200 px-4">
+        <div className="flex items-center gap-3 border-b border-[var(--color-border)] px-4">
           <IconSearch className="h-5 w-5 shrink-0 text-gray-400" />
           <input
             ref={inputRef}
@@ -165,7 +165,7 @@ export function SearchModal() {
                   onClick={close}
                   onMouseEnter={() => setActiveIndex(idx)}
                   className={classNames(
-                    'block border-b border-gray-100 px-4 py-3',
+                    'block border-b border-[var(--color-border-subtle)] px-4 py-3',
                     idx === activeIndex ? 'bg-gray-100' : 'bg-white',
                   )}
                 >

apps/blog/src/components/series-detail/series-detail.tsx

@@ -52,8 +52,8 @@ export async function SeriesDetail({ series }: SeriesDetailProps) {
                   'px-3 py-1.5 text-xs md:text-sm',
                   'transition-all duration-200 ease-in-out',
                   active
-                    ? // 활성 시리즈: 브랜드 액센트로 현재 위치를 강조한다.
-                      'bg-[var(--color-brand)] text-white'
+                    ? // 활성 시리즈: 브랜드 액센트(흰 텍스트 대비 AA)로 현재 위치를 강조한다.
+                      'bg-[var(--color-brand-strong)] text-white'
                     : // 비활성 시리즈: 옅은 배경 + hover 강조로 클릭 가능함을 알린다.
                       'bg-gray-100 text-gray-700 hover:bg-gray-200',
                 )}