/* LabHub 디자인 토큰 — 모든 화면(SPA · /lang/ · /blog · /tools/)이 공유하는 한 벌. * * 규칙 * 1. 실제 값(색·크기·간격)은 이 파일에만 있다. 화면별 CSS 는 var() 만 쓴다. * 2. 두 층으로 나눈다. * Primitive --color-* / --cat-* HSL 세 값(색조 채도 명도). 투명도가 * 필요할 때 hsl(var(--cat) / .13) 꼴로 섞는다. * Semantic --bg, --text, --accent… 역할 이름. 컴포넌트는 이것만 본다. * 다크 모드는 semantic 층만 갈아 끼운다. * 3. 표면은 세 단계다. --bg(바닥) < --surface(카드·패널) < --surface-2(안쪽 칩·코드) * 그리고 --surface-3 은 hover 같은 순간 상태에만 쓴다. 카드를 겹겹이 쌓지 * 말고, 같은 표면 위에서 --border 로 나눈다. * 4. 강조색은 인디고 하나. 채도 높은 색은 상태(ok/warn/err)와 러닝패스 카테고리에만. * 5. 글자색 대비는 실측값이다(흰 바탕 기준). --text 18:1 · --dim 8:1 · --dimmer 5.2:1. * 본문 크기 글자에는 --dimmer 까지만 쓴다. 그보다 옅은 회색은 장식(구분선)용이다. * * 테마 선택: . 값이 없으면 시스템 설정을 따른다. */ :root { color-scheme: light; /* ── 글꼴 ── */ --font-sans: "SUIT Variable", "SUIT", -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; /* ── 크기 스케일 (본문 15px 기준) ── */ --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; --fs-display: clamp(34px, 3.2vw + 18px, 54px); --lh-tight: 1.2; --lh-snug: 1.4; --lh-base: 1.65; --lh-loose: 1.8; --fw-regular: 450; --fw-medium: 550; --fw-semibold: 650; --fw-bold: 750; --fw-black: 820; --ls-tight: -.022em; --ls-caps: .06em; /* ── 간격 ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px; --gutter: 24px; --content: 1200px; --content-narrow: 860px; --content-wide: 1560px; --topbar-h: 60px; /* ── 라운드 ── */ --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; --r2: var(--r-lg); /* 옛 이름 */ /* ── 움직임 ── */ --t-fast: 120ms; --t: 180ms; --t-slow: 280ms; --ease: cubic-bezier(.2, .7, .3, 1); --ease-pop: cubic-bezier(.2, .9, .3, 1.15); /* ── Primitive: 뉴트럴 (아주 옅은 파랑기가 도는 240 계열) ── */ --color-neutral-0: 0 0% 100%; --color-neutral-50: 240 20% 98%; --color-neutral-100: 240 14% 96%; --color-neutral-200: 240 12% 91%; --color-neutral-300: 240 9% 82%; --color-neutral-400: 240 6% 62%; --color-neutral-500: 240 5% 45%; --color-neutral-600: 240 6% 34%; --color-neutral-700: 240 7% 25%; --color-neutral-800: 232 12% 15%; --color-neutral-900: 232 16% 10%; --color-neutral-950: 232 20% 6%; /* ── Primitive: 브랜드 인디고 ── */ --color-brand-50: 238 100% 97%; --color-brand-100: 238 100% 94%; --color-brand-200: 239 100% 89%; --color-brand-300: 241 100% 82%; --color-brand-400: 243 96% 73%; --color-brand-500: 245 88% 64%; --color-brand-600: 246 76% 59%; --color-brand-700: 247 66% 50%; --color-brand-800: 248 62% 40%; --color-brand-900: 249 58% 28%; --color-brand-950: 246 50% 14%; /* ── Primitive: 상태색 ── */ --color-green-50: 150 60% 95%; --color-green-400: 155 70% 40%; --color-green-600: 156 70% 28%; --color-green-900: 155 48% 14%; --color-red-50: 355 85% 96%; --color-red-400: 354 68% 55%; --color-red-600: 355 65% 48%; --color-red-900: 355 45% 18%; --color-yellow-50: 44 100% 93%; --color-yellow-400:40 90% 60%; --color-yellow-500:40 96% 50%; --color-yellow-900:36 100% 30%; /* ── Primitive: 카테고리 (러닝패스 구분) ── */ --cat-coral: 14 100% 70%; --cat-skyblue: 200 81% 54%; --cat-olive: 81 82% 33%; --cat-purple: 259 87% 66%; --cat-mint: 182 100% 40%; --cat-magenta: 323 84% 60%; --cat-teal: 175 84% 32%; --cat-burgundy: 340 56% 54%; /* ── Semantic: 표면 ── */ --bg: #ffffff; --bg-elev: #f7f7fa; --surface: #ffffff; --surface-2: #f1f1f5; --surface-3: #e8e8ef; --overlay: rgba(20, 22, 34, .48); /* ── Semantic: 선 ── */ --border: #e5e5ec; --border-2: #cfcfda; --border-input: #8f8f9f; /* 입력칸 경계는 3:1 이 필요하다(1.4.11) → 3.18:1 */ /* ── Semantic: 글자 ── */ --text: #16161d; --dim: #4f4f5c; /* 8.06:1 */ --dimmer: #6c6c7a; /* 5.17:1 — 본문 크기에 쓸 수 있는 가장 옅은 회색 */ /* ── Semantic: 강조 ── */ --accent: #5347e6; /* 채움(버튼·링). 흰 글자 6.16:1 */ --accent-hover: #4437d6; --accent-text: #4b3fd6; /* 흰 바탕 위의 글자 7.04:1 */ --accent-bg: #eeedfe; /* 옅은 판 */ --accent-fg: #3730b0; /* 옅은 판 위 글자 8.2:1 */ --on-accent: #ffffff; --accent-2: var(--accent-hover); /* 옛 이름 */ /* ── Semantic: 상태 ── */ --ok: #157a4f; --ok-bg: #e6f7ef; --ok-fill: #1f9d64; --warn: #9a5b00; --warn-bg: #fff4dc; --warn-fill: #f2b23c; --err: #c92a36; --err-bg: #fdecee; --err-fill: #d2323e; --pro: #f4b942; --pro-fg: #5a3b00; /* ── Semantic: 터미널·코드 (테마와 무관하게 어둡다) ── */ --term-bg: #0f1420; --term-fg: #dde5f2; --term-dim: #8d9ab5; --code-bg: var(--surface-2); /* 커버 아트는 라이트에서도 어둡다. 로고 수십 개가 저마다 색이라, 어두운 판 하나로 통일해야 카탈로그가 한 제품처럼 보인다. */ --artBg: #141824; --artChip: rgba(255, 255, 255, .95); /* ── 그림자 — 떠 있는 것(메뉴·모달·토스트)에만 ── */ --shadow-xs: 0 1px 2px rgba(16, 18, 32, .06); --shadow-sm: 0 1px 3px rgba(16, 18, 32, .08), 0 1px 2px rgba(16, 18, 32, .04); --shadow: 0 4px 14px -4px rgba(16, 18, 32, .12), 0 1px 3px rgba(16, 18, 32, .06); --shadow-lg: 0 18px 44px -12px rgba(16, 18, 32, .22), 0 2px 8px rgba(16, 18, 32, .06); /* 포커스 링 — 한 군데서 정한다(2.4.7) */ --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); /* ── 옛 이름 (style.css 와 커뮤니티·도구 화면이 쓰던 별칭) ── */ --card: var(--surface); --card-2: var(--surface-2); --panel2: var(--surface-2); --fg: var(--text); --muted: var(--dimmer); --line: var(--border); --brand: var(--accent-text); --brand-soft: var(--accent-bg); } /* ── 다크 ── 바닥은 완전한 검정이 아니라 남색기가 도는 짙은 회색. 표면 세 단계가 서로 구분되도록 명도를 한 단씩 띄웠고, 글자는 순백 대신 살짝 눌러 눈부심을 줄였다. */ [data-theme="dark"] { color-scheme: dark; --bg: #0d0e14; --bg-elev: #12131b; --surface: #171923; --surface-2: #1f2230; --surface-3: #282b3b; --overlay: rgba(4, 5, 10, .64); --border: #262938; --border-2: #363a4e; --border-input: #6b7088; /* 3.58:1 */ --text: #eceef5; --dim: #b3b7c7; /* 8.76:1 */ --dimmer: #8b90a5; /* 5.53:1 */ --accent: #6c5ff2; /* 흰 글자 4.61:1 */ --accent-hover: #7f74f6; --accent-text: #9d95ff; /* 6.82:1 */ --accent-bg: #262552; --accent-fg: #c9c4ff; --on-accent: #ffffff; --ok: #4ccb8a; --ok-bg: #123324; --ok-fill: #24a86a; --warn: #f3c15b; --warn-bg: #3a2a08; --warn-fill: #e0a634; --err: #ff7b85; --err-bg: #43181d; --err-fill: #d8414c; --pro: #f4b942; --pro-fg: #3d2800; --artBg: #0c0f18; --artChip: rgba(255, 255, 255, .92); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --shadow: 0 4px 14px -4px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4); } /* 시스템이 다크이고 페이지가 아직 테마를 고르지 않았을 때(정적 페이지·첫 페인트). 값은 위 블록과 같다 — 선택자만 다르다. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg: #0d0e14; --bg-elev: #12131b; --surface: #171923; --surface-2: #1f2230; --surface-3: #282b3b; --overlay: rgba(4, 5, 10, .64); --border: #262938; --border-2: #363a4e; --border-input: #6b7088; --text: #eceef5; --dim: #b3b7c7; --dimmer: #8b90a5; --accent: #6c5ff2; --accent-hover: #7f74f6; --accent-text: #9d95ff; --accent-bg: #262552; --accent-fg: #c9c4ff; --on-accent: #ffffff; --ok: #4ccb8a; --ok-bg: #123324; --ok-fill: #24a86a; --warn: #f3c15b; --warn-bg: #3a2a08; --warn-fill: #e0a634; --err: #ff7b85; --err-bg: #43181d; --err-fill: #d8414c; --pro: #f4b942; --pro-fg: #3d2800; --artBg: #0c0f18; --artChip: rgba(255, 255, 255, .92); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --shadow: 0 4px 14px -4px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4); } } /* 움직임을 줄이라고 한 사람에게는 전환을 사실상 끈다. 각 화면의 애니메이션도 이 변수를 쓰므로 한 줄로 전부 꺼진다. */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t: 1ms; --t-slow: 1ms; } }