/* Colour tokens for the light (default) and dark themes.
   The active theme is set on <html data-theme="..."> by /static/js/theme.js. */
:root {
    /* Typography: Inter for the UI, JetBrains Mono for IDs, coordinates and logs */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    color-scheme: light;
    --bg: #f6f8fa;
    --surface: #ffffff;
    --border: #dde3ea;
    --border-strong: #c9d1d9;
    --text: #1f2937;
    --text-muted: #57606a;
    --text-faint: #6e7781;
    --text-fainter: #8c959f;
    --muted-bg: #eaeef2;
    --accent: #0969da;
    --accent-hover: #0550ae;
    --on-accent: #fff;
    --tint-red: #ffebe9;
    --tint-green: #dafbe1;
    --tint-amber: #fff1e5;
    --tint-blue: #ddf4ff;
    --red-text: #cf222e;
    --green-text: #1a7f37;
    --amber-text: #bc4c00;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1a1a2e;
    --surface: #16213e;
    --border: #0f3460;
    --border-strong: #1a1a2e;
    --text: #eee;
    --text-muted: #aaa;
    --text-faint: #666;
    --text-fainter: #555;
    --muted-bg: #333;
    --accent: #00d9ff;
    --accent-hover: #00b8d4;
    --on-accent: #000;
    --tint-red: #3a1a1a;
    --tint-green: #1a3a1a;
    --tint-amber: #3a2a1a;
    --tint-blue: #1a2a3a;
    --red-text: #ff8888;
    --green-text: #44ff88;
    --amber-text: #ffaa44;
}

.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: transparent; color: var(--accent);
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.theme-toggle:hover { background: var(--bg); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }