/* ─────────────────────────────────────────────────────────────────────────────
* TOGRA — Shared theme (2026-04-22)
*
* Single source of truth for CSS variables across Togra, Bordáil and the
* standalone tool pages. Supersedes the per-page `:root` blocks that used
* to diverge (Togra main = orange; Bordáil = blue).
*
* → dark palette (default)
* → light palette
*
* The palette swap happens via CSS variables; every page's inline styles
* consume those variables unchanged, so the light/dark theme works
* everywhere without per-page edits.
*
* Include via:
*
* (early, so no flash)
* ─────────────────────────────────────────────────────────────────────────────
*/
:root,
html[data-theme="dark"] {
/* Core surfaces — neutral greys, matching cearta.php / dev-* / Togra
main palette. Earlier navy-tinted values (#0f1117 / #1a1d27 /
#22263a) flipped 2026-04-28 so Bordáil + Dashboard look at home
alongside Togra-main. */
--bg: #111111;
--surface: #1e1e1e;
--surface2: #2a2a2a;
--border: #3d3d3d;
/* Text */
--text: #ececec;
--text-muted: #909090;
--muted: #909090; /* alias — Bordáil pages use --muted, Togra main uses --text-muted */
/* Primary accent — orange, consistent across Togra + Bordáil as of 2026-04-22 */
--accent: #e8833a;
--accent-dim: rgba(232,131,58,0.15);
/* Secondary hues */
--green: #4caf7d;
--green-dim: rgba(76,175,125,0.12);
--red: #e05252;
--red-dim: rgba(224,82,82,0.12);
--orange: #e8833a;
--orange-dim: rgba(232,131,58,0.12);
--blue: #5b9cf6;
--blue-dim: rgba(91,156,246,0.12);
--purple: #9b7de8;
--purple-dim: rgba(155,125,232,0.12);
--radius: 10px;
--sidebar-w: 228px;
color-scheme: dark;
}
html[data-theme="light"] {
/* Light-mode greys — neutral, not blue-tinted. Mirrors the dark
palette in feel; not blue-grey. */
--bg: #f5f5f5;
--surface: #ffffff;
--surface2: #ececec;
--border: #dddddd;
--text: #1a1a1a;
--text-muted: #6b6b6b;
--muted: #6b6b6b;
--accent: #d5741f; /* slightly darker orange for contrast on light */
--accent-dim: rgba(213,116,31,0.12);
--green: #2e7d52;
--green-dim: rgba(46,125,82,0.10);
--red: #c23a3a;
--red-dim: rgba(194,58,58,0.10);
--orange: #d5741f;
--orange-dim: rgba(213,116,31,0.10);
--blue: #2e6fd5;
--blue-dim: rgba(46,111,213,0.10);
--purple: #6f55c2;
--purple-dim: rgba(111,85,194,0.10);
color-scheme: light;
}
/* Smooth transition when toggling — don't animate the initial load. */
html.theme-ready,
html.theme-ready body,
html.theme-ready .card,
html.theme-ready .topbar,
html.theme-ready input,
html.theme-ready select,
html.theme-ready textarea,
html.theme-ready table,
html.theme-ready th,
html.theme-ready td {
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* ── Theme toggle button (used on every page's topbar) ──────────────── */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 6px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--muted);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
flex-shrink: 0;
}
.theme-toggle:hover {
color: var(--text);
border-color: var(--accent);
}
/* Swap the icon per theme so the button shows what clicking will do. */
html[data-theme="dark"] .theme-toggle::before { content: "☀"; }
html[data-theme="light"] .theme-toggle::before { content: "☾"; }
/* ── Light-theme tweaks for common inline patterns ──────────────────── */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
background: #fff;
}
html[data-theme="light"] .toast {
background: rgba(46,125,82,0.08);
}
html[data-theme="light"] ::placeholder {
color: #9aa1ad;
opacity: 1;
}
/* Dialog / modal backdrop retains a darker overlay in light mode for contrast. */
html[data-theme="light"] dialog::backdrop {
background: rgba(30,35,48,0.45);
}