/* ============================================================ * UNI:SOL Design Tokens (v0.2) * ------------------------------------------------------------ * Single Source of Truth for color, typography, spacing, radius, * shadow, motion, layout, z-index, breakpoints. * * 적용 원칙 * - tokens.css는 모든 페이지의 에서 가장 먼저 로드된다. * - 외부 검토자(2026-05-12) 응답을 기반으로 130+ 토큰 정의. * - 다크모드는 :root[data-theme="dark"]로 재정의. * - Brand(--color-brand-*) = 정체성 / Primary(--color-primary-*) = CTA·전환. * - Track 3a/3b: 토큰 정의 + 1개 컬러 검증 교체만 본 PR 포함. * * 변경/추가 절차: docs/design-tokens/README.md 참조. * R21-1~9 회귀: tests/regression/r21-design-tokens.test.js. * ============================================================ */ :root { /* ── Brand (UNI:SOL teal 그라데이션 — 정체성) ───────────── */ --color-brand-teal-50: #ECFEFC; --color-brand-teal-100: #CFFBF7; --color-brand-teal-200: #A5F3EC; --color-brand-teal-300: #6EE7DD; --color-brand-teal-400: #34D3C5; --color-brand-teal-500: #2EC4B6; --color-brand-teal-600: #21A599; --color-brand-teal-700: #1B847B; --color-brand-teal-800: #186861; --color-brand-teal-900: #134E48; --color-brand-blue-500: #1E88E5; --color-brand-blue-600: #1565C0; --color-brand-gradient: linear-gradient(135deg, #2EC4B6 0%, #1E88E5 100%); --color-brand-gradient-soft: linear-gradient(135deg, rgba(46,196,182,0.10) 0%, rgba(30,136,229,0.10) 100%); /* ── Primary (Toss Blue — CTA·활성·링크) ───────────────── */ --color-primary-50: #EFF6FF; --color-primary-100: #DBEAFE; --color-primary-200: #BFDBFE; --color-primary-300: #93C5FD; --color-primary-400: #60A5FA; --color-primary-500: #3182F6; --color-primary-600: #2563EB; --color-primary-700: #1D4ED8; --color-primary-800: #1E40AF; --color-primary-900: #1E3A8A; /* ── Semantic: success / warning / error / info ─────────── */ --color-success-50: #ECFDF5; --color-success-100: #D1FAE5; --color-success-300: #6EE7B7; --color-success-500: #10B981; --color-success-600: #059669; --color-success-700: #047857; --color-warning-50: #FFFBEB; --color-warning-100: #FEF3C7; --color-warning-300: #FCD34D; --color-warning-500: #F59E0B; --color-warning-600: #D97706; --color-warning-700: #B45309; --color-error-50: #FEF2F2; --color-error-100: #FEE2E2; --color-error-300: #FCA5A5; --color-error-500: #EF4444; --color-error-600: #DC2626; --color-error-700: #B91C1C; --color-info-50: #EFF6FF; --color-info-100: #DBEAFE; --color-info-300: #93C5FD; --color-info-500: #3B82F6; --color-info-600: #2563EB; --color-info-700: #1D4ED8; /* ── Neutral (gray scale) ───────────────────────────────── */ --color-neutral-0: #FFFFFF; --color-neutral-50: #F8FAFC; --color-neutral-100: #F1F5F9; --color-neutral-200: #E2E8F0; --color-neutral-300: #CBD5E1; --color-neutral-400: #94A3B8; --color-neutral-500: #64748B; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1E293B; --color-neutral-900: #0F172A; --color-neutral-950: #020617; /* ── 의미 기반 — text / bg / border ─────────────────────── */ --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-text-tertiary: #64748B; --color-text-muted: #94A3B8; --color-text-inverse: #FFFFFF; --color-text-link: #2563EB; --color-text-success: #047857; --color-text-warning: #B45309; --color-text-error: #B91C1C; --color-bg-primary: #FFFFFF; --color-bg-secondary: #F8FAFC; --color-bg-sunken: #F1F5F9; --color-bg-elevated: #FFFFFF; --color-bg-inverse: #0F172A; --color-bg-primary-soft: #EFF6FF; --color-bg-success-soft: #ECFDF5; --color-bg-warning-soft: #FFFBEB; --color-bg-error-soft: #FEF2F2; --color-bg-info-soft: #EFF6FF; --color-border-subtle: #F1F5F9; --color-border-default: #E2E8F0; --color-border-strong: #CBD5E1; --color-border-focus: #3182F6; /* ── Typography ─────────────────────────────────────────── */ --font-family-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif; --font-family-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Consolas, "Liberation Mono", Menlo, monospace; --font-feature-tabular: "tnum" 1, "ss06" 1; --font-size-caption: 12px; --font-size-body: 14px; --font-size-body-lg: 16px; --font-size-title: 18px; --font-size-section: 24px; --font-size-display: 32px; --font-size-num-md: 28px; --font-size-num-lg: 40px; --font-size-num-xl: 56px; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.75; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── Spacing (8pt grid) ─────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ── Radius ─────────────────────────────────────────────── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ── Shadow ─────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 20px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04); --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06); --shadow-focus: 0 0 0 3px rgba(49, 130, 246, 0.35); --shadow-brand-glow: 0 0 24px rgba(46, 196, 182, 0.35); /* ── Motion ─────────────────────────────────────────────── */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 400ms; --duration-slower: 640ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); /* ── Layout ─────────────────────────────────────────────── */ --layout-sidebar-collapsed: 64px; --layout-sidebar-default: 240px; --layout-sidebar-expanded: 320px; --layout-content-narrow: 640px; --layout-content-default: 960px; --layout-content-wide: 1200px; /* ── Z-index ────────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-fixed: 1200; --z-overlay: 1300; --z-modal: 1400; --z-popover: 1500; --z-toast: 1600; --z-tooltip: 1700; /* ── Breakpoints (참조용 — JS·CSS env() 미사용) ────────── */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; } /* ============================================================ * Dark mode — 의미 토큰 + Brand/Primary tint 조정 * ============================================================ */ :root[data-theme="dark"] { /* 의미 기반 — text / bg / border (라이트 매핑 동일 키) */ --color-text-primary: #F8FAFC; --color-text-secondary: #CBD5E1; --color-text-tertiary: #94A3B8; --color-text-muted: #64748B; --color-text-inverse: #0F172A; --color-text-link: #60A5FA; --color-text-success: #6EE7B7; --color-text-warning: #FCD34D; --color-text-error: #FCA5A5; --color-bg-primary: #020617; --color-bg-secondary: #0F172A; --color-bg-sunken: #0B1220; --color-bg-elevated: #1E293B; --color-bg-inverse: #F8FAFC; --color-bg-primary-soft: rgba(49, 130, 246, 0.12); --color-bg-success-soft: rgba(16, 185, 129, 0.12); --color-bg-warning-soft: rgba(245, 158, 11, 0.12); --color-bg-error-soft: rgba(239, 68, 68, 0.12); --color-bg-info-soft: rgba(59, 130, 246, 0.12); --color-border-subtle: #1E293B; --color-border-default: #334155; --color-border-strong: #475569; --color-border-focus: #60A5FA; /* Brand tint — 어두운 배경에서 채도/명도 보정 */ --color-brand-teal-500: #5EEAD4; --color-brand-teal-600: #34D3C5; --color-brand-gradient: linear-gradient(135deg, #5EEAD4 0%, #60A5FA 100%); --color-brand-gradient-soft: linear-gradient(135deg, rgba(94,234,212,0.15) 0%, rgba(96,165,250,0.15) 100%); /* Primary tint — 어두운 배경에서 hover/focus 명도 보정 */ --color-primary-500: #60A5FA; --color-primary-600: #3182F6; --color-primary-700: #2563EB; /* Shadow — 어두운 배경에서 그림자 표현 보정 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.48), 0 2px 4px rgba(0, 0, 0, 0.32); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.56), 0 4px 8px rgba(0, 0, 0, 0.32); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.64), 0 8px 16px rgba(0, 0, 0, 0.40); --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.45); --shadow-brand-glow: 0 0 32px rgba(94, 234, 212, 0.45); } /* ============================================================ * Base reset — body 폰트 + 한글 가독성 ss06 * ============================================================ */ html { color-scheme: light dark; } body { font-family: var(--font-family-sans); font-feature-settings: "ss06" 1; color: var(--color-text-primary); background-color: var(--color-bg-primary); } /* ============================================================ * .tabular — 숫자 폭 고정 (KPI·시세·차트 라벨) * data-numeric 속성도 동일 효과 (선언적 마크업 허용) * ============================================================ */ .tabular, [data-numeric] { font-feature-settings: var(--font-feature-tabular); font-variant-numeric: tabular-nums; } /* ============================================================ * Reduced motion — 사용자 OS 설정 존중 * ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }