/* ============================================================
   theme.css — dark mode + theme toggle for chatbot-norge.no
   Loaded on every public page AFTER site.min.css / inline styles.
   All dark rules are scoped to html[data-theme="dark"], so load
   order doesn't matter (attribute selector wins on specificity).
   Pairs with /assets/theme.js (sets data-theme before first paint).
   ============================================================ */

/* ---------- THEME TOGGLE BUTTON ---------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: none; border: none; cursor: pointer;
    border-radius: 50%;
    color: var(--slate-600, #475569);
    padding: 0;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(100,116,139,.14); }
.theme-toggle svg { width: 19px; height: 19px; display: block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* On transparent hero nav (index, unscrolled) the toggle sits on a dark gradient */
body.transparent-nav .site-nav:not(.scrolled) .theme-toggle { color: rgba(255,255,255,.85); }
body.transparent-nav .site-nav:not(.scrolled) .theme-toggle:hover { background: rgba(255,255,255,.15); }
/* Mobile menu (indigo gradient overlay) */
.site-mobile-menu .theme-toggle { color: rgba(255,255,255,.9); width: 44px; height: 44px; margin-top: 1rem; }
.site-mobile-menu .theme-toggle:hover { background: rgba(255,255,255,.15); }
.site-mobile-menu .theme-toggle svg { width: 24px; height: 24px; }

/* ---------- LIGHTBOX (article illustrations) ---------- */
.article-figure__media, .article-hero-img { cursor: zoom-in; }
.cn-lightbox {
    position: fixed; inset: 0; z-index: 10010;
    background: rgba(8, 10, 16, .88);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem; cursor: zoom-out;
    animation: cn-lightbox-in .18s ease;
}
@keyframes cn-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.cn-lightbox__inner {
    background: #fff; border-radius: 14px;
    padding: 1.25rem;
    max-width: min(1280px, 96vw); max-height: 86vh;
    overflow: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.cn-lightbox__inner svg, .cn-lightbox__inner img {
    display: block; width: 100%; height: auto;
    min-width: 640px; /* keep diagram text legible on small screens (scrolls sideways) */
}
.cn-lightbox__hint {
    margin-top: .9rem; font-size: .82rem; font-weight: 500;
    color: rgba(255,255,255,.75);
}
@media (max-width: 700px) {
    .cn-lightbox { padding: 1rem .5rem; }
    .cn-lightbox__inner { padding: .75rem; }
}

/* ============================================================
   DARK MODE
   Strategy: flip the neutral (slate) + tint (indigo pastel) token
   scales so token-based components invert automatically, then pin
   the handful of surfaces that must keep their identity (brand
   gradients, buttons, footer, illustrations on white).
   ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;
    /* slate scale — inverted luminance */
    --slate-50:  #10131b;
    --slate-100: #161a24;
    --slate-200: #262c3a;
    --slate-300: #3a4252;
    --slate-400: #8b95a7;
    --slate-500: #9aa4b5;
    --slate-600: #b4bdcb;
    --slate-700: #cfd5e0;
    --slate-800: #e4e8ef;
    --slate-900: #f2f5fa;
    /* indigo tints (used as light backgrounds) → dark equivalents */
    --indigo-50:  #1c2040;
    --indigo-100: #232856;
    --indigo-200: #333b6e;
    /* indigo accents (used as text/links) → lighter for contrast */
    --indigo-400: #a5b4fc;
    --indigo-500: #818cf8;
    --indigo-600: #8e98f9;
    --indigo-700: #aab4fd;
    --indigo-900: #e0e7ff;
    --violet-400: #d8b4fe;
    --violet-500: #a78bfa;
    /* shadows: darker + softer */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
    --shadow:    0 4px 16px rgba(0,0,0,.45);
    --shadow-xl: 0 24px 64px rgba(0,0,0,.55);
}
html[data-theme="dark"] body { background: #0b0e15; color: var(--slate-800); }

/* ---------- NAV ---------- */
html[data-theme="dark"] .site-nav {
    background: rgba(13,16,24,.92);
    box-shadow: 0 1px 8px rgba(0,0,0,.45);
}
/* transparent hero-nav (index) stays transparent — handled by site.css */
html[data-theme="dark"] body.transparent-nav .site-nav:not(.scrolled) { background: transparent; box-shadow: none; }

/* Brand gradients must NOT flip with the tokens — pin originals.
   In dark mode we use deeper, muted indigo/violet so the panels sit
   harmoniously on the near-black page instead of glaring. */
html[data-theme="dark"] .site-mobile-menu,
html[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #2a2566 0%, #3a3480 45%, #463879 100%);
}
html[data-theme="dark"] .cta-box,
html[data-theme="dark"] .cta-band {
    background: linear-gradient(135deg, #2a2566, #463879);
}
html[data-theme="dark"] .cta-box a { color: #4338ca; }

/* Buttons keep solid brand indigo (flipped token would wash them out) */
html[data-theme="dark"] .btn-primary { background: #4f46e5; color: #fff; }
html[data-theme="dark"] .btn-primary:hover { background: #4338ca; }
html[data-theme="dark"] .site-nav__cta { background: #4f46e5 !important; border-color: #4f46e5; color: #fff !important; }
html[data-theme="dark"] .site-nav__cta:hover { background: #4338ca !important; }
html[data-theme="dark"] body.transparent-nav .site-nav:not(.scrolled) .site-nav__cta {
    background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.2);
}

/* ---------- INDEX SECTIONS & CARDS ---------- */
html[data-theme="dark"] .value-section,
html[data-theme="dark"] .features-section,
html[data-theme="dark"] .tech-section,
html[data-theme="dark"] .pricing-section,
html[data-theme="dark"] .faq-section { background: #0b0e15; }
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .admin-card { background: #141826; }
html[data-theme="dark"] .feat-icon.o { background: #3a2a12; }
html[data-theme="dark"] .feat-icon.p { background: #2a2040; }
html[data-theme="dark"] .feat-icon.g { background: #11271b; }
/* Icon plates: light pastel gradients → deep indigo (stroke flips to light via tokens) */
html[data-theme="dark"] .value-icon,
html[data-theme="dark"] .pipe-icon { background: linear-gradient(135deg, #27224b, #232856); }
html[data-theme="dark"] .pipe-dot { background: #0b0e15; }
/* Step numbers: gradient uses flipped tokens → pin brand gradient */
html[data-theme="dark"] .step-num { background: linear-gradient(135deg, #4f46e5, #8b5cf6); }
/* White CTA buttons sit on brand gradients — keep white bg but pin dark text
   (--slate-900 flips to near-white in dark mode → text would vanish) */
html[data-theme="dark"] .btn-white { background: #fff; color: #1e1b4b; }
/* Embed snippet is a dark "terminal" even in light mode — re-pin original
   slate values inside its scope so the token flip doesn't invert it */
html[data-theme="dark"] .embed-block {
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    border: 1px solid #262c3a;
}
/* Chat-mockup is a product screenshot — keep it light, like an illustration */

/* ---------- LEGAL PAGES (vilkår / retningslinjer) ---------- */
html[data-theme="dark"] .card { background: #141826; }
html[data-theme="dark"] .info-box { background: #0e2536; color: #93cff5; }
html[data-theme="dark"] .warn-box { background: #2b2208; color: #fcd34d; }

/* ---------- BLOG ---------- */
html[data-theme="dark"] .blog-card { background: transparent; }
html[data-theme="dark"] .blog-card__media {
    background: linear-gradient(160deg, #1c2040 0%, #232856 60%, #241e3e 100%);
}
/* Illustrations are drawn for white canvases — keep their panels white */
html[data-theme="dark"] .article-figure__media { background: #fff; }
html[data-theme="dark"] .article-hero-img { background: #fff; }

/* ---------- FOOTER (already dark — restore original palette inside) ---------- */
html[data-theme="dark"] .site-footer {
    background: #0d1019;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-900: #0f172a;
}

/* ---------- MISC ---------- */
html[data-theme="dark"] .skip-link { background: #e0e7ff !important; color: #1e1b4b !important; }
html[data-theme="dark"] ::selection { background: #4f46e5; color: #fff; }