/* Tranzferenze theme — light/dark via [data-theme] on . Dark is the default (:root); light overrides under [data-theme="light"]. A pre-paint inline script in each page sets data-theme from localStorage (key "tzf-theme") or the OS preference before first paint, and theme.js injects the floating toggle. With JS off, the page stays dark (unchanged). The brand maroon (--brand) stays maroon in both modes for buttons. The key fix: brand-colored TEXT (--brand-text) is a lighter rose on the dark page so it doesn't read as an error, but true maroon on the white page where it reads as an intentional brand accent. */ :root { color-scheme: dark; --bg: #14161a; --surface: #1f2329; --surface-2: #181c24; --input-bg: #3c4043; --text: #e8eaed; --text-muted: #9aa0a6; --text-faint: #5f6368; --brand: #a02234; /* button / primary fill */ --brand-hover: #7d1d28; --brand-text: #cf8088; /* brand-colored TEXT — de-error-ified on dark */ --on-brand: #ffffff; /* text on a --brand fill */ --link: #cf8088; --border: #2a2e35; --border-soft: #1f2329; --border-strong: #3c4043; --error: #f28b82; --error-bg: #2e2326; --error-border: #43343a; --success: #81c995; --success-bg: #1d2b1f; --success-border: #2a4a2e; --warning: #f0c674; } :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --surface: #f3f4f6; /* soft gray cards / rows / inputs */ --surface-2: #f8f9fb; --input-bg: #ffffff; --text: #23262b; /* dark slate, not pure black — easier on the eyes */ --text-muted: #57606a; --text-faint: #848d97; --brand: #2f3138; /* INK accent for buttons — neutral, no red */ --brand-hover: #1b1d22; --brand-text: #383b42; /* slate headings / brand text — reads as ink, not error */ --on-brand: #ffffff; --link: #0a5ca8; /* calm blue links */ --border: #dfe2e7; --border-soft: #ebedf1; --border-strong: #cbd0d7; --error: #b42318; /* errors stay red — that's semantic, intentional */ --error-bg: #fef3f2; --error-border: #f3c6c2; --success: #1a7f37; --success-bg: #eaf6ec; --success-border: #bcdfc6; --warning: #8a6700; } html, body { background: var(--bg); color: var(--text); } /* Light-mode inputs need a visible edge since the surface is near-white. */ :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { border: 1px solid var(--border-strong); } /* Floating theme toggle (created by theme.js). */ #tzf-theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 2147483000; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 11px; font: 600 12px/1 -apple-system, "Segoe UI", system-ui, sans-serif; cursor: pointer; -webkit-user-select: none; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: color .15s ease, border-color .15s ease, background .15s ease; } #tzf-theme-toggle:hover { color: var(--text); border-color: var(--brand); } #tzf-theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } #tzf-theme-toggle svg { width: 15px; height: 15px; display: block; } @media print { #tzf-theme-toggle { display: none; } }