/* ═══════════════════════════════════════════════════════════════ BARQ Design Tokens — Blue brand, dark default Based on LiGaData DS v12 Usage: set data-mode="dark"|"light" on ═══════════════════════════════════════════════════════════════ */ /* ── Shared (semantic colours + radii + shadows + font) ── */ html, body { margin: 0; } :root { --f: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --w: #FFFFFF; /* Semantic status */ --warn: #D97706; --warn-bg: #FFFBEB; --warn-bd: #FDE68A; --err: #E62D2D; --err-bg: #FFEFEF; --err-bd: #FCA5A5; --ok: #17A34A; --ok-bg: #F0FDF4; --ok-bd: #86EFAC; --info: #0891B2; --info-bg: #ECFEFF; --info-bd: #A5F3FC; /* UI text */ --footer-text: #919191; /* Radii */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 999px; /* Shadows (base — overridden per mode below) */ --sh-xs: 0 1px 2px rgba(0,0,0,.06); --sh-sm: 0 1px 3px rgba(0,0,0,.08); --sh-md: 0 4px 12px rgba(0,0,0,.10); --sh-lg: 0 20px 20px rgba(0,0,0,.08), 0 0 2px rgba(0,0,0,.12); --sh-hdr: 0 4px 4px rgba(0,0,0,.20); /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Transition */ --t-fast: 100ms ease; --t-normal: 150ms ease; --t-slow: 250ms ease; } /* ── Blue · Dark (default) ── */ :root, [data-mode="dark"] { --p: #60A5FA; --p-hover: #93C5FD; --p-active: #3B82F6; --p-l: #1E3A5F; --p-bg: #0C1A2E; --p-bd: #1E40AF; --sec: #22D3EE; --sec-bg: #083344; --sec-bd: #0E7490; --bg: #0A0F1A; --sur: #111827; --sur2: #1A2337; --sur3: #243044; --t1: #F1F5F9; --t2: #94A3B8; --t3: #475569; --t4: #334155; --bd: #1E293B; --bd2: #334155; --fbd: #334155; --sh-xs: 0 1px 2px rgba(0,0,0,.3); --sh-sm: 0 1px 3px rgba(0,0,0,.4); --sh-md: 0 4px 12px rgba(0,0,0,.5); --sh-lg: 0 20px 20px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.6); --sh-hdr: 0 4px 4px rgba(0,0,0,.4); } /* ── Blue · Light ── */ [data-mode="light"] { --p: #1E40AF; --p-hover: #1D4ED8; --p-active: #1E3A8A; --p-l: #BFDBFE; --p-bg: #EFF6FF; --p-bd: #93C5FD; --sec: #0891B2; --sec-bg: #ECFEFF; --sec-bd: #A5F3FC; --bg: #F5F7FA; --sur: #FFFFFF; --sur2: #F8FAFF; --sur3: #F1F5F9; --t1: #0C0C0C; --t2: #464646; --t3: #6B7280; --t4: #9CA3AF; --bd: #E2E8F0; --bd2: #CBD5E1; --fbd: #CBD5E1; --sh-xs: 0 1px 2px rgba(0,0,0,.06); --sh-sm: 0 1px 3px rgba(0,0,0,.08); --sh-md: 0 4px 12px rgba(0,0,0,.10); --sh-lg: 0 20px 20px rgba(0,0,0,.08), 0 0 2px rgba(0,0,0,.12); --sh-hdr: 0 4px 4px rgba(0,0,0,.20); } /* ── Status semantic overrides for dark mode ── */ [data-mode="dark"] { --warn-bg: rgba(217,119,6,.12); --warn-bd: rgba(217,119,6,.3); --err-bg: rgba(230,45,45,.12); --err-bd: rgba(230,45,45,.3); --ok-bg: rgba(23,163,74,.12); --ok-bd: rgba(23,163,74,.3); --info-bg: rgba(8,145,178,.12); --info-bd: rgba(8,145,178,.3); }