/** * COOKED — Night UI tokens (I'M COOKED mockup) * Usage: or .app[data-theme="night"] * Legacy light theme stays default until screens migrate. */ :root { /* ── Layer stack (z-index) ── */ --z-base: 0; --z-map: 1; --z-content: 2; --z-chip: 10; --z-topbar: 20; --z-fab: 30; --z-dock: 35; --z-sheet-backdrop: 40; --z-sheet: 45; --z-fullview: 15; --z-overlay: 50; --z-toast: 60; --z-modal: 70; /* ── Typography (free / commercial OK) ── */ --font-brand: 'Kalam', cursive; --font-display: 'Kalam', 'Archivo Black', cursive; --font-ui: 'Kalam', 'Pretendard', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-legacy-display: 'Archivo Black', sans-serif; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; /* ── Spacing (4px grid) ── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; } /* ═══════════════════════════════════════ NIGHT THEME — color + surface layers ═══════════════════════════════════════ */ [data-theme='night'], .app[data-theme='night'] { font-family: var(--font-ui); --c-bg-base: #120f1f; --c-bg-base-rgb: 18, 15, 31; /* L1 Surface — cards, list rows, input wells */ --c-bg-surface: #1e1b2e; --c-bg-surface-rgb: 30, 27, 46; /* L2 Raised — hover, selected chip, quick-action pills */ --c-bg-raised: #28243a; --c-bg-raised-rgb: 40, 36, 58; /* L3 Overlay — sheets, modals, bottom panels */ --c-bg-overlay: #2f2b42; --c-bg-overlay-rgb: 47, 43, 66; /* L4 Float — FAB, toast, popover */ --c-bg-float: #36324d; /* Accent */ --c-accent: #7b57ff; --c-accent-rgb: 123, 87, 255; --c-accent-soft: rgba(123, 87, 255, 0.18); --c-accent-hover: #8f6fff; --c-accent-pressed: #6a48e8; /* Help / positive action (Feed "도와줄게요", submit answer) */ --c-help: #3ecf8e; --c-help-rgb: 62, 207, 142; --c-help-soft: rgba(62, 207, 142, 0.16); /* Status */ --c-warn: #f5c542; --c-warn-soft: rgba(245, 197, 66, 0.14); --c-danger: #ff5b6a; --c-danger-soft: rgba(255, 91, 106, 0.14); --c-success: #3ecf8e; /* Text */ --c-text: #ffffff; --c-text-secondary: #a099b0; --c-text-muted: #6f6884; --c-text-inverse: #120f1f; /* Border & divider */ --c-border: rgba(255, 255, 255, 0.08); --c-border-strong: rgba(255, 255, 255, 0.14); --c-divider: rgba(255, 255, 255, 0.06); /* Elevation (glow on dark, not drop shadow) */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35); --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.45); --shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.5); --glow-accent: 0 0 24px rgba(123, 87, 255, 0.35); /* Semantic aliases (map to components later) */ --c-hero-cta: var(--c-accent); --c-nav-bg: var(--c-bg-surface); --c-nav-active: var(--c-accent-soft); --c-input-bg: var(--c-bg-raised); --c-tag-local: var(--c-accent-soft); --c-tag-traveler: var(--c-help-soft); /* Bridge → legacy vars (incremental migration) */ --ink: var(--c-text); --paper: var(--c-bg-base); --white: var(--c-bg-surface); --muted: var(--c-text-secondary); --line: var(--c-border); --green: var(--c-help); --orange: var(--c-accent); } /* Layer helpers — optional utility classes */ .layer-base { z-index: var(--z-base); } .layer-content { z-index: var(--z-content); } .layer-topbar { z-index: var(--z-topbar); } .layer-dock { z-index: var(--z-dock); } .layer-sheet { z-index: var(--z-sheet); } .layer-overlay { z-index: var(--z-overlay); } .layer-toast { z-index: var(--z-toast); } html, html .app { font-family: var(--font-ui); } .surface-base { background: var(--c-bg-base); color: var(--c-text); } .surface-card { background: var(--c-bg-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-card); } .surface-raised { background: var(--c-bg-raised); border-radius: var(--r-md); } .surface-overlay { background: var(--c-bg-overlay); box-shadow: var(--shadow-sheet); }