/* TAP 디자인 토큰 (ERP 화면 레이어) * 출처: docs/brand-kit/TAP-Core-DESIGN.md §2~4, TAP-DESIGN-SYSTEM.md §1 (Core) * 규칙: 모든 색·간격·폰트는 이 변수로만 사용 (하드코딩 hex 금지). * 핑크(#E72159)는 한 화면에 5점 이하. 라이트 우선, 다크는 토큰만 정의(추후 [data-theme=dark] 활성). */ :root { /* === Core 브랜드 (불변, 전 레이어 공유) === */ --tap-core-pink: #E72159; /* 시그니처 */ --tap-core-pink-soft: #FCE5EC; --tap-core-pink-deep: #B5184A; --tap-core-ink: #2E2A29; --tap-core-ink-deep: #1A1716; --tap-core-navy: #1F2C50; /* 표 헤더/합계 강조 */ --tap-core-gold: #C8A864; /* 최종 금액/수주 */ --tap-core-font-ko: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; --tap-core-font-num: "Inter", "Pretendard Variable", system-ui, sans-serif; --tap-core-font-mono: "JetBrains Mono", "D2Coding", ui-monospace, "SF Mono", monospace; --tap-core-ease: cubic-bezier(0.16, 1, 0.3, 1); /* === ERP 토큰 — Core 에서 파생 === */ --erp-pink: var(--tap-core-pink); --erp-pink-soft: var(--tap-core-pink-soft); --erp-pink-deep: var(--tap-core-pink-deep); --erp-ink: var(--tap-core-ink); /* Surface (Light) */ --erp-bg: #F7F6F4; --erp-bg-alt: #FFFFFF; --erp-bg-sunken: #EFEDEA; --erp-bg-hover: #F0EBE9; --erp-border: #E5E1DF; --erp-border-strong: #C9C3BF; --erp-divider: #ECE9E6; /* Text (Light) */ --erp-text: #1F1B1A; --erp-text-soft: #5C5654; --erp-text-muted: #8A827E; --erp-text-inverse: #FFFFFF; --erp-text-link: var(--erp-pink-deep); /* Semantic */ --erp-success: #1F8A5B; --erp-success-soft: #E1F2EA; --erp-warning: #B36A00; --erp-warning-soft: #FCEFD9; --erp-danger: #C0223A; --erp-danger-soft: #FBE3E5; --erp-info: #1F5BC0; --erp-info-soft: #E1ECFB; --erp-neutral: #6B6361; --erp-neutral-soft: #EEEAE7; --erp-gold-soft: #F6EAD0; --erp-gold-deep: #8A6A2F; /* 수주(won) 칩 */ /* Money / 회계 */ --erp-money-pos: #1F8A5B; --erp-money-neg: #C0223A; --erp-money-zero: var(--erp-text-muted); /* 차트 시리즈 팔레트 — canvas(Chart.js)는 getComputedStyle 로 해석(dashboard.js cssVar) */ --chart-green: #22c55e; --chart-blue: #3b82f6; --chart-amber: #f59e0b; --chart-gray: #94a3b8; --chart-red: #ef4444; --chart-purple: #8b5cf6; --chart-pink: #ec4899; --chart-teal: #14b8a6; --chart-orange: #f97316; --chart-indigo: #6366f1; --chart-lime: #84cc16; /* Shadow / Overlay */ --erp-shadow-sm: 0 1px 2px rgba(31,27,26,0.06), 0 1px 1px rgba(31,27,26,0.04); --erp-shadow-md: 0 4px 12px rgba(31,27,26,0.08); --erp-shadow-lg: 0 16px 48px rgba(31,27,26,0.12); --erp-overlay: rgba(31,27,26,0.48); /* Fonts */ --erp-font-sans: var(--tap-core-font-ko); --erp-font-num: var(--tap-core-font-num); --erp-font-mono: var(--tap-core-font-mono); /* Type scale (화면용 — 인쇄 문서보다 작음) */ --erp-text-display: 28px; --erp-text-h1: 22px; --erp-text-h2: 18px; --erp-text-h3: 15px; --erp-text-body: 13px; --erp-text-body-md: 14px; --erp-text-label: 12px; --erp-text-mini: 11px; --erp-text-num-lg: 24px; --erp-text-num-xl: 32px; /* Spacing — 4px 그리드 */ --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-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* 레이아웃 / 밀도(default) */ --erp-content-max: 1440px; --row-h: 40px; --cell-py: 9px; --field-h: 32px; /* 모션 */ --motion-fast: 120ms; --motion-base: 180ms; } /* === 다크 토큰 (활성: ui.js 테마 토글이 제어) === */ [data-theme="dark"] { color-scheme: dark; /* 네이티브 위젯(달력 아이콘·스크롤바)도 다크로 */ --erp-bg: #15131A; --erp-bg-alt: #1E1B23; --erp-bg-sunken: #100E14; --erp-bg-hover: #2A2630; --erp-border: #2D2932; --erp-border-strong: #3D3743; --erp-divider: #25222B; --erp-text: #F2EFEC; --erp-text-soft: #B8B2AE; --erp-text-muted: #7E7874; --erp-text-inverse: #15131A; --erp-text-link: #FF6B92; --erp-success: #3FB87E; --erp-success-soft: #1B3329; --erp-warning: #E08F33; --erp-warning-soft: #3A2D17; --erp-danger: #E8536A; --erp-danger-soft: #3A1F25; --erp-info: #5B8AE8; --erp-info-soft: #1B2540; --erp-gold-soft: #3A2F18; --erp-gold-deep: #D9B871; --erp-money-pos: #3FB87E; --erp-money-neg: #E8536A; /* 차트 팔레트 — 다크에서 살짝 밝게(채도 유지) */ --chart-green: #34d17a; --chart-blue: #5c9dff; --chart-amber: #fbbf24; --chart-gray: #8b95a7; --chart-red: #f87171; --chart-purple: #a78bfa; --chart-pink: #f472b6; --chart-teal: #2dd4bf; --chart-orange: #fb923c; --chart-indigo: #818cf8; --chart-lime: #a3e635; --erp-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --erp-shadow-md: 0 4px 12px rgba(0,0,0,0.5); --erp-shadow-lg: 0 16px 48px rgba(0,0,0,0.6); --erp-overlay: rgba(0,0,0,0.64); } /* 밀도 모드 (표·폼 행 높이) */ [data-density="compact"] { --row-h: 32px; --cell-py: 6px; --field-h: 28px; } [data-density="comfortable"] { --row-h: 52px; --cell-py: 14px; --field-h: 40px; }