/* ==========================================================================
   KinSol Tech — theme layer
   The shipped design is the DARK theme (default). This file re-skins the
   same markup for html[data-theme="light"] by overriding the dark-surface
   utility classes with a light palette:
     page        #fafaf8      former dark sections   #f2f4ef
     cards       #ffffff      ink text               #0b0f0a
     brand green on light surfaces: #077800 (readable), true neon #39FF14
     is kept inside .bg-black accents and on neon-filled buttons.
   ========================================================================== */

:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* Toggle icon visibility: sun shown in dark (switch to light), moon in light */
.k-icon-moon { display: none; }
html[data-theme="light"] .k-icon-sun { display: none; }
html[data-theme="light"] .k-icon-moon { display: block; }

/* Smooth cross-fade while switching (class added briefly by the toggle JS) */
html.k-theme-anim,
html.k-theme-anim body,
html.k-theme-anim *,
html.k-theme-anim *::before,
html.k-theme-anim *::after {
    transition: background-color 0.35s ease, border-color 0.35s ease,
        color 0.35s ease, box-shadow 0.35s ease !important;
}

/* --- Page ------------------------------------------------------------- */
html[data-theme="light"] body { background-color: #fafaf8; }

/* --- Surfaces ---------------------------------------------------------- */
html[data-theme="light"] .bg-ink { background-color: #f2f4ef; }
html[data-theme="light"] .bg-\[\#050505\] { background-color: #f2f4ef; }
html[data-theme="light"] .gradient-bg { background: linear-gradient(135deg, #f7f9f4 0%, #edf0e8 100%); }
html[data-theme="light"] .bg-ink-soft { background-color: #ffffff; }
html[data-theme="light"] .bg-dark-bg { background-color: #ffffff; }
html[data-theme="light"] .bg-gray-900 { background-color: #ffffff; }
html[data-theme="light"] .bg-gray-800 { background-color: #ffffff; }
html[data-theme="light"] .bg-gray-700 { background-color: rgba(10, 15, 10, 0.05); }
html[data-theme="light"] .bg-white\/\[0\.03\] { background-color: #ffffff; }
html[data-theme="light"] .bg-white\/\[0\.04\] { background-color: rgba(10, 15, 10, 0.03); }
html[data-theme="light"] .bg-white\/5 { background-color: rgba(10, 15, 10, 0.04); }
html[data-theme="light"] .bg-black\/50,
html[data-theme="light"] .bg-black\/60 { background-color: rgba(10, 15, 10, 0.05); }
html[data-theme="light"] .bg-ink-soft\/90,
html[data-theme="light"] .bg-ink-soft\/95 { background-color: rgba(255, 255, 255, 0.92); }
/* .bg-black is intentionally NOT overridden — black icon tiles and the tech
   marquee band stay dark in both themes as brand accents. */

/* --- Text ---------------------------------------------------------------- */
html[data-theme="light"] .text-white { color: #0b0f0a; }
html[data-theme="light"] .text-white\/90 { color: rgba(11, 15, 10, 0.92); }
html[data-theme="light"] .text-white\/85 { color: rgba(11, 15, 10, 0.88); }
html[data-theme="light"] .text-white\/80 { color: rgba(11, 15, 10, 0.82); }
html[data-theme="light"] .text-white\/70 { color: rgba(11, 15, 10, 0.74); }
html[data-theme="light"] .text-white\/60 { color: rgba(11, 15, 10, 0.66); }
html[data-theme="light"] .text-white\/50 { color: rgba(11, 15, 10, 0.6); }
html[data-theme="light"] .text-white\/40 { color: rgba(11, 15, 10, 0.52); }
html[data-theme="light"] .text-gray-300 { color: rgba(11, 15, 10, 0.68); }
html[data-theme="light"] .text-gray-400 { color: rgba(11, 15, 10, 0.6); }
html[data-theme="light"] .placeholder-white\/40::placeholder { color: rgba(11, 15, 10, 0.45); }

/* Keep light-on-dark text inside the always-dark marquee band */
html[data-theme="light"] .bg-black .text-white\/40 { color: rgba(255, 255, 255, 0.5); }
html[data-theme="light"] .bg-black .text-white { color: #ffffff; }

/* --- Brand green: darker cut for contrast on light surfaces --------------- */
html[data-theme="light"] .text-neon-green { color: #077800; }
html[data-theme="light"] .hover\:text-neon-green:hover { color: #077800; }
html[data-theme="light"] .k-neon-glow { text-shadow: none; }
html[data-theme="light"] .neon-text { color: #077800; text-shadow: none; }
/* ...but true neon survives inside black accent tiles */
html[data-theme="light"] .bg-black .text-neon-green,
html[data-theme="light"] .bg-black.text-neon-green { color: #39FF14; }

/* --- Borders ---------------------------------------------------------------- */
html[data-theme="light"] .border-white\/10 { border-color: rgba(11, 15, 10, 0.1); }
html[data-theme="light"] .border-white\/15 { border-color: rgba(11, 15, 10, 0.16); }
html[data-theme="light"] .border-white\/20 { border-color: rgba(11, 15, 10, 0.2); }
html[data-theme="light"] .border-gray-800 { border-color: rgba(11, 15, 10, 0.1); }
html[data-theme="light"] .border-gray-700 { border-color: rgba(11, 15, 10, 0.12); }
html[data-theme="light"] .hover\:border-neon-green:hover { border-color: #077800; }
html[data-theme="light"] .hover\:border-neon-green\/40:hover,
html[data-theme="light"] .hover\:border-neon-green\/50:hover { border-color: rgba(7, 120, 0, 0.5); }
html[data-theme="light"] .hover\:border-neon-green\/60:hover { border-color: rgba(7, 120, 0, 0.6); }

/* --- Hover fills ------------------------------------------------------------- */
html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(11, 15, 10, 0.04); }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(11, 15, 10, 0.07); }
html[data-theme="light"] .hover\:text-white:hover { color: #0b0f0a; }
/* Newsletter button inverts to ink+neon instead of white-on-light */
html[data-theme="light"] .hover\:bg-white:hover { background-color: #0b0f0a; color: #39FF14; }

/* --- Chrome components --------------------------------------------------------- */
html[data-theme="light"] .k-nav-shell { background: rgba(255, 255, 255, 0.85); }
html[data-theme="light"] .k-nav-scrolled .k-nav-shell {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 40px -18px rgba(15, 25, 15, 0.28);
}

html[data-theme="light"] .k-wordmark { -webkit-text-stroke-color: rgba(7, 120, 0, 0.42); }
html[data-theme="light"] .to-\[\#050505\] { --tw-gradient-to: #f2f4ef; }

/* Grid backdrops become ink lines on light */
html[data-theme="light"] .k-hero-grid,
html[data-theme="light"] .k-grid-dark {
    background-image:
        linear-gradient(rgba(10, 20, 10, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 20, 10, 0.055) 1px, transparent 1px);
}

/* Orbit slideshow cards: lighter shadow so they don't smudge on light */
html[data-theme="light"] .k-orbit-tilt { box-shadow: 0 20px 44px -18px rgba(15, 30, 12, 0.24); }

/* --- Desktop nav: restore transparent link rail (the fill overrides above
       would otherwise outrank Tailwind's lg:bg-transparent reset) ---------- */
@media (min-width: 1024px) {
    html[data-theme="light"] .lg\:bg-transparent { background-color: transparent; }
    html[data-theme="light"] .lg\:hover\:bg-transparent:hover { background-color: transparent; }
}

/* --- Page-CSS components with hardcoded dark backgrounds (FAQ page) ------- */
html[data-theme="light"] .faq-item {
    background: #ffffff;
    box-shadow: 0 10px 28px -18px rgba(15, 30, 12, 0.18);
}

html[data-theme="light"] .category-btn {
    background: #ffffff;
    border: 1px solid rgba(11, 15, 10, 0.12);
}