/* ========================================================================== 번뜩 V2 (Thoughtning Tutor) — Design System v3 — Tokens ---------------------------------------------------------------------------- Source of truth for color, spacing, typography tokens (dark + light mode). Components MUST reference these tokens — never hardcode colors. Phase 1 status: tokens-only. Existing inline styles are NOT yet rewired to these tokens. That happens in subsequent phases. Theme application priority (set by inline script in index.html ): 1. localStorage 'bn_theme' ('dark' | 'light') 2. OS prefers-color-scheme 3. Fallback: dark (brand default) ========================================================================== */ /* --- 1. FONTS -------------------------------------------------------------- Pretendard is referenced throughout V2's existing CSS (font-family chain) but has never been actually imported. This is the canonical import. --------------------------------------------------------------------------- */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css'); /* --- 2. CORE TOKENS — DARK (default) --------------------------------------- */ :root, [data-theme="dark"] { /* Surface */ --bg: #0b0b12; --bg-raise: #14141f; --bg-raise-2: #1c1c2a; --paper: #ffffff; /* question photo card — ALWAYS white */ --canvas: #1c1825; /* deep ink paper, slight violet tint */ /* Brand */ --teal: #0f766e; --teal-bright: #14b8a6; --flash: #ffd817; /* RARE — score / one CTA / ★ 인기 */ /* Text */ --text: #f5f0e6; /* cream, not white */ --text-mute: #a8a4b3; /* Pen colors (handwriting on canvas) */ --pen-default: #f5f0e6; /* cream on dark */ --pen-red: #ff6b7a; /* lighter red for grading on dark canvas */ --pen-teal: #14b8a6; --pen-yellow: #ffd817; /* Semantic */ --error: #ef4444; /* wrong-answer marks ONLY */ /* Borders & lines */ --border-subtle: rgba(245, 240, 230, 0.06); --grid-line: rgba(245, 240, 230, 0.05); /* Glows (solid color + blur, never gradients) */ --glow-teal: 0 0 40px rgba(15, 118, 110, 0.4); --glow-flash: 0 0 32px rgba(255, 216, 23, 0.85), 0 0 60px rgba(20, 184, 166, 0.4); /* 펑키: 옐로우 강 + 틸 바깥 */ /* Card shadow */ --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5); /* Press / hover overlays */ --press-overlay: rgba(245, 240, 230, 0.06); --hover-overlay: rgba(245, 240, 230, 0.04); } /* --- 3. CORE TOKENS — LIGHT ------------------------------------------------ */ [data-theme="light"] { --bg: #fafafa; --bg-raise: #ffffff; --bg-raise-2: #f5f5f7; --paper: #ffffff; --canvas: #fdfdfd; /* off-white */ --teal: #0d9488; --teal-bright: #0f766e; /* swap: deeper reads more authoritative on white */ --flash: #eab308; /* dampened — pure #ffd817 reads fluorescent on white */ --text: #1a1a1a; --text-mute: #6b7280; --pen-default: #1a1a1a; /* black on light */ --pen-red: #dc2626; /* deep red on light canvas */ --pen-teal: #0f766e; --pen-yellow: #eab308; --error: #dc2626; --border-subtle: rgba(0, 0, 0, 0.06); --grid-line: rgba(0, 0, 0, 0.06); --glow-teal: 0 0 24px rgba(15, 118, 110, 0.25); --glow-flash: 0 0 24px rgba(234, 179, 8, 0.55), 0 0 48px rgba(15, 118, 110, 0.25); /* 라이트: 절제된 펑키 */ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08); --press-overlay: rgba(0, 0, 0, 0.06); --hover-overlay: rgba(0, 0, 0, 0.04); } /* --- 4. SYSTEM PREFERENCE FALLBACK ----------------------------------------- Only applies when neither localStorage nor [data-theme] is set. The inline script normally sets [data-theme] before paint, so this is a final safety net for browsers that block JS or for first-paint. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #fafafa; --bg-raise: #ffffff; --bg-raise-2: #f5f5f7; --paper: #ffffff; --canvas: #fdfdfd; --teal: #0d9488; --teal-bright: #0f766e; --flash: #eab308; --text: #1a1a1a; --text-mute: #6b7280; --pen-default: #1a1a1a; --pen-red: #dc2626; --pen-teal: #0f766e; --pen-yellow: #eab308; --error: #dc2626; --border-subtle: rgba(0, 0, 0, 0.06); --grid-line: rgba(0, 0, 0, 0.06); --glow-teal: 0 0 24px rgba(15, 118, 110, 0.25); --glow-flash: 0 0 24px rgba(234, 179, 8, 0.55), 0 0 48px rgba(15, 118, 110, 0.25); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08); --press-overlay: rgba(0, 0, 0, 0.06); --hover-overlay: rgba(0, 0, 0, 0.04); } } /* --- 5. SPACING / RADII / MOTION (mode-independent) ------------------------ */ :root { /* 4px base grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Touch targets */ --touch-min: 44px; --header-h: 56px; /* phone min */ --header-h-md: 64px; /* tablet+ */ /* Motion */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 150ms; --dur-base: 200ms; --dur-flash: 400ms; --dur-theme: 250ms; /* Type scale */ --fs-eyebrow: 12px; --fs-body: 15px; --fs-body-lg: 17px; --fs-h3: 20px; --fs-h2: 24px; --fs-h1: 32px; --fs-display: 48px; --fs-score: 64px; } /* --- 6. SMOOTH THEME TRANSITION ------------------------------------------- When the user toggles theme, fade tokens over 250ms instead of snapping. ONLY transitions background-color and color on the html element so we don't paint-thrash all descendant elements. Phase 1 note: most descendants still use inline hex colors and will not transition. That's expected — they'll be rewired to tokens in later phases. ------------------------------------------------------------------------- */ html { transition: background-color var(--dur-theme) var(--ease-out), color var(--dur-theme) var(--ease-out); } /* --- 7. ACCESSIBILITY ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- 8. SEMANTIC HELPER CLASSES (opt-in) ----------------------------------- These are available for new components but are NOT applied automatically to existing V2 elements. Phase 2+ will gradually attach them where needed. --------------------------------------------------------------------------- */ .bn-eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); } .bn-h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); } .bn-h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); } .bn-h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); } .bn-body { font-size: var(--fs-body); font-weight: 400; color: var(--text); } .bn-body-mute { font-size: var(--fs-body); font-weight: 400; color: var(--text-mute); } .bn-score { font-size: var(--fs-score); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--flash); text-shadow: var(--glow-flash); font-variant-numeric: tabular-nums; } .bn-card { background: var(--bg-raise); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .bn-coach { background: var(--bg-raise); border: 1px solid var(--border-subtle); border-left: 3px solid var(--teal-bright); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); color: var(--text-mute); box-shadow: var(--shadow-card); } .bn-coach__title { display: flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: 700; margin: 0 0 var(--space-2); } /* --- 9. FLASH KEYFRAME (grading moment) ------------------------------------ */ @keyframes bnFlash { 0% { text-shadow: 0 0 0 rgba(255, 216, 23, 0); } 60% { text-shadow: 0 0 64px rgba(255, 216, 23, 0.9); } 100% { text-shadow: var(--glow-flash); } } .bn-flash-once { animation: bnFlash var(--dur-flash) var(--ease-out) 1; } /* --- 9b. FUNKY PULSE (analyze CTA — "살아있는 버튼") ----------------------- The analyze button (번뜩분석) breathes — a subtle inhale/exhale glow that tells the student "tap me when you're ready." 2.5s cycle ≈ relaxed human breathing rate, so it never gets annoying. --------------------------------------------------------------------------- */ @keyframes funkyPulse { 0%, 100% { box-shadow: var(--glow-flash); } 50% { box-shadow: 0 0 48px rgba(255, 216, 23, 1), 0 0 80px rgba(20, 184, 166, 0.6); } } @keyframes funkyPulseLight { 0%, 100% { box-shadow: var(--glow-flash); } 50% { box-shadow: 0 0 36px rgba(234, 179, 8, 0.75), 0 0 64px rgba(15, 118, 110, 0.4); } } .bn-pulse { animation: funkyPulse 2.5s ease-in-out infinite; } [data-theme="light"] .bn-pulse { animation-name: funkyPulseLight; } /* Reduced-motion users get the static stronger glow, no breathing */ @media (prefers-reduced-motion: reduce) { .bn-pulse { animation: none !important; } } /* --- 10. FOCUS RING -------------------------------------------------------- */ *:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; border-radius: 4px; }