/* ========================================================================== KIMM Design System — Design Tokens 한국기계연구원 디자인 시스템 공통 토큰 Brand: KIMM Blue #1B3281 (진리·미래) / KIMM Red #ED1C24 (에너지·역동) Tone: 깔끔한 기관 정공법 — 흰 배경 + 블루 헤더, 레드는 포인트로만 ※ 이 파일은 디자인 시스템의 사본이다(2026-07-31 동기화). 원본(단일 소스): Dropbox/JW_work/Claude_design/systems/kimm-design-system/ foundations/tokens.css 이 저장소는 자기완결이어야 하므로 사본을 두되, 값은 직접 고치지 말고 원본을 고친 뒤 다시 복사할 것. 적용: (기본) / ========================================================================== */ :root { /* --- Brand ----------------------------------------------------------- */ --kimm-blue: #1B3281; /* primary */ --kimm-red: #ED1C24; /* accent — 강조/경고에만 절제 사용 */ --kimm-black:#000000; /* --- Blue scale ------------------------------------------------------ */ --blue-50: #EEF1F8; --blue-100: #D6DEEF; --blue-200: #AEBCDD; --blue-300: #8599CB; --blue-400: #5D77B9; --blue-500: #3551A0; --blue-600: #1B3281; /* = KIMM Blue */ --blue-700: #16296A; --blue-800: #112052; --blue-900: #0B153B; /* --- Red scale (accent) ---------------------------------------------- */ --red-50: #FDECEC; --red-100: #FAC7C9; --red-200: #F69497; --red-300: #F26165; --red-400: #EF3E43; --red-500: #ED1C24; /* = KIMM Red */ --red-600: #C8141B; --red-700: #9E0F15; /* --- Neutral (cool gray, blue-leaning) ------------------------------- */ --gray-50: #F7F8FA; --gray-100: #EDEFF3; --gray-200: #DDE1E8; --gray-300: #C4CAD6; --gray-400: #9AA2B1; --gray-500: #6B7280; --gray-600: #4B5260; --gray-700: #353B47; --gray-800: #21262F; --gray-900: #12151B; --white: #FFFFFF; /* --- Semantic -------------------------------------------------------- */ --success: #1E8E5A; --warning: #C77700; --danger: #ED1C24; /* = KIMM Red */ --info: #1B3281; /* --- Surface / text -------------------------------------------------- */ --bg: var(--white); --surface: var(--white); --surface-alt: var(--gray-50); --border: var(--gray-200); --text-strong: var(--gray-900); --text: var(--gray-700); --text-muted: var(--gray-500); --text-on-blue: #FFFFFF; /* --- Typography ------------------------------------------------------ */ --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "D2Coding", ui-monospace, monospace; --fs-display: 40px; --lh-display: 48px; --fs-h1: 32px; --lh-h1: 40px; --fs-h2: 24px; --lh-h2: 32px; --fs-h3: 20px; --lh-h3: 28px; --fs-body-lg: 18px; --lh-body-lg: 28px; --fs-body: 16px; --lh-body: 26px; --fs-sm: 14px; --lh-sm: 22px; --fs-caption: 12px; --lh-caption: 18px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- 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; --space-16: 64px; /* --- Radius ---------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* --- Elevation ------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(17, 32, 82, 0.06), 0 1px 3px rgba(17, 32, 82, 0.08); --shadow-md: 0 4px 8px rgba(17, 32, 82, 0.06), 0 2px 4px rgba(17, 32, 82, 0.08); --shadow-lg: 0 12px 24px rgba(17, 32, 82, 0.10), 0 4px 8px rgba(17, 32, 82, 0.06); /* --- Layout ---------------------------------------------------------- */ --container-max: 1200px; --grid-gutter: 24px; } /* ========================================================================== Dark theme — 딥네이비 적용: (자동 prefers-color-scheme 전환은 하지 않는다. 라이트/다크 프리뷰가 각각 독립 카드로 렌더돼야 하기 때문.) ========================================================================== */ [data-theme="dark"] { /* --- Navy surface scale (다크 전용) ---------------------------------- */ --navy-950: #05070F; /* 가장 깊은 층 — 그림자·경계 */ --navy-900: #0A0F22; /* page bg */ --navy-800: #121A33; /* surface */ --navy-700: #18223F; /* surface-alt */ --navy-600: #243056; /* border-strong */ --navy-500: #26314F; /* border */ --navy-panel: #13204A; /* 발표용 패널 (프로젝터 대비 상향) */ /* --- Surface / text --------------------------------------------------- */ --bg: var(--navy-900); --surface: var(--navy-800); --surface-alt: var(--navy-700); --border: var(--navy-500); --border-strong: var(--navy-600); --text-strong: var(--blue-50); /* #EEF1F8 */ --text: var(--gray-300); /* #C4CAD6 */ --text-muted: #8A97B5; --text-on-blue: #FFFFFF; /* --- Brand (다크 배경 위 가독성 보정) --------------------------------- */ /* KIMM Blue 원색은 다크에서 거의 안 보인다. 면적색은 blue-bright를 쓴다. */ --blue-bright: #6E8AD6; --blue-soft: #3E5599; /* 차트 보조 계열·비활성 */ /* --- Semantic --------------------------------------------------------- */ --success: #34B97D; --warning: #E0A33A; --danger: var(--red-300); /* #F26165 — 원색 #ED1C24는 다크에서 탁하다 */ --info: var(--blue-bright); /* --- Elevation (라이트의 블루 그림자는 다크에서 보이지 않는다) --------- */ --shadow-sm: 0 1px 2px rgba(5, 7, 15, 0.40), 0 1px 3px rgba(5, 7, 15, 0.32); --shadow-md: 0 4px 8px rgba(5, 7, 15, 0.44), 0 2px 4px rgba(5, 7, 15, 0.32); --shadow-lg: 0 12px 24px rgba(5, 7, 15, 0.50), 0 4px 8px rgba(5, 7, 15, 0.36); } /* -------------------------------------------------------------------------- 발표(프로젝터) 변형 — 원거리·저대비 환경을 감안해 텍스트와 블루를 한 단계씩 올린다. 화면용 대시보드에는 적용하지 않는다. -------------------------------------------------------------------------- */ [data-theme="dark"][data-context="presentation"] { --surface: var(--navy-panel); /* #13204A */ --text-strong: #F4F6FA; --text: #C8D0E0; --blue-bright: #7E99DE; }