/* Betlive.kr — Design Tokens */ :root { /* Brand */ --bl-blue-50: #EEF4FF; --bl-blue-100: #DCE8FF; --bl-blue-200: #B8D1FF; --bl-blue-300: #8AB3FF; --bl-blue-400: #5491FF; --bl-blue-500: #1A66FF; /* Primary — Live Blue */ --bl-blue-600: #0F4EDB; --bl-blue-700: #0B3BAD; --bl-blue-800: #092D82; --bl-blue-900: #071E57; /* Accent — Signal Yellow (the live dot) */ --bl-yellow-300: #FFE587; --bl-yellow-400: #FFDC4D; --bl-yellow-500: #FFD21A; --bl-yellow-600: #E6B800; /* Semantic */ --bl-red-500: #EF3B4A; /* 마감 / deadline */ --bl-green-500: #17B169; /* 연결됨 / live-ok */ --bl-amber-500: #F59E0B; /* 경고 */ /* Neutrals — cool-tinted */ --bl-ink-900: #0B1220; --bl-ink-800: #18223A; --bl-ink-700: #2A3550; --bl-ink-600: #475066; --bl-ink-500: #6B7389; --bl-ink-400: #9199AD; --bl-ink-300: #C3C9D6; --bl-ink-200: #E3E7EE; --bl-ink-100: #F1F3F8; --bl-ink-50: #F8F9FC; --bl-white: #FFFFFF; /* Type */ --bl-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; --bl-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Radii */ --bl-r-sm: 6px; --bl-r-md: 10px; --bl-r-lg: 14px; --bl-r-xl: 20px; --bl-r-pill: 999px; /* Shadows */ --bl-shadow-1: 0 1px 2px rgba(11,18,32,0.06); --bl-shadow-2: 0 4px 16px rgba(11,18,32,0.08); --bl-shadow-3: 0 12px 32px rgba(11,18,32,0.12); /* Spacing (4px grid) */ --bl-s-1: 4px; --bl-s-2: 8px; --bl-s-3: 12px; --bl-s-4: 16px; --bl-s-5: 20px; --bl-s-6: 24px; --bl-s-8: 32px; --bl-s-10: 40px; --bl-s-12: 48px; --bl-s-16: 64px; /* ── Neutral Gray (warm) — 따뜻한 중성. bl-ink-* 는 쿨톤 슬레이트라 별개 스케일 */ --bl-gray-100: #F5F5F5; /* dimmest surface */ --bl-gray-200: #EEEEEE; /* dim surface */ --bl-gray-300: #DDDDDD; /* default border */ --bl-gray-400: #BBBBBB; /* dim icon/text */ --bl-gray-500: #999999; --bl-gray-600: #888888; --bl-gray-700: #666666; /* most-used muted text */ --bl-gray-800: #555555; --bl-gray-900: #333333; /* default body */ --bl-gray-950: #222222; /* strong header */ /* ── Slate (cool) — Material-style 보조 */ --bl-slate-50: #FAFBFC; --bl-slate-100: #ECEFF1; --bl-slate-200: #DDE1E7; --bl-slate-300: #CFD8DC; --bl-slate-400: #90A4AE; --bl-slate-600: #607D8B; --bl-slate-700: #455A64; --bl-slate-800: #37474F; /* ── Status (시맨틱) — 기존 bl-red/green 과 색감 다른 다크 톤 */ --bl-danger-fg: #C62828; --bl-danger-bg: #FEE2E2; --bl-danger-border: #FCA5A5; --bl-danger-strong: #991B1B; --bl-live-fg: #E53935; /* 라이브 인디케이터 */ --bl-success-fg: #2E7D32; --bl-warn-fg: #F57F17; /* ── 외부 브랜드 액센트 */ --bl-kakao: #FEE500; --bl-naver: #03C75A; /* ── Receipt 테마 (BetShareCard 영수증 스타일) */ --bl-receipt-paper: #FDF8EC; --bl-receipt-text: #2A2418; --bl-receipt-muted: #6B6354; --bl-receipt-faded-bg: #E5E3DE; } /* ───────────────────────────────────────────── 다크 테마 — [data-theme="dark"] on ───────────────────────────────────────────── */ [data-theme="dark"] { /* Neutrals cool (bl-ink) — inverted scale */ --bl-ink-50: #0F1623; --bl-ink-100: #162032; --bl-ink-200: #253050; --bl-ink-300: #364264; --bl-ink-400: #7080A0; --bl-ink-500: #9199AD; --bl-ink-600: #C3C9D6; --bl-ink-700: #D8DDE8; --bl-ink-800: #ECF0F8; --bl-ink-900: #F8F9FC; --bl-white: #162032; /* Slate (Material cool) — inverted */ --bl-slate-50: #162032; --bl-slate-100: #253050; --bl-slate-200: #364264; --bl-slate-300: #4A5870; --bl-slate-400: #8090B0; --bl-slate-600: #B0BDCC; --bl-slate-700: #D0D8E8; --bl-slate-800: #E8ECF5; /* Gray (warm neutral) — inverted */ --bl-gray-100: #1A1A1A; --bl-gray-200: #252525; --bl-gray-300: #3A3A3A; --bl-gray-400: #666666; --bl-gray-500: #999999; --bl-gray-600: #AAAAAA; --bl-gray-700: #CCCCCC; --bl-gray-800: #DDDDDD; --bl-gray-900: #EEEEEE; --bl-gray-950: #FFFFFF; /* Blue — tint surfaces darker for dark bg */ --bl-blue-50: #0F1E40; --bl-blue-100: #152B55; /* Status — lighter/more vibrant on dark bg */ --bl-danger-fg: #F87171; --bl-danger-bg: #450a0a; --bl-danger-border: #991B1B; --bl-danger-strong: #FCA5A5; --bl-live-fg: #FC5F5F; --bl-success-fg: #4ADE80; --bl-warn-fg: #FBBF24; /* Shadows — deeper on dark */ --bl-shadow-1: 0 1px 4px rgba(0,0,0,0.4); --bl-shadow-2: 0 4px 16px rgba(0,0,0,0.5); --bl-shadow-3: 0 12px 32px rgba(0,0,0,0.6); /* Receipt — darkened paper */ --bl-receipt-paper: #2A2318; --bl-receipt-text: #F0E8D0; --bl-receipt-muted: #C4B8A4; --bl-receipt-faded-bg: #3A3530; color-scheme: dark; } /* Tailwind bg-white/border-white는 CSS 변수가 아닌 고정값이므로 별도 오버라이드 */ [data-theme="dark"] .bg-white { background-color: var(--bl-white) !important; } [data-theme="dark"] .border-white { border-color: var(--bl-white) !important; }