/* EntoTools shared theme stylesheet — base typography, shared components and
 * every dark-mode override, so all pages stay visually identical.
 *
 * Load in <head> after /theme.js. A page's own <style> block comes later in the
 * document and therefore still wins for genuinely page-specific rules.
 *
 * Colors are the brand slate/lime ramps defined in theme.js:
 *   slate  50 #eef1f6 · 100 #d8dee9 · 200 #bdc6d8 · 300 #9ca9c0 · 400 #7b8ba8
 *          500 #687794 · 600 #54637f · 700 #3e4a64 · 800 #2a3348 · 900 #1a2030 · 950 #111828
 *   lime   400 #c4e055 · 600 #abd037
 *
 * This file is NOT generated by scripts/build-public.sh — edit it here.
 */

/* ── Base ─────────────────────────────────────────────────────── */
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* ── Motion utilities ─────────────────────────────────────────── */
.fade-in { animation: fadeIn .4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, .15); }

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }

.loader {
    border: 4px solid #bdc6d8;
    border-top: 4px solid #abd037;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Shared components ────────────────────────────────────────── */
.tab-active { background: #ffffff; color: #3e4a64; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.settings-panel {
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
}
.settings-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

.toc-link { transition: color .15s ease; }
.toc-link:hover { color: #abd037; }

/* ── Dark mode ────────────────────────────────────────────────── */
/* Page background. Every page ships <body class="bg-slate-50">, so that class
   is excluded from the elevated-surface rule below and pinned to the darkest
   tone here — otherwise the page would sit lighter than the cards on it. */
.dark body, html.dark body { background-color: #1a2030 !important; color: #d8dee9; }

/* Surfaces */
.dark nav { background-color: #2a3348; border-color: #3e4a64; }
.dark header { background-color: #2a3348; }
.dark section, .dark .bg-white { background-color: #2a3348 !important; border-color: #3e4a64 !important; }
.dark .bg-slate-50:not(body), .dark .bg-slate-100 { background-color: #3e4a64 !important; }
.dark .bg-slate-200 { background-color: #54637f !important; }
.dark .bg-slate-700 { background-color: #111828 !important; }
.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .3) !important; }

/* Borders */
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300 { border-color: #3e4a64 !important; }

/* Text */
.dark .text-slate-800, .dark .text-slate-900 { color: #eef1f6 !important; }
.dark .text-slate-700 { color: #d8dee9 !important; }
.dark .text-slate-600 { color: #9ca9c0 !important; }
.dark .text-slate-500 { color: #9ca9c0 !important; }
.dark .text-slate-400 { color: #9ca9c0 !important; }
/* Small muted captions/footnotes sit one step dimmer than body-size muted text. */
.dark .text-xs.text-slate-400 { color: #7b8ba8 !important; }
.dark .text-lime-600 { color: #c4e055 !important; }

/* Navigation & footer links */
.dark nav a { color: #9ca9c0; }
.dark nav a:hover { color: #eef1f6; }
.dark nav a.text-lime-600 { color: #c4e055; }
.dark footer a { color: #9ca9c0; }
.dark footer a:hover { color: #eef1f6; }

/* Form controls */
.dark input, .dark select, .dark textarea {
    background-color: #3e4a64 !important;
    border-color: #54637f !important;
    color: #eef1f6 !important;
}
.dark input::placeholder, .dark textarea::placeholder { color: #7b8ba8 !important; }

/* Inline code (documentation, privacy, terms) */
.dark code { background-color: #1a2030 !important; color: #d8dee9 !important; border: 1px solid #3e4a64; }

/* Tables */
.dark table thead { background-color: #3e4a64 !important; }
.dark table thead th { color: #9ca9c0 !important; }
.dark table tbody td { color: #d8dee9 !important; }
.dark table tbody tr { border-color: #3e4a64 !important; }
.dark table tbody tr:hover { background-color: #3e4a64 !important; }

/* Buttons — the slate "secondary" button used for presets, Add actions, etc. */
.dark button.bg-slate-200 { background-color: #54637f !important; color: #eef1f6 !important; }
.dark button.bg-slate-200:hover { background-color: #687794 !important; }
.dark .hover\:bg-slate-300:hover { background-color: #687794 !important; }

/* Shared components — dark */
.dark .tab-active { background: #abd037; color: #1a2030; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.dark .rounded-lg.bg-slate-100 button { color: #d8dee9 !important; }
.dark .rounded-lg.bg-slate-100 button:hover { color: #eef1f6 !important; }

.dark .settings-panel { background-color: #2a3348 !important; border-color: #3e4a64 !important; }
.dark .settings-panel h3 { color: #eef1f6 !important; }
.dark .settings-panel span { color: #d8dee9 !important; }
.dark .settings-panel hr { border-color: #3e4a64; }
.dark .settings-panel p { color: #7b8ba8 !important; }
.dark #settings-btn { color: #9ca9c0; }
.dark #settings-btn:hover { color: #eef1f6; background-color: #3e4a64; }
