/* ============================================================ * tokens.css — 인슈뉴스 디자인 토큰 (단일 진실원) * 컨셉: "Ledger / 정밀 계기판" (loop/DESIGN.md) * 딥 포레스트-틴 브랜드 + 사프란 시그널 + 웜페이퍼 캔버스 + 다크 레일 * 모든 색/간격/라운드/타이포는 이 파일의 var() 를 참조한다. 하드코딩 금지. * ============================================================ */ /* ── 셀프호스트 폰트 (T44 · CDN 금지) ────────────────────── */ @font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: url('/public/fonts/PretendardVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Pretendard'; font-weight: 45 920; font-style: normal; font-display: swap; src: url('/public/fonts/PretendardVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Bricolage Grotesque'; font-weight: 500; font-style: normal; font-display: swap; src: url('/public/fonts/bricolage-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; font-style: normal; font-display: swap; src: url('/public/fonts/bricolage-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-style: normal; font-display: swap; src: url('/public/fonts/bricolage-latin-700.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/public/fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); } :root { /* ── 브랜드 ─────────────────────────────────────────── */ --color-brand: #0E5C4A; /* 딥 포레스트-틴 — 1차 액션·활성 */ --color-brand-600: #0B4A3C; --color-brand-700: #08382E; --color-brand-050: #E8F2EE; /* 연한 배경틴트 */ --color-brand-100: #CFE4DC; --color-accent: #E8A317; /* 사프란 — 강조·프리미엄·포인트 */ --color-accent-600: #C98A0C; --color-accent-050: #FBF0DB; /* ── 캔버스 & 서피스 ────────────────────────────────── */ --color-canvas: #FAF8F3; /* 웜페이퍼 배경 */ --color-surface: #FFFFFF; /* 카드 */ --color-surface-sunk: #F2EFE8; /* 함몰(입력·트랙) */ --color-rail: #0C2A24; /* 사이드바 다크 잉크-틴 */ --color-rail-hover: #123A31; --color-rail-active: #16463A; /* ── 잉크(텍스트) ───────────────────────────────────── */ --color-ink: #1A1A17; /* 본문 (대비 15:1+) */ --color-ink-2: #55524B; /* 보조 (대비 4.5:1+) */ --color-ink-3: #8A867D; /* 플레이스홀더 (대비 3:1, 큰텍스트/비활성만) */ --color-ink-on-brand: #FFFFFF; --color-ink-on-rail: #E7EFE9; /* 레일 위 텍스트 */ --color-ink-on-rail-2:#9DB4AC; /* 레일 위 보조 */ /* ── 시맨틱 (대비 검증됨) ──────────────────────────── */ --color-success: #1E7A4D; --color-success-bg: #E6F4EC; --color-warning: #B9770A; --color-warning-bg: #FBF0DB; --color-danger: #C0392B; --color-danger-bg: #FBE9E7; --color-info: #0E5C4A; --color-info-bg: #E8F2EE; /* ── 라인 ───────────────────────────────────────────── */ --color-line: #E4DFD5; /* 하이라인 보더 */ --color-line-strong: #CBC5B8; --color-focus: #1466C4; /* 포커스 링 (대비 3:1+ on canvas/surface) */ /* ── 타이포그래피 ───────────────────────────────────── */ --font-display: 'Bricolage Grotesque', 'Pretendard', system-ui, sans-serif; --font-body: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --fs-display: 32px; --lh-display: 1.15; --ls-display: -0.02em; --fs-h1: 24px; --lh-h1: 1.25; --ls-h1: -0.02em; --fs-h2: 20px; --lh-h2: 1.3; --ls-h2: -0.015em; --fs-h3: 16px; --lh-h3: 1.4; --fs-body: 15px; --lh-body: 1.5; --ls-body: -0.01em; --fs-sm: 13px; --lh-sm: 1.45; --fs-xs: 12px; --lh-xs: 1.4; /* ── 간격 ───────────────────────────────────────────── */ --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; /* ── 라운드 (타이트 4~8px) ─────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px; /* ── 그림자 (절제) ──────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(20,20,15,.06); --shadow-2: 0 4px 12px rgba(20,20,15,.08); --shadow-pop: 0 8px 28px rgba(12,42,36,.16); --ring: 0 0 0 3px rgba(20,102,196,.35); /* ── 모션 ───────────────────────────────────────────── */ --dur-fast: 120ms; --dur: 180ms; --ease: cubic-bezier(.2,.6,.2,1); /* ── 레이아웃 상수 ──────────────────────────────────── */ --rail-w: 248px; --rail-w-collapsed: 68px; --header-h: 56px; /* ============================================================ * 하위호환 별칭 — 기존 CSS(var(--primary), var(--gray-500) …)를 * 새 Ledger 토큰으로 매핑. 점진 리팩터 중 시각 일관성 유지. * ============================================================ */ --primary: var(--color-brand); --primary-dark: var(--color-brand-600); --primary-darker: var(--color-brand-700); --primary-700: var(--color-brand-700); --primary-50: var(--color-brand-050); --primary-100: var(--color-brand-100); --primary-200: #A9CFC3; --danger: var(--color-danger); --danger-50: var(--color-danger-bg); --danger-100: #F3C9C4; --success: var(--color-success); --success-50: var(--color-success-bg); --success-100: #BFE3CE; --warning: var(--color-warning); --warning-bg: var(--color-accent); --warning-50: var(--color-warning-bg); --info: var(--color-info); --info-50: var(--color-info-bg); --gold: var(--color-accent); --gold-50: var(--color-accent-050); --gray-50: var(--color-surface-sunk); --gray-100: var(--color-surface-sunk); --gray-200: var(--color-line); --gray-300: var(--color-line-strong); --gray-400: var(--color-ink-3); --gray-500: var(--color-ink-2); --gray-600: var(--color-ink-2); --gray-700: #33322D; --gray-900: var(--color-ink); --surface: var(--color-surface); --surface-alt: var(--color-canvas); --border: var(--color-line); --border-strong: var(--color-line-strong); --shadow-xs: var(--shadow-1); --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2); --shadow-lg: var(--shadow-pop); --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-lg); }