/* Light theme — additive overrides only. style.css (dark) is never modified. */

html[data-theme="light"] {
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface2: #f0f1f5;
    --text: #14161c;
    --muted: #5b6070;
    --green: #4d7c0f;
    --purple: #7c3aed;
    --cyan: #0e7490;
    --line: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] body {
    background: radial-gradient(circle at 70% 15%, rgba(124, 58, 237, 0.05), transparent 30%), var(--bg);
}

html[data-theme="light"] body:before {
    opacity: 0.05;
    background-image: linear-gradient(rgba(15, 23, 42, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.5) 1px, transparent 1px);
}

/* Header / nav — navy surface, so its own text needs light overrides */
html[data-theme="light"] .site-header {
    background-color: #253979;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 30px rgba(15, 23, 42, 0.15);
}

html[data-theme="light"] .site-header .logo,
html[data-theme="light"] .footer .logo {
    color: #f5f6fb;
}

html[data-theme="light"] .nav {
    color: #e1e3f5;
}

html[data-theme="light"] .site-header .theme-toggle {
    color: #f5f6fb;
    border-color: rgba(255, 255, 255, 0.28);
}

html[data-theme="light"] .site-header .header-cta {
    color: #f5f6fb;
    border-color: rgba(255, 255, 255, 0.35);
}

html[data-theme="light"] .lang-switch a:not(.active) {
    color: #b7bde0;
}

html[data-theme="light"] .lang-switch a:not(.active):hover {
    color: #ffffff;
}

html[data-theme="light"] .lang-switch span {
    color: rgba(255, 255, 255, 0.35);
}

html[data-theme="light"] .nav .dropdown {
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .nav .dropdown a {
    color: #3a3f4a;
}

html[data-theme="light"] .nav .dropdown a:hover {
    color: var(--green);
}

html[data-theme="light"] .menu-toggle {
    color: var(--green);
}

@media (max-width: 700px) {
    html[data-theme="light"] .menu-toggle span {
        background: #f5f6fb;
    }

    html[data-theme="light"] .menu-toggle.open span {
        background: var(--green);
    }

    /* Nav drops into a white flyout panel below the (still navy) header bar,
       so its text needs to flip back to dark here. */
    html[data-theme="light"] .nav {
        background: #ffffff;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
        color: #383c46;
    }

    html[data-theme="light"] .lang-switch a:not(.active) {
        color: #6b7280;
    }

    html[data-theme="light"] .lang-switch a:not(.active):hover {
        color: var(--text);
    }

    html[data-theme="light"] .lang-switch span {
        color: rgba(15, 23, 42, 0.25);
    }
}

html[data-theme="light"] .admin-menu-toggle span {
    background: var(--text);
}

/* Buttons */
html[data-theme="light"] .btn-outline {
    border: 1px solid rgba(15, 23, 42, 0.3);
}

html[data-theme="light"] .btn-outline:hover {
    border-color: var(--green);
    color: var(--green);
}

html[data-theme="light"] .btn-danger {
    color: #b91c1c;
}

html[data-theme="light"] .btn-danger:hover {
    color: #050609;
}

/* Hero */
html[data-theme="light"] .hero-text {
    color: #4b5162;
}

html[data-theme="light"] .play {
    border-color: rgba(15, 23, 42, 0.35);
}

html[data-theme="light"] .trusted {
    background: linear-gradient(135deg, #2a4189, #1c2c63);
    border-radius: 14px;
    padding: 16px 28px;
    box-shadow: 0 16px 40px rgba(37, 57, 121, 0.28);
}

html[data-theme="light"] .trusted>span {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

html[data-theme="light"] .trusted div,
html[data-theme="light"] .trusted-track {
    color: #ffffff;
}

html[data-theme="light"] .trusted b,
html[data-theme="light"] .trusted-track b {
    color: #ffffff;
    opacity: 0.65;
    transition: opacity 0.3s ease;
}

html[data-theme="light"] .trusted div:hover b,
html[data-theme="light"] .trusted-track:hover b {
    opacity: 0.45;
}

html[data-theme="light"] .trusted div b:hover,
html[data-theme="light"] .trusted-track b:hover {
    opacity: 1;
}

html[data-theme="light"] .hero-proof strong {
    color: #1a1d24;
}

html[data-theme="light"] .hero-proof span {
    color: #6b7280;
}

html[data-theme="light"] .proof-avatars i {
    border-color: #ffffff;
}

/* Service strip */
html[data-theme="light"] .service-strip {
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .service-mini p {
    color: #5b6070;
}

html[data-theme="light"] .purple {
    color: #6d28d9;
}

/* Stats band */
html[data-theme="light"] .stats-band {
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
}

/* Work / projects */
html[data-theme="light"] .project {
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .project:hover {
    border-color: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .project-meta>span,
html[data-theme="light"] .project-meta p {
    color: #5b6070;
}

/* Process */
html[data-theme="light"] .process-step p {
    color: #5b6070;
}

html[data-theme="light"] .step-icon {
    border-color: rgba(15, 23, 42, 0.18);
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 0 0 7px var(--bg);
}

/* Care / pricing */
html[data-theme="light"] .care-heading>p,
html[data-theme="light"] .care-note {
    color: #5b6070;
}

html[data-theme="light"] .price-card {
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .price-card.free,
html[data-theme="light"] .price-card.monthly,
html[data-theme="light"] .price-card.yearly {
    border-color: #253979;
}

html[data-theme="light"] .price-card.monthly {
    box-shadow: 0 0 45px rgba(37, 57, 121, 0.08);
}

html[data-theme="light"] .price-icon,
html[data-theme="light"] .monthly .price-icon,
html[data-theme="light"] .yearly .price-icon {
    background: rgba(37, 57, 121, 0.12);
    color: #253979;
}

html[data-theme="light"] .price small,
html[data-theme="light"] .price-card>p:not(.plan-label) {
    color: #5b6070;
}

html[data-theme="light"] .price-card ul {
    color: #383c46;
}

html[data-theme="light"] .price-card li:before,
html[data-theme="light"] .monthly li:before,
html[data-theme="light"] .yearly li:before {
    color: #253979;
}

html[data-theme="light"] .plan-label span,
html[data-theme="light"] .yearly .plan-label span {
    background: rgba(37, 57, 121, 0.12);
    color: #253979;
}

html[data-theme="light"] .price-btn {
    border-color: #253979;
}

html[data-theme="light"] .monthly .price-btn,
html[data-theme="light"] .yearly .price-btn {
    background: #253979;
    border-color: #253979;
    color: #ffffff;
}

html[data-theme="light"] .price-card.free:hover,
html[data-theme="light"] .price-card.yearly:hover {
    border-color: #253979;
    box-shadow: 0 20px 50px rgba(37, 57, 121, 0.16);
}

html[data-theme="light"] .price-card.free:hover .price-btn {
    border-color: #253979;
    box-shadow: 0 9px 20px rgba(37, 57, 121, 0.18);
}

html[data-theme="light"] .price-card.yearly:hover .price-btn {
    box-shadow: 0 9px 20px rgba(37, 57, 121, 0.22);
}

/* About page */
html[data-theme="light"] .about-lead,
html[data-theme="light"] .story-copy p,
html[data-theme="light"] .approach-copy>p:not(.eyebrow),
html[data-theme="light"] .about-copy>p {
    color: #4b5162;
}

html[data-theme="light"] .about-marquee {
    background: #ffffff;
}

html[data-theme="light"] .orbit-note {
    color: #4b5162;
}

html[data-theme="light"] .story-copy .story-large {
    color: #1a1d24;
}

html[data-theme="light"] .principle-number {
    color: #8a90a0;
}

html[data-theme="light"] .principle-card p {
    color: #5b6070;
}

html[data-theme="light"] .approach-list span {
    color: #2b2f39;
}

html[data-theme="light"] .about-stats span {
    color: #6b7280;
}

/* .about-contact keeps its dark spotlight-panel background by design; only the
   inherited heading text needs a fixed light color so it stays readable */
html[data-theme="light"] .about-contact h2 {
    color: #f6f7f9;
}

/* Contact page */
/* .contact-inner (homepage CTA band) also keeps its dark spotlight background */
html[data-theme="light"] .contact h2 {
    color: #f6f7f9;
}

html[data-theme="light"] .contact-copy p {
    color: #4b5162;
}

html[data-theme="light"] .contact-info a,
html[data-theme="light"] .contact-info span,
html[data-theme="light"] .related a,
html[data-theme="light"] .related-item a {
    color: #4b5162;
}

html[data-theme="light"] .contact-form {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .form-field span {
    color: #6b7280;
    font-weight: 600;
    font-size: 18px;
}

html[data-theme="light"] .form-field input,
html[data-theme="light"] .form-field textarea,
html[data-theme="light"] .form-field select {
    background: #ffffff;
    border-color: #d7dae0;
}

html[data-theme="light"] .form-field input:focus,
html[data-theme="light"] .form-field textarea:focus,
html[data-theme="light"] .form-field select:focus {
    border-color: var(--green);
}

html[data-theme="light"] .form-error {
    color: #dc2626;
}

/* Blog */
html[data-theme="light"] .post-card {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .post-card:hover {
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .post-meta {
    color: #5b6070;
}

html[data-theme="light"] .post-card p,
html[data-theme="light"] .post-content p,
html[data-theme="light"] .post-content li {
    color: #383c46;
}

/* Footer — navy surface, so its own text needs light overrides.
   .footer itself is a max-width, centered box, so a plain background-color
   would only fill that inner column; the box-shadow spread + clip-path paint
   the navy edge-to-edge behind it while the content stays centered. */
html[data-theme="light"] .footer {
    background-color: #253979;
    box-shadow: 0 0 0 100vmax #253979;
    clip-path: inset(0 -100vmax);
    border-top-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] .footer-brand p {
    color: #c7cbe6;
}

html[data-theme="light"] .footer h4 {
    color: #9aa0cc;
}

html[data-theme="light"] .footer>div:not(.footer-brand):not(.footer-bottom) a,
html[data-theme="light"] .footer>div:not(.footer-brand):not(.footer-bottom) span {
    color: #e1e3f2;
}

html[data-theme="light"] .socials a {
    border-color: rgba(255, 255, 255, 0.28);
    color: #e1e3f2;
}

html[data-theme="light"] .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: #a9aed6;
}

/* Misc */
html[data-theme="light"] .scroll-progress {
    background: rgba(15, 23, 42, 0.06);
}

/* Testimonials */
html[data-theme="light"] .testimonial-card {
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .testimonial-card:hover {
    border-color: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .testimonial-card p {
    color: #383c46;
}

/* Theme toggle icon swap */
html[data-theme="light"] .theme-toggle .icon-sun {
    display: none;
}

html[data-theme="light"] .theme-toggle .icon-moon {
    display: inline-flex;
}

/* Admin (shares this stylesheet; kept in sync so it never renders half-themed) */
html[data-theme="light"] .admin-shell {
    background: radial-gradient(circle at 20% 0%, rgba(124, 58, 237, 0.08), transparent 26%), var(--bg);
}

html[data-theme="light"] .admin-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--line);
}

html[data-theme="light"] .admin-brand-wrap {
    border-bottom: 1px solid var(--line);
}

html[data-theme="light"] .admin-nav::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .admin-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.3);
}

html[data-theme="light"] .admin-nav a {
    color: #383c46;
}

html[data-theme="light"] .admin-nav a.active,
html[data-theme="light"] .admin-nav a:hover {
    color: var(--green);
}

html[data-theme="light"] .admin-sidebar-footer {
    border-top: 1px solid var(--line);
}

html[data-theme="light"] .admin-topbar {
    border-bottom: 1px solid var(--line);
}

html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .panel {
    border: 1px solid var(--line);
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .dashboard-card small {
    color: #5b6070;
}

html[data-theme="light"] .action-tile {
    background: #f6f7fb;
    border: 1px solid var(--line);
}

html[data-theme="light"] .action-tile:hover {
    border-color: rgba(77, 124, 15, 0.35);
}

html[data-theme="light"] .action-icon.purple {
    color: #6d28d9;
}

html[data-theme="light"] .section-list em.warn,
html[data-theme="light"] .tag.purple {
    color: #6d28d9;
}

html[data-theme="light"] .section-list span {
    color: #1f2330;
}

html[data-theme="light"] .field {
    color: #2b2f39;
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .field select {
    background: #ffffff;
    border: 1px solid var(--line);
}

html[data-theme="light"] .admin-settings-row span {
    color: #1f2330;
}

html[data-theme="light"] .admin-list-item,
html[data-theme="light"] .admin-settings-row {
    border-top: 1px solid var(--line);
}

html[data-theme="light"] .admin-menu-toggle {
    border: 1px solid var(--line);
    background: #f6f7fb;
}

/* Portfolio */
html[data-theme="light"] .portfolio-lead {
    color: #5b6070;
}

html[data-theme="light"] .filter-pill {
    border-color: var(--line);
    color: var(--text);
}

html[data-theme="light"] .filter-pill:hover {
    border-color: rgba(15, 23, 42, 0.3);
}

html[data-theme="light"] .filter-pill.active {
    background: var(--green);
    border-color: var(--green);
    color: #050609;
}

html[data-theme="light"] .portfolio-card {
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .portfolio-card:hover {
    border-color: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .portfolio-index {
    color: rgba(15, 23, 42, 0.15);
}

html[data-theme="light"] .portfolio-card-body p {
    color: #5b6070;
}

html[data-theme="light"] .portfolio-card-meta {
    color: #6b7280;
}

html[data-theme="light"] .portfolio-card-meta b {
    color: var(--text);
}

html[data-theme="light"] .portfolio-empty {
    color: #5b6070;
}