/* bn-tokens.css — 이지헬퍼 디자인 토큰 * Daylight (라이트, 기본) + Vault (다크) 두 테마. * 로 전환. * 모든 페이지 CSS는 hex 색을 직접 쓰지 말고 var(--bn-*) 사용. * * 토큰 출처: Claude Design 핸드오프 부놈컴퍼니/web/theme.jsx */ :root, :root[data-theme="daylight"] { /* Surface */ --bn-bg: #FFFFFF; --bn-surface: #F7F8FA; --bn-surface2: #EEF1F5; --bn-surfaceHi: #FFFFFF; --bn-line: #E3E7EE; --bn-lineSoft: #EDEFF3; /* Ink */ --bn-ink: #0B1220; --bn-ink2: #28324A; --bn-muted: #5A657A; --bn-mutedSoft: #8A93A6; /* Brand */ --bn-primary: #1E40AF; --bn-primaryHi: #1D3FA8; --bn-primaryWk: #E6ECF8; --bn-primaryFg: #FFFFFF; /* Semantic — 한국 시장 관행 (상승=빨강, 하락=파랑) */ --bn-up: #B42318; --bn-down: #1456C9; --bn-warn: #B5651D; --bn-ok: #1E7A4D; --bn-mark: #F2C94C; /* Shadow */ --bn-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04); /* Site chrome (사이트 헤더/네비 — 기존 #0f3460 톤 유지) */ --bn-chrome-bg: #0f3460; --bn-chrome-bgDeep: #0a2547; --bn-chrome-fg: #ffffff; color-scheme: light; } :root[data-theme="vault"] { /* elevation 위계: surface(페이지) → bg(카드) → surfaceHi(hover) → surface2(강조) 너무 검정에 가까우면 가독성/명도 차이가 사라지므로, contrast 확보를 위해 bg와 surface 모두 한 단계씩 더 밝게 조정. */ --bn-bg: #181C28; /* 카드 배경 (페이지보다 살짝 밝지만 차분) */ --bn-surface: #11141B; /* 페이지 배경 (deepest) */ --bn-surface2: #232A3C; /* 강조 surface */ --bn-surfaceHi: #1F2433; /* 카드 hover */ --bn-line: #2D3344; --bn-lineSoft: #1D222F; --bn-ink: #EDE6D3; --bn-ink2: #D7CFB9; --bn-muted: #9A8F75; --bn-mutedSoft: #6E6755; --bn-primary: #D6B97A; --bn-primaryHi: #E2C68A; --bn-primaryWk: #2A2316; --bn-primaryFg: #15110A; --bn-up: #E5675A; --bn-down: #6FA8FF; --bn-warn: #D9A24A; --bn-ok: #7BC698; --bn-mark: #E2C68A; --bn-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 4px 18px rgba(0,0,0,.4); /* Site chrome (Vault: surface 톤으로 다크 헤더) */ --bn-chrome-bg: #15181F; --bn-chrome-bgDeep: #0E1014; --bn-chrome-fg: #EDE6D3; color-scheme: dark; } html, body { /* 페이지 배경은 deepest(--bn-surface). 카드/패널은 var(--bn-bg)로 한 단계 밝게. Daylight: surface=#F7F8FA / bg=#FFFFFF (카드 흰) Vault: surface=#0E1014 / bg=#1A1E27 (카드 살짝 밝음) */ background: var(--bn-surface); color: var(--bn-ink); }