/* ===================================================================== HSLAB Expert Demo Kit — Design Tokens 포트폴리오 데모 공통 디자인 토큰. 라이트 1종 + 데모별 액센트 테마. 사용: 처럼 테마 지정 (기본 indigo) ===================================================================== */ :root { /* ---- 중립 표면/텍스트 ---- */ --dk-bg: #f6f8fb; --dk-surface: #ffffff; --dk-surface-2: #f1f5f9; --dk-surface-3: #e9eef5; --dk-border: #e5e9f0; --dk-border-strong: #d4dae3; --dk-text: #0f172a; --dk-text-muted: #64748b; --dk-text-subtle: #94a3b8; --dk-text-invert: #ffffff; /* ---- 액센트 (기본: indigo). 테마로 덮어씀 ---- */ --dk-accent: #4f46e5; --dk-accent-strong: #4338ca; --dk-accent-soft: rgba(79, 70, 229, 0.12); --dk-accent-softer: rgba(79, 70, 229, 0.06); --dk-accent-contrast:#ffffff; --dk-accent-grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); /* ---- 시맨틱 ---- */ --dk-success: #047857; --dk-success-soft: rgba(16, 185, 129, 0.14); --dk-warning: #b45309; --dk-warning-soft: rgba(245, 158, 11, 0.16); --dk-danger: #b91c1c; --dk-danger-soft: rgba(239, 68, 68, 0.14); --dk-info: #1d4ed8; --dk-info-soft: rgba(59, 130, 246, 0.14); /* ---- 차트 팔레트 ---- */ --dk-chart-grid: #eef2f7; --dk-chart-tick: #94a3b8; /* ---- 라운드 ---- */ --dk-r-sm: 6px; --dk-r-md: 10px; --dk-r-lg: 14px; --dk-r-xl: 20px; --dk-r-full: 999px; /* ---- 그림자 ---- */ --dk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --dk-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04); --dk-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06); --dk-ring: 0 0 0 3px var(--dk-accent-soft); /* ---- 간격 스케일 ---- */ --dk-1: 4px; --dk-2: 8px; --dk-3: 12px; --dk-4: 16px; --dk-5: 20px; --dk-6: 24px; --dk-8: 32px; --dk-10: 40px; --dk-12: 48px; /* ---- 타이포 ---- */ --dk-font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --dk-fs-xs: 12px; --dk-fs-sm: 13px; --dk-fs-base: 14px; --dk-fs-md: 16px; --dk-fs-lg: 18px; --dk-fs-xl: 22px; --dk-fs-2xl: 28px; --dk-fs-3xl: 34px; /* ---- 모션 ---- */ --dk-ease: cubic-bezier(0.4, 0, 0.2, 1); --dk-dur-fast: 0.15s; --dk-dur: 0.25s; --dk-dur-slow: 0.4s; /* ---- 레이아웃 ---- */ --dk-sidebar-w: 248px; --dk-z-sidebar: 200; --dk-z-overlay: 100; --dk-z-header: 50; --dk-z-toast: 4000; --dk-z-modal: 5000; } /* ===================== 데모별 액센트 테마 ===================== */ /* 앰버/오렌지 — web_platform (ShopMax Pro 이커머스) */ [data-dk-theme="amber"] { --dk-accent: #ea580c; --dk-accent-strong: #c2410c; --dk-accent-soft: rgba(234, 88, 12, 0.12); --dk-accent-softer: rgba(234, 88, 12, 0.06); --dk-accent-grad: linear-gradient(135deg, #fbbf24 0%, #f97316 100%); --dk-ring: 0 0 0 3px rgba(234, 88, 12, 0.18); } /* 에메랄드 — enhance_erp 등 */ [data-dk-theme="emerald"] { --dk-accent: #047857; --dk-accent-strong: #065f46; --dk-accent-soft: rgba(16, 185, 129, 0.12); --dk-accent-softer: rgba(16, 185, 129, 0.06); --dk-accent-grad: linear-gradient(135deg, #34d399 0%, #059669 100%); --dk-ring: 0 0 0 3px rgba(16, 185, 129, 0.18); } /* 블루 — system_integration / public_service */ [data-dk-theme="blue"] { --dk-accent: #1d4ed8; --dk-accent-strong: #1e40af; --dk-accent-soft: rgba(37, 99, 235, 0.12); --dk-accent-softer: rgba(37, 99, 235, 0.06); --dk-accent-grad: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); --dk-ring: 0 0 0 3px rgba(37, 99, 235, 0.18); } /* 바이올렛 — startup_mvp (SaaS) */ [data-dk-theme="violet"] { --dk-accent: #7c3aed; --dk-accent-strong: #6d28d9; --dk-accent-soft: rgba(124, 58, 237, 0.12); --dk-accent-softer: rgba(124, 58, 237, 0.06); --dk-accent-grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); --dk-ring: 0 0 0 3px rgba(124, 58, 237, 0.18); } /* 청록 — mobile_app (IoT) */ [data-dk-theme="teal"] { --dk-accent: #0d9488; --dk-accent-strong: #0f766e; --dk-accent-soft: rgba(13, 148, 136, 0.12); --dk-accent-softer: rgba(13, 148, 136, 0.06); --dk-accent-grad: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%); --dk-ring: 0 0 0 3px rgba(13, 148, 136, 0.18); } /* 로즈 — approval (WorkSign 전자결재 · 결재 도장 메타포) */ [data-dk-theme="rose"] { --dk-accent: #e11d48; --dk-accent-strong: #be123c; --dk-accent-soft: rgba(225, 29, 72, 0.12); --dk-accent-softer: rgba(225, 29, 72, 0.06); --dk-accent-grad: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); --dk-ring: 0 0 0 3px rgba(225, 29, 72, 0.18); } @media (prefers-reduced-motion: reduce) { :root { --dk-dur-fast: 0.001s; --dk-dur: 0.001s; --dk-dur-slow: 0.001s; } }