feat(theme): extend tokens for phase 7 design — 7C.1

Add color, shadow, font.display tokens and keyframe animations from
phase 7 design files. All existing tokens preserved unchanged.

frontend/src/styles/theme.ts

@@ -4,6 +4,7 @@
  * Philosophy: 학습앱 = 집중 + 깔끔. 어두운 그라데이션 배경 유지하되
  * 정보가 흐리지 않게 surface contrast 를 분명히. 모바일 first (≥ 360px).
  */
+import { keyframes } from 'styled-components';
 
 export const theme = {
   color: {
@@ -28,6 +29,23 @@ export const theme = {
     warning: '#f59e0b',
     danger: '#ef4444',
     info: '#38bdf8',
+
+    // Phase 7 design tokens — deep background variants
+    bgDeep: '#0F0F14',
+    surfaceDeep: '#15151C',
+    surfaceHoverDeep: '#1A1A24',
+
+    // Phase 7 design tokens — alpha borders
+    borderSoftAlpha: 'rgba(255, 255, 255, 0.06)',
+    borderBrightAlpha: 'rgba(255, 255, 255, 0.12)',
+
+    // Phase 7 design tokens — brand colors
+    brandIndigo: '#4F46E5',
+    brandViolet: '#7C3AED',
+    brandGradient: 'linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)',
+
+    // Phase 7 design tokens — bright text
+    textBright: '#F8FAFC',
   },
 
   persona: {
@@ -59,6 +77,9 @@ export const theme = {
       "'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
     mono:
       "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
+    // Phase 7 design tokens — big number / display font
+    display:
+      "'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif",
   },
 
   shadow: {
@@ -66,6 +87,12 @@ export const theme = {
     md: '0 6px 20px rgba(0, 0, 0, 0.35)',
     lg: '0 16px 40px rgba(0, 0, 0, 0.45)',
     glow: '0 0 24px rgba(99, 102, 241, 0.25)',
+
+    // Phase 7 design tokens — glow variants
+    glowIndigo: '0 0 15px rgba(79, 70, 229, 0.3)',
+    glowIndigoStrong: '0 0 20px rgba(79, 70, 229, 0.5)',
+    glowViolet: '0 0 15px rgba(124, 58, 237, 0.3)',
+    cardElevated: '0 10px 40px rgba(0, 0, 0, 0.5)',
   },
 
   breakpoint: {
@@ -84,3 +111,30 @@ export const PERSONA_ORDER: Array<keyof typeof theme.persona> = [
   'junior',
   'crammer',
 ];
+
+// Phase 7 design tokens — keyframe animations
+// Usage: `animation: ${animations.fadeInUp} 0.4s ease-out`
+export const animations = {
+  fadeInUp: keyframes`
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
+  `,
+  float: keyframes`
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+  `,
+  slideToast: keyframes`
+    0% { opacity: 0; transform: translate(-50%, 20px); }
+    100% { opacity: 1; transform: translate(-50%, 0); }
+  `,
+  shimmer: keyframes`
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  `,
+  shake: keyframes`
+    10%, 90% { transform: translate3d(-1px, 0, 0); }
+    20%, 80% { transform: translate3d(2px, 0, 0); }
+    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+    40%, 60% { transform: translate3d(4px, 0, 0); }
+  `,
+};