/*
 * Jashchar — light / dark mode for the public pages (homepage, blog, pages, login designs).
 *
 * html[data-lp][data-lp-mode] is set by resources/views/jashchar/public-mode/head.blade.php.
 * This file holds the dark values of the page tokens and the toggle button; the dark versions
 * of the vendor's hard-coded colours are generated into jashchar-public-dark.css
 * (tools/theme/generate_dark_overrides.py, public profile). See docs/architecture/theme.md.
 */

/* ── Tokens the generated rules point at (same names as the panel's) ─────────────── */
html[data-lp][data-lp-mode="dark"] {
    color-scheme: dark;
    --j-bg: #0d1219;
    --j-surface: #151c27;
    --j-surface-2: #1c2432;
    --j-text: #e8ecf3;
    --j-text-2: #c7cfdb;
    --j-muted: #9aa6b8;
    --j-border: #283243;
    --j-ok: #4ade80;   --j-ok-soft: rgba(74, 222, 128, .14);
    --j-warn: #fbbf24; --j-warn-soft: rgba(251, 191, 36, .14);
    --j-bad: #f87171;  --j-bad-soft: rgba(248, 113, 113, .14);
    --j-info: #60a5fa; --j-info-soft: rgba(96, 165, 250, .14);
    --j-btn: var(--primary, #4f46e5);
    --j-btn-text: #ffffff;
    --j-link: var(--lp-primary-dark, #818cf8);

    /* the public site's own tokens (public/partials/_design-tokens.blade.php) */
    --dark: #e8ecf3;
    --text: #c7cfdb;
    --muted: #9aa6b8;
    --border: #283243;
    --bg-soft: #111827;
    --nav-bg: #0d1219;
    --nav-text: #e8ecf3;
    --p-soft: rgba(var(--primary-rgb), .16);
    --bs-body-bg: #0d1219;
    --bs-body-color: #c7cfdb;
    --bs-emphasis-color: #e8ecf3;
    --bs-secondary-color: #9aa6b8;
    --bs-border-color: #283243;
    --bs-link-color: var(--lp-primary-dark, #818cf8);
    --bs-link-hover-color: var(--lp-primary-dark, #818cf8);
    --white: #151c27;   /* the login designs' card colour */
}

html[data-lp][data-lp-mode="dark"] body { background-color: var(--j-bg) !important; color: var(--j-text-2); }
html[data-lp][data-lp-mode="dark"] h1, html[data-lp][data-lp-mode="dark"] h2,
html[data-lp][data-lp-mode="dark"] h3, html[data-lp][data-lp-mode="dark"] h4,
html[data-lp][data-lp-mode="dark"] h5, html[data-lp][data-lp-mode="dark"] h6 { color: var(--j-text); }
html[data-lp][data-lp-mode="dark"] .text-dark { color: var(--j-text) !important; }
html[data-lp][data-lp-mode="dark"] .text-muted, html[data-lp][data-lp-mode="dark"] .text-secondary { color: var(--j-muted) !important; }
html[data-lp][data-lp-mode="dark"] .bg-white, html[data-lp][data-lp-mode="dark"] .bg-light { background-color: var(--j-surface) !important; }
html[data-lp][data-lp-mode="dark"] .card { background-color: var(--j-surface); border-color: var(--j-border); color: var(--j-text-2); }
html[data-lp][data-lp-mode="dark"] .navbar .nav-link { color: var(--nav-text); }
/* brand colour used as text reads lighter on dark (buttons keep the brand colour) */
html[data-lp][data-lp-mode="dark"] .theme-text-primary,
html[data-lp][data-lp-mode="dark"] .lp-accent,
html[data-lp][data-lp-mode="dark"] .lp-eyebrow,
html[data-lp][data-lp-mode="dark"] .lp-eco-platform,
html[data-lp][data-lp-mode="dark"] .lp-captcha-box,
html[data-lp][data-lp-mode="dark"] main a:not(.btn):not([class*="btn"]):not(.badge):not(.nav-link) { color: var(--lp-primary-dark, #818cf8) !important; }
html[data-lp][data-lp-mode="dark"] .lp-save-pill { color: #fff; }
html[data-lp][data-lp-mode="dark"] .navbar .nav-link, html[data-lp][data-lp-mode="dark"] .navbar a:not(.btn) { color: var(--nav-text) !important; }

/* The Jashchar logo: its white-wordmark version in dark mode */
.lp-logo-dark { display: none; }
html[data-lp][data-lp-mode="dark"] .lp-logo-light { display: none !important; }
html[data-lp][data-lp-mode="dark"] .lp-logo-dark { display: inline-block; }

/* Inline style="" colours, tagged by public/js/jashchar-theme-inline.js (same classes as the panel) */
html[data-lp][data-lp-mode="dark"] .jt-ib1 { background-color: var(--j-surface) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ib2 { background-color: var(--j-surface-2) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ib-g { background-image: none !important; background-color: var(--j-surface) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ib-ok { background-color: var(--j-ok-soft) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ib-warn { background-color: var(--j-warn-soft) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ib-bad { background-color: var(--j-bad-soft) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ib-info { background-color: var(--j-info-soft) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ic { color: var(--j-text) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ic-m { color: var(--j-muted) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ic-ok { color: var(--j-ok) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ic-warn { color: var(--j-warn) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ic-bad { color: var(--j-bad) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ic-info { color: var(--j-info) !important; }
html[data-lp][data-lp-mode="dark"] .jt-ibd { border-color: var(--j-border) !important; }

/* Screenshots and photos are pictures of light screens: soften them a touch in dark. */
html[data-lp][data-lp-mode="dark"] main img:not([src$=".svg"]) { filter: brightness(.92); }

/* ── The toggle button ────────────────────────────────────────────────────────────── */
.lp-mode-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 1px solid rgba(15, 23, 42, .12); background: rgba(255, 255, 255, .85); color: #1e293b;
    transition: transform .15s, background .2s;
}
.lp-mode-toggle:hover { transform: translateY(-1px); }
.lp-mode-toggle:focus-visible { outline: 3px solid rgba(79, 70, 229, .45); outline-offset: 2px; }
.lp-mode-toggle .lp-mode-sun { display: none; }
html[data-lp][data-lp-mode="dark"] .lp-mode-toggle { background: #1c2432; border-color: #283243; color: #fbbf24; }
html[data-lp][data-lp-mode="dark"] .lp-mode-toggle .lp-mode-sun { display: block; }
html[data-lp][data-lp-mode="dark"] .lp-mode-toggle .lp-mode-moon { display: none; }
/* on the login designs it floats in the corner */
.lp-mode-toggle.lp-mode-corner { position: fixed; top: 16px; right: 16px; z-index: 1050; box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }

/* Login designs: the brand colour used as TEXT takes its lighter dark-mode shade (buttons keep
   the brand colour); the lavender ground wave becomes a faint dark wave. */
html[data-lp][data-lp-mode="dark"][data-lp-page="login-default"] .hl,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-default"] .flink,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-default"] .qa-title,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-default"] .qh-go,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-default"] .reglink a { color: var(--lp-primary-dark, #818cf8) !important; }
html[data-lp][data-lp-mode="dark"][data-lp-page="login-default"] .scene-wrap::before { opacity: .12; }

/* Custom login design: its panel and text colours come from the owner's settings, so dark
   mode swaps them for the dark surface and light text. */
html[data-lp][data-lp-mode="dark"][data-lp-page="login-custom"] {
    --clp-panel: rgba(21, 28, 39, .94);
    --clp-text: #e8ecf3;
}
html[data-lp][data-lp-mode="dark"][data-lp-page="login-custom"] .clp-heading,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-custom"] .clp-label,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-custom"] .clp-remember { color: #e8ecf3 !important; }
html[data-lp][data-lp-mode="dark"][data-lp-page="login-custom"] .clp-sub,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-custom"] .clp-footer { color: #9aa6b8 !important; }
html[data-lp][data-lp-mode="dark"][data-lp-page="login-custom"] .clp-forgot { color: var(--lp-primary-dark, #818cf8) !important; }
html[data-lp][data-lp-mode="dark"][data-lp-page="login-custom"] .clp-form-side input { background: #1c2432 !important; color: #e8ecf3 !important; border-color: #283243 !important; }

/* Modern split and Centered glass use Tailwind utility classes. */
html[data-lp][data-lp-mode="dark"] .text-gray-900, html[data-lp][data-lp-mode="dark"] .text-gray-800,
html[data-lp][data-lp-mode="dark"] .text-gray-700 { color: #e8ecf3 !important; }
html[data-lp][data-lp-mode="dark"] .text-gray-600, html[data-lp][data-lp-mode="dark"] .text-gray-500,
html[data-lp][data-lp-mode="dark"] .text-slate-500 { color: #9aa6b8 !important; }
html[data-lp][data-lp-mode="dark"][data-lp-page="login-modern_split"] input.block,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-modern_split"] .bg-white { background-color: #1c2432 !important; color: #e8ecf3 !important; border-color: #283243 !important; }
html[data-lp][data-lp-mode="dark"][data-lp-page="login-modern_split"] .bg-yellow-50,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-modern_split"] .bg-amber-50 { background-color: rgba(251, 191, 36, .14) !important; }
html[data-lp][data-lp-mode="dark"][data-lp-page="login-modern_split"] a.text-sm.font-semibold { color: #a5b4fc !important; }
html[data-lp][data-lp-mode="dark"][data-lp-page="login-modern_split"] .text-yellow-700,
html[data-lp][data-lp-mode="dark"][data-lp-page="login-modern_split"] .text-yellow-700 strong { color: #fcd34d !important; }
html[data-lp][data-lp-mode="dark"] .lp-save-pill { background: #15803d; }

/* The "Sign in with OTP" box (auth/partials/otp-login, shown when WhatsApp OTP is on) on every
   login design: dark panel and inputs, and the link text in the brand colour's dark shade. */
html[data-lp][data-lp-mode="dark"] .otpx {
    --otpx-fg: #e8ecf3;
    --otpx-muted: #9aa6b8;
    --otpx-surface: #151c27;
    --otpx-input-bg: #1c2432;
    --otpx-border: #283243 !important;
}
html[data-lp][data-lp-mode="dark"] .otpx-trigger,
html[data-lp][data-lp-mode="dark"] .otpx-trigger span,
html[data-lp][data-lp-mode="dark"] .otpx-link { color: var(--lp-primary-dark, #818cf8) !important; }