/* ===================================================================== NEZAPP Demo · Design Tokens (shared) --------------------------------------------------------------------- These tokens are EXTRACTED from the real biz/admin apps so the demo feels authentic, but they live entirely inside biz/public/demo/ and do NOT import anything from the real app. When the demo is retired, delete biz/public/demo/ and this file goes with it. Sources (read-only references, not imported): biz/src/assets/css/common.scss (:root --*) biz/src/assets/css/helpers/_variables.scss ($font-family etc.) admin/src/assets/scss/variables.scss ($primary, $bg-* etc.) Naming rule: --demo-* = truly shared (fonts, z-index, transitions) --demo-biz-* = biz (light) theme --demo-admin-* = admin (dark) theme Pages should apply a theme via a class on or : or That class re-maps the neutral --demo-bg / --demo-text / --demo-primary aliases below so component CSS can be written once. ===================================================================== */ @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 100; font-display: swap; src: local("Pretendard Thin"), url("../../fonts/Pretendard-Thin.subset.fd268e8d.woff2") format("woff2"), url("../../fonts/Pretendard-Thin.subset.529747cd.woff") format("woff"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 200; font-display: swap; src: local("Pretendard ExtraLight"), url("../../fonts/Pretendard-ExtraLight.subset.d385aac9.woff2") format("woff2"), url("../../fonts/Pretendard-ExtraLight.subset.ffa7334f.woff") format("woff"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 300; font-display: swap; src: local("Pretendard Light"), url("../../fonts/Pretendard-Light.subset.50c3fb32.woff2") format("woff2"), url("../../fonts/Pretendard-Light.subset.585a7cf7.woff") format("woff"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 400; font-display: swap; src: local("Pretendard Regular"), url("../../fonts/Pretendard-Regular.subset.352c8e19.woff2") format("woff2"), url("../../fonts/Pretendard-Regular.subset.03d8daed.woff") format("woff"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 500; font-display: swap; src: local("Pretendard Medium"), url("../../fonts/Pretendard-Medium.subset.ce54de3a.woff2") format("woff2"), url("../../fonts/Pretendard-Medium.subset.358ea39e.woff") format("woff"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 600; font-display: swap; src: local("Pretendard SemiBold"), url("../../fonts/Pretendard-SemiBold.subset.d67e7444.woff2") format("woff2"), url("../../fonts/Pretendard-SemiBold.subset.a7c8a0e1.woff") format("woff"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 700; font-display: swap; src: local("Pretendard Bold"), url("../../fonts/Pretendard-Bold.subset.4fe33033.woff2") format("woff2"), url("../../fonts/Pretendard-Bold.subset.ad31b300.woff") format("woff"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 800; font-display: swap; src: local("Pretendard ExtraBold"), url("../../fonts/Pretendard-ExtraBold.subset.df5e9b5a.woff2") format("woff2"), url("../../fonts/Pretendard-ExtraBold.subset.3611773c.woff") format("woff"); } @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 900; font-display: swap; src: local("Pretendard Black"), url("../../fonts/Pretendard-Black.subset.4c3afc36.woff2") format("woff2"), url("../../fonts/Pretendard-Black.subset.d57ad8ed.woff") format("woff"); } :root { /* ---------- Fonts ---------- */ --demo-font-sans: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --demo-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* ---------- Type scale (rem-ish, but px for predictability in demo) ---------- */ --demo-font-xs: 11px; --demo-font-sm: 12px; --demo-font-base: 14px; --demo-font-md: 15px; --demo-font-lg: 16px; --demo-font-xl: 18px; --demo-font-2xl: 20px; --demo-font-3xl: 24px; --demo-font-4xl: 30px; /* ---------- Weights ---------- */ --demo-weight-light: 300; --demo-weight-regular: 400; --demo-weight-medium: 500; --demo-weight-semibold: 600; --demo-weight-bold: 700; --demo-weight-extrabold: 800; /* ---------- Spacing (admin-style scale) ---------- */ --demo-space-1: 4px; --demo-space-2: 8px; --demo-space-3: 12px; --demo-space-4: 16px; --demo-space-5: 20px; --demo-space-6: 24px; --demo-space-8: 32px; --demo-space-10: 40px; --demo-space-12: 48px; --demo-space-16: 64px; /* alias matching biz: --content-padding === 16px */ --demo-content-padding: 16px; /* ---------- Radius (biz rounded look) ---------- */ --demo-radius-xs: 4px; --demo-radius-sm: 8px; --demo-radius-md: 12px; --demo-radius-lg: 16px; --demo-radius-xl: 20px; --demo-radius-full: 999px; /* ---------- Shadows ---------- */ --demo-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --demo-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --demo-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --demo-shadow-xl: 0 16px 40px rgba(0,0,0,0.16); /* ---------- Transitions ---------- */ --demo-transition-fast: 0.15s ease; --demo-transition: 0.25s ease; --demo-transition-slow: 0.45s ease; /* ---------- Z-index ---------- */ --demo-z-sticky: 10; --demo-z-dropdown: 100; --demo-z-modal: 1000; --demo-z-toast: 2000; /* ---------- Breakpoints (for JS reference; CSS uses literals) ---------- */ --demo-bp-xs: 480px; --demo-bp-sm: 640px; --demo-bp-md: 768px; --demo-bp-lg: 1024px; --demo-bp-xl: 1280px; /* ================================================================= BIZ THEME · light (mirrors biz/common.scss :root) ================================================================= */ --demo-biz-bg: #F8F9FA; /* outer page bg */ --demo-biz-surface: #FFFFFF; /* cards, inputs */ --demo-biz-surface-alt: #F9FAFB; /* subtle section bg */ --demo-biz-text: #1F2937; /* gray-800 */ --demo-biz-text-strong: #111827; /* gray-900 */ --demo-biz-text-muted: #6B7280; /* gray-500 */ --demo-biz-text-subtle: #9CA3AF; /* gray-400 */ --demo-biz-border: #E5E7EB; /* gray-200 */ --demo-biz-border-subtle: #F3F4F6; /* gray-100 */ --demo-biz-primary: #3B82F6; /* Trust Blue 500 */ --demo-biz-primary-light: #60A5FA; --demo-biz-primary-dark: #2563EB; --demo-biz-primary-50: #EFF6FF; --demo-biz-secondary: #1E40AF; --demo-biz-success: #10B981; --demo-biz-warning: #F59E0B; --demo-biz-danger: #EF4444; --demo-biz-info: #3B82F6; --demo-biz-star: #FFC107; /* rating stars */ /* biz gray scale (re-exported for explicit use) */ --demo-biz-gray-50: #F9FAFB; --demo-biz-gray-100: #F3F4F6; --demo-biz-gray-200: #E5E7EB; --demo-biz-gray-300: #D1D5DB; --demo-biz-gray-400: #9CA3AF; --demo-biz-gray-500: #6B7280; --demo-biz-gray-600: #4B5563; --demo-biz-gray-700: #374151; --demo-biz-gray-800: #1F2937; --demo-biz-gray-900: #111827; /* ================================================================= ADMIN THEME · dark (mirrors admin/variables.scss) ================================================================= */ --demo-admin-bg: #0F172A; /* bg-primary */ --demo-admin-bg-2: #1E293B; /* bg-secondary / card */ --demo-admin-bg-3: #334155; /* bg-tertiary / hover */ --demo-admin-bg-input: #0F172A; --demo-admin-text: #F8FAFC; /* text-primary */ --demo-admin-text-muted: #94A3B8; /* text-secondary / muted */ --demo-admin-text-subtle: #64748B; /* text-tertiary */ --demo-admin-border: #334155; --demo-admin-border-light: #475569; --demo-admin-primary: #6366F1; /* indigo */ --demo-admin-primary-light: #818CF8; --demo-admin-primary-dark: #4F46E5; --demo-admin-accent: #22D3EE; /* cyan */ --demo-admin-accent-light: #67E8F9; --demo-admin-accent-dark: #06B6D4; --demo-admin-success: #10B981; --demo-admin-success-light: #34D399; --demo-admin-warning: #F59E0B; --demo-admin-warning-light: #FBBF24; --demo-admin-danger: #EF4444; --demo-admin-danger-light: #F87171; --demo-admin-info: #3B82F6; --demo-admin-info-light: #60A5FA; /* admin layout */ --demo-admin-sidebar-width: 260px; --demo-admin-header-height: 64px; --demo-admin-header-height-mobile: 56px; } /* ===================================================================== Theme aliases — set one of these classes on (or ) and the neutral --demo-* variables resolve to the correct palette. ===================================================================== */ .demo-theme-biz { --demo-bg: var(--demo-biz-bg); --demo-surface: var(--demo-biz-surface); --demo-surface-alt: var(--demo-biz-surface-alt); --demo-text: var(--demo-biz-text); --demo-text-strong: var(--demo-biz-text-strong); --demo-text-muted: var(--demo-biz-text-muted); --demo-text-subtle: var(--demo-biz-text-subtle); --demo-border: var(--demo-biz-border); --demo-border-subtle: var(--demo-biz-border-subtle); --demo-primary: var(--demo-biz-primary); --demo-primary-light: var(--demo-biz-primary-light); --demo-primary-dark: var(--demo-biz-primary-dark); --demo-primary-50: var(--demo-biz-primary-50); --demo-success: var(--demo-biz-success); --demo-warning: var(--demo-biz-warning); --demo-danger: var(--demo-biz-danger); --demo-info: var(--demo-biz-info); color-scheme: light; } .demo-theme-admin { --demo-bg: var(--demo-admin-bg); --demo-surface: var(--demo-admin-bg-2); --demo-surface-alt: var(--demo-admin-bg-3); --demo-text: var(--demo-admin-text); --demo-text-strong: var(--demo-admin-text); --demo-text-muted: var(--demo-admin-text-muted); --demo-text-subtle: var(--demo-admin-text-subtle); --demo-border: var(--demo-admin-border); --demo-border-subtle: var(--demo-admin-border); --demo-primary: var(--demo-admin-primary); --demo-primary-light: var(--demo-admin-primary-light); --demo-primary-dark: var(--demo-admin-primary-dark); --demo-primary-50: rgba(99, 102, 241, 0.15); --demo-success: var(--demo-admin-success); --demo-warning: var(--demo-admin-warning); --demo-danger: var(--demo-admin-danger); --demo-info: var(--demo-admin-info); color-scheme: dark; }