/* ============================================================ SnowUI 디자인 토큰 — 정본 (Claude Design 프로젝트 기준, 2026-07-24 전면 교체) 출처: claude.ai/design "SnowUI Design System" (c807317c) — components/fig-tokens.css(157 Figma 변수) + readme.md 명세를 전사. fig-tokens의 컬렉션 충돌(중복 선언)은 readme 명세(웹 대시보드 = SnowUI 컬렉션, 시맨틱 상태 = iOS 팔레트, 다크 = #1C1C1C 표면 + White 알파 fill)로 해소. 테마: html[data-theme="light"|"dark"]. 구 추출본(#000 잉크·#333 다크·독자 파스텔)은 폐기. ============================================================ */ /* 웹폰트(Inter·Pretendard)는 HTML 로 CDN 로드 — dashboard.html 참조 (셀프호스팅 시도 후 롤백, 2026-07-24) */ :root{ /* ---- 원시 토큰: SnowUI Light (fig-tokens :root 그대로) ---- */ --black-100:rgb(28,28,28); --black-80:rgba(28,28,28,0.8); --black-40:rgba(28,28,28,0.4); --black-20:rgba(28,28,28,0.2); --black-10:rgba(28,28,28,0.1); --black-5:rgba(28,28,28,0.05); --white-100:rgb(255,255,255); --white-80:rgba(255,255,255,0.8); --white-40:rgba(255,255,255,0.4); --white-20:rgba(255,255,255,0.2); --white-10:rgba(255,255,255,0.1); --white-5:rgba(255,255,255,0.05); --primary-brand:rgb(28,28,28); --primary-background:rgb(255,255,255); --primary-light:rgb(247,249,251); /* #F7F9FB 패널 */ --primary-blue:rgb(227,245,255); /* #E3F5FF 시그니처 파스텔 */ --primary-purple:rgb(229,236,246); /* #E5ECF6 시그니처 파스텔 */ --primary-purple-50:rgba(229,236,246,0.5); /* 세컨더리(차트·태그 팔레트, SnowUI 컬렉션) */ --secondary-indigo:rgb(149,164,252); /* #95A4FC */ --secondary-purple:rgb(198,199,248); /* #C6C7F8 */ --secondary-blue:rgb(177,227,255); /* #B1E3FF */ --secondary-cyan:rgb(168,197,218); /* #A8C5DA */ --secondary-green:rgb(161,227,203); /* #A1E3CB */ --secondary-mint:rgb(186,237,189); /* #BAEDBD */ --secondary-orange:rgb(255,203,131); /* #FFCB83 */ --secondary-yellow:rgb(255,233,153); /* #FFE999 */ --secondary-red:rgb(255,71,71); /* #FF4747 */ /* 시맨틱 상태(iOS 팔레트, readme "semantic states") */ --colors-blue:rgb(0,122,255); /* #007AFF */ --colors-green:rgb(52,199,89); /* #34C759 */ --colors-red:rgb(255,59,48); /* #FF3B30 */ --colors-orange:rgb(255,149,0); /* #FF9500 */ --surface-1:rgba(255,255,255,0.8); --surface-2:rgba(0,0,0,0.03); --surface-3:rgba(0,0,0,0.02); --background-3:rgba(255,255,255,0.9); --overlays-default:rgba(0,0,0,0.2); /* ---- 타입 (Inter만, 400/600, 스케일 12/14/18/24/48/64) ---- */ --font-family:"Inter","Pretendard Variable","Pretendard","Malgun Gothic",system-ui,sans-serif; /* 라틴=Inter, 한글=Pretendard(웹폰트 포함, 킷은 Inter 단독) */ --regular:400; --semibold:600; --t-12:12px; --lh-12:18px; --t-14:14px; --lh-14:20px; --t-18:18px; --lh-18:28px; --t-24:24px; --lh-24:32px; --t-48:48px; --lh-48:56px; --t-64:64px; --lh-64:72px; /* ---- 스페이싱(4 배수 0~80)·반경(4/8/12/16/24/32) ---- */ --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-28:28px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-80:80px; --radius-4:4px; --radius-8:8px; --radius-12:12px; --radius-16:16px; --radius-24:24px; --radius-32:32px; /* ---- 보더·그림자 (readme: 헤어라인 1px black-10, 그림자는 드묾·저알파) ---- */ --hairline:var(--black-10); --shadow-soft:0 1px 2px rgba(0,0,0,0.04); --shadow-overlay:0 4px 16px rgba(0,0,0,0.1); } /* ---- 다크: #1C1C1C 표면 + White 알파 fill (readme + fig-tokens dark 스코프) ---- */ html[data-theme="dark"]{ --black-100:rgb(255,255,255); --black-80:rgba(255,255,255,0.8); --black-40:rgba(255,255,255,0.4); --black-20:rgba(255,255,255,0.2); --black-10:rgba(255,255,255,0.1); --black-5:rgba(255,255,255,0.1); /* fig-tokens dark: black-5 → white 10% */ --white-100:rgb(28,28,28); --white-80:rgba(28,28,28,0.8); --white-40:rgba(28,28,28,0.4); --white-20:rgba(28,28,28,0.2); --white-10:rgba(28,28,28,0.1); --white-5:rgba(28,28,28,0.05); --primary-brand:rgb(198,199,248); /* #C6C7F8 다크 브랜드(SnowUI 다크 대시보드) */ --primary-background:rgb(28,28,28); /* 페이지 */ --primary-light:rgba(255,255,255,0.05); /* 패널 = White 5% */ --primary-purple-50:rgba(255,255,255,0.05); /* KPI 파스텔: fig-tokens 다크 스코프는 라이트 값 유지지만 사용자 지시(2026-07-24)로 다크 적응 — 정본 파스텔의 저알파 틴트(White 알파 fill 문법과 정합) */ --primary-blue:rgba(227,245,255,0.10); --primary-purple:rgba(229,236,246,0.10); --colors-blue:rgb(10,132,255); /* #0A84FF */ --colors-green:rgb(48,209,88); --colors-red:rgb(255,69,58); --colors-orange:rgb(255,159,10); --surface-1:rgba(255,255,255,0.04); --surface-2:rgba(0,0,0,0.1); --surface-3:rgba(255,255,255,0.04); --background-3:rgba(64,64,64,0.9); --overlays-default:rgba(0,0,0,0.49); --hairline:var(--black-10); } /* ============================================================ 호환 별칭(--sn-*): 기존 컴포넌트·앱 코드가 참조하는 이름을 정본 토큰으로 연결. 신규 코드는 정본 이름(--black-100 등)을 직접 쓸 것. ============================================================ */ :root, html[data-theme]{ --sn-font:var(--font-family); --sn-w-regular:var(--regular); --sn-w-semibold:var(--semibold); --sn-t-12:var(--t-12); --sn-lh-12:var(--lh-12); --sn-t-14:var(--t-14); --sn-lh-14:var(--lh-14); --sn-t-18:var(--t-18); --sn-lh-18:var(--lh-18); --sn-t-24:var(--t-24); --sn-lh-24:var(--lh-24); --sn-r-8:var(--radius-8); --sn-r-12:var(--radius-12); --sn-r-16:var(--radius-16); --sn-text-1:var(--black-100); --sn-text-2:var(--black-80); --sn-text-3:var(--black-40); --sn-line:var(--black-10); --sn-fill:var(--black-5); --sn-primary:var(--primary-brand); --sn-on-primary:var(--white-100); --sn-accent:var(--colors-blue); --sn-red:var(--secondary-red); --sn-orange:var(--secondary-orange); --sn-yellow:var(--secondary-yellow); --sn-green:var(--secondary-green); --sn-mint:var(--secondary-mint); --sn-cyan:var(--secondary-cyan); --sn-blue:var(--secondary-blue); --sn-purple:var(--secondary-purple); --sn-indigo:var(--secondary-indigo); --sn-color-1:var(--primary-blue); --sn-color-2:var(--primary-purple); --sn-shadow-1:var(--shadow-soft); --sn-shadow-2:var(--shadow-overlay); --sn-focus:0 0 0 4px var(--black-5); }