/* ============================================================ 온길 (Ongil) — Design Tokens Hybrid theme: Theme D (script-agnostic minimal) base + Theme A (warm hospitality) brand layer. This file is the single source of truth. ============================================================ */ :root { /* ---------- Color · Brand (client palette: rose + forest) ---------- */ --color-brand-primary: #B5635B; /* dusty rose-coral (deepened E3978F for white-text legibility) */ --color-brand-primary-hover: #A1564F; --color-brand-primary-soft: #E2B0A1; /* dusty rose (palette) */ --color-brand-primary-tint: #F7E7E2; /* pale rose */ --color-brand-secondary: #466356; /* forest sage (palette) */ --color-brand-secondary-soft: #AFC2B8; --color-brand-secondary-tint: #E4EBE7; /* ---------- Color · Surface ---------- */ --color-bg: #FBF6EE; /* warm ivory */ --color-surface: #FFFFFF; --color-surface-tonal: #F5EFE3; --color-surface-elevated: #FFFFFF; /* ---------- Color · Text ---------- */ --color-text-primary: #2A2118; /* dark walnut, 순수 검정 X */ --color-text-secondary: #5C5043; --color-text-tertiary: #8B7E6E; --color-text-inverse: #FBF6EE; --color-text-on-brand: #FFFFFF; /* ---------- Color · Border ---------- */ --color-border-subtle: #ECE3D2; --color-border-default: #DCD0BB; --color-border-strong: #B8A988; /* ---------- Color · Category (11 대테고리) ---------- */ --color-cat-food: #B5635B; /* dusty rose-coral (brand) */ --color-cat-culture: #466356; /* forest sage */ --color-cat-exhibition: #7B6B8A; /* plum */ --color-cat-support: #3D6680; /* slate */ --color-cat-shop: #D4922F; /* amber */ --color-cat-academy: #2A8A7A; /* teal */ --color-cat-beauty: #C47A9B; /* rose */ --color-cat-religion: #8B6E4E; /* umber */ --color-cat-library: #4A7A6A; /* teal-sage */ --color-cat-hospital: #B14437; /* brick */ --color-cat-bank: #6B7A3D; /* olive */ /* ---------- Color · Status ---------- */ --color-success: #4A7C4A; --color-warning: #D4922F; --color-danger: #B14437; --color-info: #3D6680; /* ---------- Typography · Family ---------- */ /* Noto Sans family covers KR / Latin / SC / Cyrillic with one designer's hand — chosen for 5-script balance over Pretendard's KR-optimized weight. */ --font-family-base: "Noto Sans KR", "Noto Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-family-mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; /* ---------- Typography · Scale (mobile-first) ---------- */ --font-size-2xs: 11px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-2xl: 28px; --font-size-3xl: 34px; --font-size-display: 42px; /* ---------- Typography · Line height ---------- */ --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* ---------- Typography · Weight ---------- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---------- Typography · Letter spacing ---------- */ --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; /* ---------- Spacing · 8px grid (with 4px halves) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ---------- Radius ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ---------- Shadow (warm-tinted, subtle) ---------- */ --shadow-sm: 0 1px 2px rgba(42, 33, 24, 0.06), 0 1px 1px rgba(42, 33, 24, 0.04); --shadow-md: 0 4px 8px rgba(42, 33, 24, 0.08), 0 2px 4px rgba(42, 33, 24, 0.04); --shadow-lg: 0 12px 24px rgba(42, 33, 24, 0.10), 0 4px 8px rgba(42, 33, 24, 0.06); --shadow-xl: 0 24px 48px rgba(42, 33, 24, 0.14), 0 8px 16px rgba(42, 33, 24, 0.08); /* ---------- Motion ---------- */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* ---------- Layout ---------- */ --layout-max-width: 480px; /* mobile-first; app sits centered on desktop */ --nav-height: 64px; /* Total space the floating nav occupies at the bottom (height + lift + safe area) — use for bottom padding of scroll areas and the position of map controls. */ --nav-clearance: calc(var(--nav-height) + var(--space-6) + env(safe-area-inset-bottom, 0px)); --header-height: 56px; --pullup-peek: 96px; --pullup-half: 50vh; --pullup-full: 90vh; /* ---------- Breakpoints (reference values for @media) ---------- sm: 480px md: 768px lg: 1024px xl: 1280px */ /* ---------- Z-index ---------- */ --z-base: 0; --z-map: 1; --z-overlay: 100; --z-sticky: 200; --z-nav: 300; --z-pullup: 400; --z-modal: 1000; --z-toast: 1100; } /* ============================================================ Category color utility — any element with [data-cat] gets --cat-color set. Components use background: var(--cat-color). Eliminates the need for per-component --restaurant/--life/etc classes. ============================================================ */ [data-cat="food"] { --cat-color: var(--color-cat-food); } [data-cat="culture"] { --cat-color: var(--color-cat-culture); } [data-cat="exhibition"] { --cat-color: var(--color-cat-exhibition); } [data-cat="support"] { --cat-color: var(--color-cat-support); } [data-cat="shop"] { --cat-color: var(--color-cat-shop); } [data-cat="academy"] { --cat-color: var(--color-cat-academy); } [data-cat="beauty"] { --cat-color: var(--color-cat-beauty); } [data-cat="religion"] { --cat-color: var(--color-cat-religion); } [data-cat="library"] { --cat-color: var(--color-cat-library); } [data-cat="hospital"] { --cat-color: var(--color-cat-hospital); } [data-cat="bank"] { --cat-color: var(--color-cat-bank); }