/* 피플인사이트 — Design Tokens .claude/디자인규칙.md 기반 단일 모노톤 토큰. */ :root { /* === Font === */ --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif; /* === Type Scale === */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; /* 본문 — 모든 인터랙티브 컨트롤·body 기본 */ --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 36px; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.6; /* === Spacing (4px base) === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* === Surface === */ --bg-page: #ffffff; --bg-surface: #ffffff; /* 메인 콘텐츠 영역 */ --bg-subtle: #fafafa; /* 흰 표면 안의 보조 영역 */ --bg-hover: #f5f5f5; /* 흰 표면 위 호버 */ --bg-active: #ededed; /* 흰 표면 위 활성 */ /* === Frame (사이드바 + 헤더 — 연결된 회색 프레임) === */ --bg-frame: #f5f5f5; /* 프레임 바탕 */ --frame-hover: #ebebeb; /* 프레임 위 호버 */ --frame-active: #e0e0e0; /* 프레임 위 활성 */ /* === Border === */ --border-subtle: #ececec; --border-default: #d4d4d4; /* === Text === */ --text-primary: #0a0a0a; --text-secondary: #525252; --text-muted: #737373; --text-disabled: #d4d4d4; /* === Accent (Primary 액션 전용) === */ --accent: #0a0a0a; --accent-hover: #1f1f1f; --accent-text: #ffffff; /* === Semantic === */ --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --info: #2563eb; /* === Chart === */ --chart-1: #8b5cf6; --chart-2: #ef4444; --chart-3: #10b981; --chart-4: #f59e0b; --chart-5: #06b6d4; /* === Radius === */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* === Shadow (드롭다운·모달 전용) === */ --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 12px 32px rgba(0,0,0,.12); /* === Motion === */ --ease: cubic-bezier(.2,.7,.2,1); --dur-fast: 120ms; --dur-med: 220ms; /* === Z-index === */ --z-base: 1; --z-sticky: 100; --z-dropdown: 1000; --z-modal: 2000; /* === Layout === */ --header-h: 56px; --sidebar-w: 220px; color-scheme: light; } /* ========================================================= Dark Mode — 일 때 토큰 오버라이드 ========================================================= */ [data-theme="dark"] { /* Surface */ --bg-page: #141414; --bg-surface: #1f1f1f; --bg-subtle: #262626; --bg-hover: #2a2a2a; --bg-active: #333333; /* Frame (사이드바 + 헤더 — 짙은 회색) */ --bg-frame: #141414; --frame-hover: #232323; --frame-active: #2c2c2c; /* Border */ --border-subtle: #383838; --border-default: #4d4d4d; /* Text */ --text-primary: #ededed; --text-secondary: #a3a3a3; --text-muted: #8a8a8a; --text-disabled: #404040; /* Accent — 다크에서는 화이트가 강조 */ --accent: #ededed; --accent-hover: #ffffff; --accent-text: #0a0a0a; /* Semantic — 다크에서 살짝 밝게 */ --success: #22c55e; --warning: #eab308; --danger: #ef4444; --info: #3b82f6; /* Shadow — 다크는 더 짙게 */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.5); color-scheme: dark; }