/* * Damoa24 visual tokens. * Theme contract: * for the bright Damoa24 portal. * or class="theme-tests" for 테스트 다모아. * No webfont or external visual dependency is required. */ :root { color-scheme: light; --font-sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --ink-950: #151629; --ink-900: #1d2038; --ink-700: #424761; --ink-600: #5d637c; --ink-500: #777d94; --line: #e6e8f1; --line-strong: #d8dbe8; --paper: #ffffff; --canvas: #f7f8fc; --brand: #3458e6; --brand-deep: #243ca8; --brand-soft: #e9eeff; --office: #1266d6; --office-soft: #e5f1ff; --jam-purple: #7546e8; --jam-purple-deep: #5630bd; --jam-lilac: #eee7ff; --jam-coral: #ff6f91; --jam-coral-soft: #ffe5ec; --jam-mint: #45d8bc; --jam-mint-soft: #dcfaf4; --jam-yellow: #ffd65a; --success: #16825d; --danger: #c63f57; --shadow-xs: 0 1px 2px rgba(25, 28, 52, 0.06); --shadow-sm: 0 8px 24px rgba(25, 28, 52, 0.08); --shadow-md: 0 18px 48px rgba(42, 37, 89, 0.13); --shadow-focus: 0 0 0 4px rgba(52, 88, 230, 0.2); --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3rem; --space-10: 4rem; --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem); --step-0: clamp(0.94rem, 0.9rem + 0.18vw, 1rem); --step-1: clamp(1.05rem, 0.98rem + 0.34vw, 1.2rem); --step-2: clamp(1.22rem, 1.08rem + 0.64vw, 1.55rem); --step-3: clamp(1.55rem, 1.3rem + 1.2vw, 2.15rem); --step-4: clamp(2.15rem, 1.72rem + 2.05vw, 3.35rem); --step-5: clamp(2.7rem, 2rem + 3.2vw, 4.75rem); --content: 70rem; --header-height: 3.5rem; --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1); --duration-fast: 140ms; --duration: 220ms; } body[data-page="test-hub"], .theme-tests, .theme-damojam { --brand: var(--jam-purple); --brand-deep: var(--jam-purple-deep); --brand-soft: var(--jam-lilac); --canvas: #fbf9ff; --shadow-focus: 0 0 0 4px rgba(117, 70, 232, 0.2); } @media (prefers-contrast: more) { :root { --ink-700: #2f3248; --ink-600: #42465d; --line: #c9ccd8; --line-strong: #aeb3c4; } } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration: 0ms; scroll-behavior: auto; } }