/* SF Tools v1.0.0 */ /* ═══════════════════════════════════════════ SF Tools — Design System Variables Dark mode (default) + Light mode ═══════════════════════════════════════════ */ /* ── DARK MODE (default) ── */ :root { --bg: #050a14; --surface: #0d1524; --surface2: #111d30; --surface3: #080f1e; --border: #1a2744; --border2: #243450; --accent: #4da6ff; --accent-dim: #2d7fd9; --accent-glow: rgba(77,166,255,.2); --accent2: #7c3aed; --accent3: #06b6d4; --accent4: #10b981; --accent5: #f59e0b; --text: #e8f0ff; --text-muted: #8aa4cc; --muted: #3d5a8a; --error: #ff5566; --success: #00d4aa; --warn: #ffaa00; --radius: 8px; --radius-lg: 14px; --container: 1300px; --nav-h: 66px; --nav-bg: rgba(5,10,20,.9); --footer-bg: #080f1e; --shadow: 0 18px 52px rgba(0,0,0,.45); --grid-line: rgba(77,166,255,.018); } /* ── LIGHT MODE ── */ [data-theme="light"] { --bg: #f0f4fc; --surface: #ffffff; --surface2: #e8eef8; --surface3: #dde5f5; --border: #c8d5ec; --border2: #b0c2e0; --text: #0d1a2e; --text-muted: #3d5a8a; --muted: #8aa4cc; --nav-bg: rgba(240,244,252,.92); --footer-bg: #dde5f5; --shadow: 0 18px 52px rgba(0,0,0,.12); --grid-line: rgba(77,166,255,.06); } /* ── Anti-flash: applied before render via inline script in each page ── */ /* Pages include this snippet in : */