/* =========================================================== Shopee 2.0 Design Tokens Source: design_handoff_shopee_2_0/README.md (2026-05-16) Default: Obsidian (dark) Auto: Daylight via prefers-color-scheme: light =========================================================== */ :root { /* Surfaces — Obsidian (default dark) */ --bg: #080A0E; --sidebar: #0A0C11; --card-bg: rgba(255,255,255,0.03); --card-bg-2: rgba(255,255,255,0.05); --card-bg-3: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.08); --border-3: rgba(255,255,255,0.10); /* Text */ --text: #F0F2F7; --text-2: #E8EAF0; --text-3: #C8CAD0; --text-4: #8B9099; --text-5: #7A8190; --text-6: #5A6070; --text-7: #4A5060; /* Brand — Shopee orange */ --orange: #EE4D2D; --orange-2: #FF7337; --orange-glow: rgba(238,77,45,0.35); --orange-soft: rgba(238,77,45,0.10); --orange-soft2: rgba(238,77,45,0.15); /* Semantic */ --green: #10B981; --gold: #F5A623; --red: #EF4444; --indigo: #6366F1; --violet: #8B5CF6; --mint: #2EE6B0; /* Misc */ --tooltip-bg: #1A1D24; --tooltip-text: #F0F2F7; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Layout */ --sidebar-w-collapsed: 72px; --sidebar-w-expanded: 240px; --mobile-tabbar-h: 64px; --mobile-header-h: 56px; /* Typography */ --sans: "Pretendard Variable", Pretendard, "Inter", "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: "Geist Mono", "SF Mono", "Fira Code", "JetBrains Mono", monospace; --num: "Space Grotesk", "Pretendard Variable", sans-serif; } /* ── Daylight (light) — prefers-color-scheme auto ── */ @media (prefers-color-scheme: light) { :root { --bg: #F4F5F8; --sidebar: #FFFFFF; --card-bg: #FFFFFF; --card-bg-2: #F8F9FB; --card-bg-3: #F0F1F5; --border: rgba(0,0,0,0.08); --border-2: rgba(0,0,0,0.10); --border-3: rgba(0,0,0,0.14); --text: #1A1D24; --text-2: #2A2D34; --text-3: #4A4D54; --text-4: #6A6D74; --text-5: #8A8D94; --text-6: #AAADB4; --text-7: #CACDD4; /* Toast / tooltip — 라이트 모드에서도 어두운 배경 + 흰 글씨 유지 (가독성 ↑) */ --tooltip-bg: #1A1D24; --tooltip-text: #F0F2F7; --orange-glow: rgba(238,77,45,0.20); --orange-soft: rgba(238,77,45,0.06); --orange-soft2: rgba(238,77,45,0.10); } } /* ── Manual override (data-theme="light"|"dark" on ) ── */ [data-theme="light"] { --bg: #F4F5F8; --sidebar: #FFFFFF; --card-bg: #FFFFFF; --card-bg-2: #F8F9FB; --card-bg-3: #F0F1F5; --border: rgba(0,0,0,0.08); --border-2: rgba(0,0,0,0.10); --border-3: rgba(0,0,0,0.14); --text: #1A1D24; --text-2: #2A2D34; --text-3: #4A4D54; --text-4: #6A6D74; --text-5: #8A8D94; --text-6: #AAADB4; --text-7: #CACDD4; } [data-theme="dark"] { --bg: #080A0E; --sidebar: #0A0C11; --card-bg: rgba(255,255,255,0.03); --card-bg-2: rgba(255,255,255,0.05); --card-bg-3: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.08); --border-3: rgba(255,255,255,0.10); --text: #F0F2F7; --text-2: #E8EAF0; --text-3: #C8CAD0; --text-4: #8B9099; --text-5: #7A8190; --text-6: #5A6070; --text-7: #4A5060; } /* ── Numbers utility ── */ .num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-family: var(--num); } /* =========================================================== Sprint 24-B 보강 색 토큰 (2026-05-17) schedule/orders/calc 페이지의 inline hex 22건 정공 통합 =========================================================== */ :root { /* Status accent — schedule markers, orders LIVE, calc gradients */ --soft-red: #fca5a5; /* DTS 마감 텍스트, cancel revenue */ --gold-2: #fbbf24; /* 선택셀 border, anniversary, panel title */ --green-2: #22c55e; /* LIVE indicator, orders marker */ --green-3: #34d399; /* revenue 강조 (밝은 mint) */ --green-4: #86efac; /* panel count (lighter) */ --violet-2: #7c3aed; /* btn hover, calc gradient */ --violet-3: #a78bfa; /* plan marker, count, lunar toggle */ --red-2: #f87171; /* urgent (밝은 red) */ --cyan: #0ea5e9; --cyan-2: #0284c7; --orange-3: #f97316; --orange-4: #ea580c; } /* 라이트 모드 — 위 토큰은 대부분 status accent라 양쪽 모드 동일 (Apple HIG: semantic color is stable across themes) */