/*! * theme.css — shared design tokens for toolbox.4xs.dev * Copyright (c) 2026 Pavel Kotyza — MIT * * Lifted verbatim from the extension's fov-map.css so every page shares one * source of truth. Convention matches the extension: light is the default and * has no marker; dark is [data-theme="dark"] on . */ :root { --bg: #ffffff; --panel-bg: #fafafa; --text: #1a1a1a; --muted: #6b6b6b; --border: #e4e4e4; --accent: #ffcc33; --accent-strong: #e0b400; --accent-ink: #1a1a1a; --header-bg: #1a1a1a; --header-text: #ffffff; --header-muted: #b8b8b8; --error: #c8102e; --good: #1f8a4c; /* Web-only additions */ --tap: 44px; /* minimum touch target */ --nav-h: 56px; /* bottom tab bar height on mobile */ --gap: 12px; --radius: 8px; } [data-theme="dark"] { --bg: #1c1c1c; --panel-bg: #222222; --text: #f0f0f0; --muted: #a0a0a0; --border: #333333; --header-bg: #0f0f0f; --error: #ff5c72; --good: #4fd382; } /* The viewer's OS preference wins only when the user has made no explicit choice (no data-theme attribute at all). An explicit :root[data-theme] above and below always beats it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #1c1c1c; --panel-bg: #222222; --text: #f0f0f0; --muted: #a0a0a0; --border: #333333; --header-bg: #0f0f0f; --error: #ff5c72; --good: #4fd382; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); } /* Mobile-first: nothing may push the page sideways. Deliberately NOT overflow-x:hidden - that silently creates a scroll container and kills position:sticky on the search bar. Wide content is handled per-component instead, and the layout tests assert no overflow. */ html, body { max-width: 100%; } .theme-toggle { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; font-size: 18px; cursor: pointer; } .theme-toggle:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }