/* ============================================================ LedgerBeaver — Brand System v2 Dual-theme tokens (light + dark), warm cream light treatment. Theme is applied via [data-theme="light"|"dark"] on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;600;700&display=swap'); /* ------------------------------------------------------------ DEFAULT (DARK) — Ink Navy + Electric Amber ------------------------------------------------------------ */ :root, [data-theme="dark"] { color-scheme: dark; /* Surface stack */ --bg-0: #07101F; /* deepest page */ --bg-1: #0C1220; /* canvas */ --bg-2: #131D2E; /* surface / sidebar */ --bg-3: #1A2640; /* elevated card */ --bg-4: #22324F; /* hover */ --line: #1E2D45; --line-2: #2D3F5C; /* Text */ --text-hi: #F1F5F9; --text: #CBD5E1; --text-mid: #94A3B8; --text-lo: #64748B; --text-dim: #475569; /* Inversion-aware ink for amber CTAs */ --on-amber: #0C1220; /* Brand */ --amber: #F97316; --amber-hot: #FB923C; --amber-deep: #EA6C0A; --amber-soft: rgba(249, 115, 22, 0.12); --amber-glow: rgba(249, 115, 22, 0.35); /* Module accents (same in both themes for recognition) */ --ap: #F59E0B; --ar: #10B981; --gl: #A855F7; --approvals: #EAB308; --reports: #06B6D4; --vendor: #8B5CF6; --security: #EF4444; --ok: #10B981; --warn: #FBBF24; --err: #EF4444; --info: #60A5FA; --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.6); --shadow-pop: 0 24px 64px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); --shadow-glow: 0 0 0 1px var(--amber-glow), 0 12px 32px -8px var(--amber-glow); /* Hero glows */ --hero-glow-1: rgba(249,115,22,0.10); --hero-glow-2: rgba(168,85,247,0.06); /* Aliases kept from v1 for compat */ --ink-0: var(--bg-0); --ink-1: var(--bg-1); --ink-2: var(--bg-2); --ink-3: var(--bg-3); --ink-4: var(--bg-4); } /* ------------------------------------------------------------ LIGHT — Warm cream, beaver palette ------------------------------------------------------------ */ [data-theme="light"] { color-scheme: light; --bg-0: #F6F1E8; /* deepest page — warm cream */ --bg-1: #FBF6EC; /* canvas — paper */ --bg-2: #FFFFFF; /* surface */ --bg-3: #FFFCF5; /* elevated card */ --bg-4: #F2EAD9; /* hover / tan accent */ --line: #E7DECB; /* warm tan border */ --line-2: #D6C9AC; --text-hi: #2A1F12; /* deep beaver brown */ --text: #4A3A26; --text-mid: #735E40; --text-lo: #9E886A; --text-dim: #BDA98A; --on-amber: #FFFFFF; /* white text on amber CTA in light mode for contrast */ --amber: #E8650D; /* slightly deeper amber on cream for AA */ --amber-hot: #F97316; --amber-deep: #C25409; --amber-soft: rgba(232, 101, 13, 0.10); --amber-glow: rgba(232, 101, 13, 0.30); --ap: #C2410C; --ar: #047857; --gl: #7E22CE; --approvals: #A16207; --reports: #0E7490; --vendor: #6D28D9; --security: #B91C1C; --ok: #047857; --warn: #B45309; --err: #B91C1C; --info: #1D4ED8; --shadow-card: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 3px rgba(74,58,38,0.04), 0 8px 24px -12px rgba(74,58,38,0.12); --shadow-pop: 0 24px 64px -16px rgba(74,58,38,0.18), 0 0 0 1px rgba(0,0,0,0.04); --shadow-glow: 0 0 0 1px var(--amber-glow), 0 12px 32px -8px var(--amber-glow); --hero-glow-1: rgba(232,101,13,0.10); --hero-glow-2: rgba(168,85,247,0.05); --ink-0: var(--bg-0); --ink-1: var(--bg-1); --ink-2: var(--bg-2); --ink-3: var(--bg-3); --ink-4: var(--bg-4); } /* ------------------------------------------------------------ AUTO — follow OS preference ------------------------------------------------------------ */ @media (prefers-color-scheme: light) { [data-theme="system"] { color-scheme: light; --bg-0: #F6F1E8; --bg-1: #FBF6EC; --bg-2: #FFFFFF; --bg-3: #FFFCF5; --bg-4: #F2EAD9; --line: #E7DECB; --line-2: #D6C9AC; --text-hi: #2A1F12; --text: #4A3A26; --text-mid: #735E40; --text-lo: #9E886A; --text-dim: #BDA98A; --on-amber: #FFFFFF; --amber: #E8650D; --amber-hot: #F97316; --amber-deep: #C25409; --amber-soft: rgba(232,101,13,0.10); --amber-glow: rgba(232,101,13,0.30); --ap: #C2410C; --ar: #047857; --gl: #7E22CE; --approvals: #A16207; --reports: #0E7490; --vendor: #6D28D9; --security: #B91C1C; --ok: #047857; --warn: #B45309; --err: #B91C1C; --info: #1D4ED8; --shadow-card: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 3px rgba(74,58,38,0.04), 0 8px 24px -12px rgba(74,58,38,0.12); --shadow-pop: 0 24px 64px -16px rgba(74,58,38,0.18), 0 0 0 1px rgba(0,0,0,0.04); --hero-glow-1: rgba(232,101,13,0.10); --hero-glow-2: rgba(168,85,247,0.05); --ink-0: var(--bg-0); --ink-1: var(--bg-1); --ink-2: var(--bg-2); --ink-3: var(--bg-3); --ink-4: var(--bg-4); } } /* ------------------------------------------------------------ Typography & resets ------------------------------------------------------------ */ :root { --font-sans: 'Inter', 'Noto Sans KR', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: 'Space Grotesk', 'Inter', 'Noto Sans KR', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --r-sm: 6px; --r: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: dark; } [data-theme="light"] html, html[data-theme="light"] { color-scheme: light; } body { font-family: var(--font-sans); background: var(--bg-1); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01', 'cv11'; transition: background-color .25s ease, color .25s ease; } /* Korean falls back to Noto Sans KR via font stack */ :lang(ko) { font-family: 'Noto Sans KR', 'Inter', sans-serif; letter-spacing: -0.01em; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } a { color: inherit; text-decoration: none; } /* ---------- Display type ---------- */ .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; } .mono { font-family: var(--font-mono); } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mid); } /* ---------- Cards ---------- */ .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); } .card-elev { background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--r); font-weight: 600; font-size: 14px; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; white-space: nowrap; user-select: none; color: var(--text-hi); } .btn-primary { background: var(--amber); color: var(--on-amber); border-color: var(--amber-deep); } .btn-primary:hover { background: var(--amber-hot); transform: translateY(-1px); box-shadow: 0 8px 20px -6px var(--amber-glow); } .btn-ghost { background: transparent; color: var(--text-hi); border-color: var(--line-2); } .btn-ghost:hover { background: var(--bg-3); border-color: var(--amber); color: var(--amber); } .btn-soft { background: var(--bg-3); color: var(--text-hi); border-color: var(--line); } .btn-soft:hover { background: var(--bg-4); } /* ---------- Pills / chips ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-lo); background-clip: padding-box; border: 2px solid transparent; } /* ---------- Live dot ---------- */ @keyframes pulse-amber { 0%, 100% { box-shadow: 0 0 0 0 var(--amber-glow); } 50% { box-shadow: 0 0 0 6px transparent; } } .live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); animation: pulse-amber 2s ease-out infinite; display: inline-block; } .live-dot.amber { background: var(--amber); } /* ---------- Beaver mascot mounting ---------- */ .beaver-img { -webkit-user-drag: none; user-select: none; /* base drop-shadow + subtle inner contrast so the white sticker edges read as integrated */ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.20)) drop-shadow(0 10px 20px rgba(0,0,0,0.28)); display: inline-block; vertical-align: middle; transform-origin: 50% 80%; will-change: transform; } [data-theme="light"] .beaver-img, [data-theme="system"] .beaver-img { filter: drop-shadow(0 1px 0 rgba(74,58,38,0.10)) drop-shadow(0 6px 14px rgba(74,58,38,0.18)); } /* ---------- Halo treatments: keep beavers from feeling pasted ---------- */ .beaver-halo { position: relative; display: inline-grid; place-items: center; isolation: isolate; } .beaver-halo .beaver-img { position: relative; z-index: 1; } .beaver-halo::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 999px; transition: opacity .25s ease, transform .25s ease; } /* glow — soft radial wash, no border */ .beaver-halo-glow::before { background: radial-gradient(circle at 50% 55%, var(--amber-soft) 0%, color-mix(in oklab, var(--amber-soft) 60%, transparent) 36%, transparent 70%); } /* stamp — circular disk like a sticker, ring + soft halo */ .beaver-halo-stamp::before { background: radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--amber) 22%, transparent) 0%, transparent 60%), var(--amber-soft); box-shadow: 0 0 0 1px var(--amber) inset, 0 8px 22px -10px var(--amber-glow); } /* frame — rounded card. Pairs well with toasts + permission rows */ .beaver-halo-frame::before { background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line), 0 4px 14px -6px rgba(0,0,0,0.20); } /* spotlight — big radial highlight + concentric ring, for hero / celebration */ .beaver-halo-spotlight::before { background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--amber) 32%, transparent) 0%, transparent 55%), radial-gradient(circle at 50% 60%, var(--amber-soft) 0%, transparent 70%); } .beaver-halo-spotlight::after { content: ''; position: absolute; inset: 8%; border-radius: 999px; z-index: 0; border: 1px dashed color-mix(in oklab, var(--amber) 55%, transparent); opacity: 0.55; } @keyframes beaver-halo-spin { to { transform: rotate(360deg); } } /* ---------- Beaver animations: disabled per design (mascots stay still) ---------- */ .beaver-anim-idle, .beaver-anim-pop, .beaver-anim-wave, .beaver-anim-none, .beaver-anim-pop-then-idle, .beaver-float, .beaver-img.beaver-float { animation: none; } @keyframes beaver-bounce { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1.2deg); } } @keyframes beaver-pop { 0% { transform: scale(0.4) translateY(20px); opacity: 0; } 60% { transform: scale(1.08) translateY(0); opacity: 1; } 100% { transform: scale(1) translateY(0); } } @keyframes beaver-wave { 0%, 60%, 100% { transform: rotate(-2deg); } 20% { transform: rotate(8deg); } 35% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } } @media (prefers-reduced-motion: reduce) { .beaver-halo-spotlight::after { animation: none; } } /* ---------- Shared header chrome controls (theme + lang) ---------- */ .lb-controls { display: inline-flex; align-items: center; gap: 6px; } .lb-seg { display: inline-flex; align-items: center; padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; } .lb-seg button { border: none; background: transparent; width: 30px; height: 26px; display: grid; place-items: center; border-radius: 999px; color: var(--text-mid); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; } .lb-seg button:hover { color: var(--text-hi); } .lb-seg button.on { background: var(--amber); color: var(--on-amber); } .lb-seg button svg { width: 14px; height: 14px; } .lb-lang { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-mid); font-family: var(--font-mono); font-size: 11px; font-weight: 600; cursor: pointer; position: relative; } .lb-lang:hover { color: var(--text-hi); border-color: var(--line-2); } .lb-lang svg { width: 14px; height: 14px; } .lb-lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; min-width: 140px; box-shadow: var(--shadow-pop); z-index: 1000; } .lb-lang-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: transparent; color: var(--text); font-size: 13px; font-weight: 500; border-radius: 8px; text-align: left; } .lb-lang-menu button:hover { background: var(--bg-3); color: var(--text-hi); } .lb-lang-menu button.on { color: var(--amber); } .lb-lang-menu button.on::after { content: '✓'; margin-left: auto; }