/* asset/css/theme-light.css
   Light theme design system. Keep layout in style.css; this file owns color,
   surface, contrast, and theme-state overrides only. */

html[data-theme="light"] {
    color-scheme: light;
    --light-page: #F7FAFC;
    --light-section: #FFFFFF;
    --light-band: #F1F6FB;
    --light-card: #FFFFFF;
    --light-card-subtle: #F8FAFC;
    --light-table-header: #E8EEF5;
    --light-table-cell: #FFFFFF;
    --light-border: #DCE5EF;
    --light-border-strong: #CBD6E2;
    --light-text: #0B1220;
    --light-text-secondary: #334155;
    --light-text-muted: #64748B;
    --light-text-faint: #94A3B8;
    --light-primary: #008A99;
    --light-primary-bright: #00D7E7;
    --light-secondary: #5B5BD6;
    --light-accent: #D94B75;
    --light-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    --light-shadow-hover: 0 18px 44px rgba(15, 23, 42, 0.12);
}

/* Global */
html[data-theme="light"] body {
    background:
        radial-gradient(circle at 52% -8%, rgba(0, 138, 153, 0.08), transparent 36rem),
        linear-gradient(180deg, var(--light-page) 0%, #FFFFFF 44%, var(--light-page) 100%);
    color: var(--light-text);
}

html[data-theme="light"] ::selection {
    background: rgba(0, 138, 153, 0.20);
    color: var(--light-text);
}

html[data-theme="light"] #loader {
    background: var(--light-page);
}

html[data-theme="light"] .cursor-dot {
    background-color: var(--light-primary);
    filter: drop-shadow(0 0 7px rgba(0, 138, 153, 0.36));
}

html[data-theme="light"] img[src$="ksc-logo-w.svg"] {
    filter: brightness(0) saturate(100%) invert(7%) sepia(27%) saturate(1317%) hue-rotate(181deg) brightness(96%) contrast(98%);
}

/* Typography */
html[data-theme="light"] :where(.text-white) {
    color: var(--light-text) !important;
}

html[data-theme="light"] :where(.text-gray-200, .text-gray-300) {
    color: var(--light-text-secondary) !important;
}

html[data-theme="light"] :where(.text-gray-400) {
    color: var(--light-text-muted) !important;
}

html[data-theme="light"] :where(.text-gray-500, .text-gray-600) {
    color: var(--light-text-faint) !important;
}

html[data-theme="light"] :where(.text-web3-primary) {
    color: var(--light-primary) !important;
}

html[data-theme="light"] :where(.text-web3-secondary) {
    color: var(--light-secondary) !important;
}

html[data-theme="light"] :where(.text-web3-accent) {
    color: var(--light-accent) !important;
}

html[data-theme="light"] .text-white\/5 {
    color: rgba(11, 18, 32, 0.06) !important;
}

html[data-theme="light"] .text-white\/30 {
    color: rgba(11, 18, 32, 0.34) !important;
}

html[data-theme="light"] :where(.hover\:text-white:hover, .group:hover .group-hover\:text-white) {
    color: var(--light-text) !important;
}

html[data-theme="light"] .group:hover .group-hover\:text-web3-primary\/10 {
    color: rgba(0, 138, 153, 0.14) !important;
}

html[data-theme="light"] .text-glow {
    text-shadow: none;
}

html[data-theme="light"] .text-gradient {
    background: linear-gradient(135deg, var(--light-text) 0%, var(--light-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .glitch::before,
html[data-theme="light"] .glitch::after {
    display: none;
}

html[data-theme="light"] .glitch {
    background: none !important;
    color: var(--light-primary) !important;
    -webkit-text-fill-color: var(--light-primary);
}

/* Layout Surfaces */
html[data-theme="light"] :where(.bg-black, .bg-web3-bg) {
    background-color: var(--light-section) !important;
}

html[data-theme="light"] :where(.bg-web3-bg\/80) {
    background-color: var(--light-card) !important;
}

html[data-theme="light"] :where(.bg-web3-card, .bg-web3-card\/30, .bg-web3-card\/50) {
    background-color: var(--light-band) !important;
}

html[data-theme="light"] .bg-web3-border {
    background-color: var(--light-border) !important;
}

html[data-theme="light"] :where(.bg-white\/5, .hover\:bg-white\/5:hover) {
    background-color: rgba(15, 23, 42, 0.035) !important;
}

html[data-theme="light"] :where(.bg-white\/10, .hover\:bg-white\/10:hover) {
    background-color: rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .bg-black\/20 {
    background-color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="light"] .bg-black\/40 {
    background-color: var(--light-card) !important;
}

html[data-theme="light"] .bg-black\/50 {
    background-color: var(--light-band) !important;
}

html[data-theme="light"] .bg-black\/60 {
    background-color: var(--light-card-subtle) !important;
}

html[data-theme="light"] .bg-black\/95 {
    background-color: rgba(247, 250, 252, 0.98) !important;
}

html[data-theme="light"] :where(.border-web3-border, .border-white\/5, .border-white\/10, .border-white\/20, .border-white\/30) {
    border-color: var(--light-border) !important;
}

html[data-theme="light"] :where(.border-web3-primary, .border-web3-primary\/20, .border-web3-primary\/30, .border-web3-primary\/50) {
    border-color: rgba(0, 138, 153, 0.28) !important;
}

html[data-theme="light"] :where(.border-web3-secondary, .border-web3-secondary\/20) {
    border-color: rgba(91, 91, 214, 0.24) !important;
}

html[data-theme="light"] :where(.border-web3-accent, .border-web3-accent\/20) {
    border-color: rgba(217, 75, 117, 0.24) !important;
}

/* Navigation */
html[data-theme="light"] .glass-nav {
    background: rgba(255, 255, 255, 0.88);
    border-bottom-color: var(--light-border);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] nav a {
    color: var(--light-text-secondary) !important;
}

html[data-theme="light"] nav a:hover,
html[data-theme="light"] nav a.text-white {
    color: var(--light-text) !important;
}

html[data-theme="light"] #mobile-menu-btn {
    color: var(--light-text) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: var(--light-border) !important;
    box-shadow: var(--light-shadow);
}

html[data-theme="light"] #mobile-menu-overlay {
    background: rgba(247, 250, 252, 0.98) !important;
}

html[data-theme="light"] #mobile-menu-overlay a {
    color: var(--light-text) !important;
}

html[data-theme="light"] #mobile-menu-overlay a:hover {
    color: var(--light-primary) !important;
}

/* Cards and Content Blocks */
html[data-theme="light"] .glass-card,
html[data-theme="light"] .uc-card,
html[data-theme="light"] .layer-card {
    border-color: var(--light-border) !important;
    box-shadow: var(--light-shadow);
}

html[data-theme="light"] .glass-card,
html[data-theme="light"] .layer-card {
    background: var(--light-card) !important;
}

html[data-theme="light"] .glass-card:hover,
html[data-theme="light"] .layer-card:hover {
    background: var(--light-card) !important;
    border-color: var(--light-border-strong) !important;
    box-shadow: var(--light-shadow-hover);
}

html[data-theme="light"] .layer-card::before {
    background: radial-gradient(760px circle at var(--mouse-x) var(--mouse-y), rgba(0, 138, 153, 0.06), transparent 42%);
}

/* Tables and matrices */
html[data-theme="light"] .custom-scrollbar {
    border-color: var(--light-border) !important;
}

html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-track {
    background: #E6EDF5;
}

html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #A9B7C8;
}

html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--light-primary);
}

html[data-theme="light"] .custom-scrollbar :where(.bg-web3-card) {
    background-color: var(--light-table-header) !important;
}

html[data-theme="light"] .custom-scrollbar :where(.bg-web3-bg, .bg-web3-bg\/80) {
    background-color: var(--light-table-cell) !important;
}

html[data-theme="light"] .custom-scrollbar :where(.hover\:bg-web3-primary\/10:hover, .hover\:bg-web3-secondary\/10:hover, .hover\:bg-web3-accent\/10:hover) {
    background-color: #F4F9FC !important;
}

html[data-theme="light"] .custom-scrollbar ul,
html[data-theme="light"] .custom-scrollbar li,
html[data-theme="light"] .custom-scrollbar span {
    color: var(--light-text-secondary) !important;
}

html[data-theme="light"] .custom-scrollbar span.font-bold {
    color: var(--light-text) !important;
}

/* Brand accents and gradients */
html[data-theme="light"] .from-white {
    --tw-gradient-from: var(--light-text) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(11, 18, 32, 0) var(--tw-gradient-to-position) !important;
}

html[data-theme="light"] .via-gray-200 {
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--light-text-secondary) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html[data-theme="light"] .via-white {
    --tw-gradient-to: rgba(0, 138, 153, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--light-primary) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html[data-theme="light"] .to-gray-600 {
    --tw-gradient-to: var(--light-text-muted) var(--tw-gradient-to-position) !important;
}

html[data-theme="light"] :where(.bg-web3-primary\/5, .bg-web3-primary\/10, .from-web3-primary\/10) {
    background-color: rgba(0, 138, 153, 0.07) !important;
}

html[data-theme="light"] :where(.bg-web3-secondary\/10, .to-web3-secondary\/10) {
    background-color: rgba(91, 91, 214, 0.07) !important;
}

html[data-theme="light"] .bg-web3-accent\/10 {
    background-color: rgba(217, 75, 117, 0.07) !important;
}

html[data-theme="light"] :where(.shadow-\[0_0_20px_rgba\(0\2c 240\2c 255\2c 0\.2\)\], .shadow-\[0_0_30px_rgba\(0\2c 240\2c 255\2c 0\.1\)\]) {
    box-shadow: 0 12px 28px rgba(0, 138, 153, 0.10) !important;
}

html[data-theme="light"] :where(.shadow-\[0_0_50px_\#00F0FF\], .shadow-\[0_0_50px_\#7000FF\], .shadow-\[0_0_50px_\#FF0055\]) {
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .shadow-\[0_0_30px_\#ffffff50\] {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
}

/* Buttons */
html[data-theme="light"] a.bg-white,
html[data-theme="light"] .bg-white.text-black {
    background-color: var(--light-text) !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] :where(.hover\:bg-web3-primary:hover) {
    background-color: var(--light-primary) !important;
}

html[data-theme="light"] :where(.hover\:text-black:hover) {
    color: #FFFFFF !important;
}

/* Background effects */
html[data-theme="light"] #bg-canvas,
html[data-theme="light"] #uc-bg-canvas {
    opacity: 0.10 !important;
}

html[data-theme="light"] .bg-noise,
html[data-theme="light"] .noise-bg,
html[data-theme="light"] .uc-noise,
html[data-theme="light"] .bg-\[url\(\'\.\/images\/noise\.svg\'\)\] {
    opacity: 0.012 !important;
    mix-blend-mode: multiply;
}

html[data-theme="light"] .bg-cyber-grid {
    background-image:
        radial-gradient(circle at center, rgba(0, 138, 153, 0.05) 0%, transparent 68%),
        linear-gradient(rgba(15, 23, 42, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.028) 1px, transparent 1px) !important;
    opacity: 0.18 !important;
}

html[data-theme="light"] .bg-\[radial-gradient\(circle_at_center\2c rgba\(0\2c 240\2c 255\2c 0\.15\)\2c transparent_70\%\)\] {
    background-image: radial-gradient(circle at center, rgba(0, 138, 153, 0.08), transparent 70%) !important;
}

html[data-theme="light"] .marquee-wrapper .bg-gradient-to-r.from-black {
    background-image: linear-gradient(to right, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0.035) 28%, transparent 72%) !important;
}

html[data-theme="light"] .marquee-wrapper .bg-gradient-to-l.from-black {
    background-image: linear-gradient(to left, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0.035) 28%, transparent 72%) !important;
}

/* Use Cases section */
html[data-theme="light"] .uc-preview {
    background: var(--light-band);
    color: var(--light-text);
}

html[data-theme="light"] .uc-radial {
    background:
        radial-gradient(circle at 50% 10%, rgba(0, 138, 153, 0.06), transparent 45%),
        radial-gradient(circle at 82% 50%, rgba(91, 91, 214, 0.04), transparent 42%);
}

html[data-theme="light"] .uc-card {
    background: var(--light-card) !important;
    border-color: var(--light-border) !important;
    box-shadow: var(--light-shadow);
}

html[data-theme="light"] .uc-card:hover {
    border-color: var(--light-border-strong) !important;
    box-shadow: var(--light-shadow-hover);
}

html[data-theme="light"] .uc-card::before {
    background: linear-gradient(135deg, rgba(0, 138, 153, 0.04), transparent 54%);
    opacity: 1;
}

html[data-theme="light"] .uc-list li,
html[data-theme="light"] .uc-desc {
    color: var(--light-text-muted);
}

html[data-theme="light"] .uc-pill {
    background: rgba(0, 138, 153, 0.08);
    border-color: rgba(0, 138, 153, 0.22);
    color: var(--light-primary);
}

html[data-theme="light"] .uc-pill-purple {
    background: rgba(91, 91, 214, 0.08);
    border-color: rgba(91, 91, 214, 0.22);
    color: var(--light-secondary);
}

html[data-theme="light"] .uc-fade-label {
    color: var(--light-text-faint);
}

html[data-theme="light"] .uc-ghost-number {
    color: rgba(11, 18, 32, 0.06);
}

html[data-theme="light"] .uc-tag {
    background: var(--light-card-subtle);
    border-color: var(--light-border);
    color: var(--light-text-secondary);
}

html[data-theme="light"] .uc-variant-b .uc-card {
    border-left-color: rgba(0, 138, 153, 0.22) !important;
    border-right-color: rgba(91, 91, 214, 0.18) !important;
}

html[data-theme="light"] .uc-variant-b .uc-beam {
    background: linear-gradient(180deg, rgba(0, 138, 153, 0), rgba(0, 138, 153, 0.22), rgba(91, 91, 214, 0));
    box-shadow: 0 0 54px rgba(0, 138, 153, 0.12);
}

html[data-theme="light"] .uc-variant-b .uc-beam::after {
    background: radial-gradient(circle, rgba(0, 138, 153, 0.12), transparent 60%);
}

/* Forms */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: var(--light-card) !important;
    border-color: var(--light-border) !important;
    color: var(--light-text) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: var(--light-text-faint) !important;
}

/* Footer */
html[data-theme="light"] footer {
    background-color: var(--light-band) !important;
    border-color: var(--light-border) !important;
}

html[data-theme="light"] footer a:hover {
    color: var(--light-text) !important;
}

/* Theme toggle */
.ksc-theme-toggle {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 7.25rem;
    height: 2.75rem;
    padding: 0 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(3, 3, 5, 0.72);
    color: #E8F8FA;
    font-family: "Orbitron", monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ksc-theme-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 240, 255, 0.45);
}

.ksc-theme-toggle i {
    color: #00F0FF;
    font-size: 0.95rem;
}

html[data-theme="light"] .ksc-theme-toggle {
    background: rgba(255, 255, 255, 0.92);
    color: var(--light-text);
    border-color: var(--light-border);
    box-shadow: var(--light-shadow);
}

html[data-theme="light"] .ksc-theme-toggle:hover {
    border-color: rgba(0, 138, 153, 0.35);
}

html[data-theme="light"] .ksc-theme-toggle i {
    color: var(--light-primary);
}

@media (max-width: 767px) {
    .ksc-theme-toggle {
        right: 1rem;
        bottom: 1rem;
        min-width: 3rem;
        width: 3rem;
        padding: 0;
        justify-content: center;
    }

    .ksc-theme-toggle span {
        display: none;
    }
}