/* =============================================
   LIGHT MODE OVERRIDES
   ============================================= */

/* --- Core backgrounds --- */
html[data-theme="light"] {
    background: #ffffff;
}

html[data-theme="light"] body {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
}

/* --- Cursor --- */
html[data-theme="light"] #cursor {
    background: #0a0a0a;
}

html[data-theme="light"] #cursor.hover {
    background: transparent;
    border-color: #0a0a0a;
}

/* --- Nav --- */
html[data-theme="light"] #nav.scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="light"] .nav-link {
    color: rgba(10, 10, 10, 0.6) !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
    color: #0a0a0a !important;
}

/* --- Dropdowns --- */
html[data-theme="light"] .contact-dropdown,
html[data-theme="light"] .nav-anchor-dropdown {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(10, 10, 10, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .contact-dropdown a,
html[data-theme="light"] .nav-anchor-dropdown a {
    color: rgba(10, 10, 10, 0.55) !important;
}

html[data-theme="light"] .contact-dropdown a:hover,
html[data-theme="light"] .nav-anchor-dropdown a:hover {
    background: rgba(10, 10, 10, 0.05) !important;
    color: #0a0a0a !important;
}

/* --- Section labels --- */
html[data-theme="light"] .section-label {
    color: rgba(10, 10, 10, 0.35) !important;
}

/* --- SVG logo fills --- */
html[data-theme="light"] nav svg path[fill="white"] {
    fill: #0a0a0a;
}

html[data-theme="light"] footer svg path {
    fill: rgba(10, 10, 10, 0.25) !important;
}

/* --- Explore line --- */
html[data-theme="light"] .explore-line {
    background: #0a0a0a !important;
}

/* =============================================
   TAILWIND UTILITY OVERRIDES
   ============================================= */

/* Background */
html[data-theme="light"] .bg-dark {
    background-color: #ffffff !important;
}

/* Text colors */
html[data-theme="light"] .text-white {
    color: #0a0a0a !important;
}

html[data-theme="light"] .text-white\/15 {
    color: rgba(10, 10, 10, 0.15) !important;
}

html[data-theme="light"] .text-white\/25 {
    color: rgba(10, 10, 10, 0.25) !important;
}

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

html[data-theme="light"] .text-white\/35 {
    color: rgba(10, 10, 10, 0.35) !important;
}

html[data-theme="light"] .text-white\/40 {
    color: rgba(10, 10, 10, 0.4) !important;
}

html[data-theme="light"] .text-white\/45 {
    color: rgba(10, 10, 10, 0.45) !important;
}

html[data-theme="light"] .text-white\/50 {
    color: rgba(10, 10, 10, 0.5) !important;
}

html[data-theme="light"] .text-white\/60 {
    color: rgba(10, 10, 10, 0.6) !important;
}

html[data-theme="light"] .text-white\/65 {
    color: rgba(10, 10, 10, 0.65) !important;
}

html[data-theme="light"] .text-white\/70 {
    color: rgba(10, 10, 10, 0.7) !important;
}

html[data-theme="light"] .text-white\/80 {
    color: rgba(10, 10, 10, 0.8) !important;
}

html[data-theme="light"] .text-white\/85 {
    color: rgba(10, 10, 10, 0.85) !important;
}

/* Border colors */
html[data-theme="light"] .border-white\/\[0\.04\] {
    border-color: rgba(10, 10, 10, 0.06) !important;
}

html[data-theme="light"] .border-white\/\[0\.06\] {
    border-color: rgba(10, 10, 10, 0.08) !important;
}

html[data-theme="light"] .border-white\/\[0\.07\] {
    border-color: rgba(10, 10, 10, 0.08) !important;
}

html[data-theme="light"] .border-white\/\[0\.08\] {
    border-color: rgba(10, 10, 10, 0.1) !important;
}

html[data-theme="light"] .border-white\/10 {
    border-color: rgba(10, 10, 10, 0.1) !important;
}

html[data-theme="light"] .border-white\/20 {
    border-color: rgba(10, 10, 10, 0.2) !important;
}

html[data-theme="light"] .border-white\/30 {
    border-color: rgba(10, 10, 10, 0.3) !important;
}

/* Background with opacity */
html[data-theme="light"] .bg-white\/\[0\.02\] {
    background-color: rgba(10, 10, 10, 0.02) !important;
}

html[data-theme="light"] .bg-white\/\[0\.025\] {
    background-color: rgba(10, 10, 10, 0.025) !important;
}

html[data-theme="light"] .bg-white\/\[0\.05\] {
    background-color: rgba(10, 10, 10, 0.05) !important;
}

html[data-theme="light"] .bg-white\/5 {
    background-color: rgba(10, 10, 10, 0.05) !important;
}

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

html[data-theme="light"] .bg-white\/40 {
    background-color: rgba(10, 10, 10, 0.4) !important;
}

/* Hover utilities */
html[data-theme="light"] .hover\:bg-white:hover {
    background-color: #0a0a0a !important;
}

html[data-theme="light"] .hover\:text-dark:hover {
    color: #ffffff !important;
}

html[data-theme="light"] .hover\:text-white:hover {
    color: #0a0a0a !important;
}

html[data-theme="light"] .hover\:border-white\/20:hover {
    border-color: rgba(10, 10, 10, 0.2) !important;
}

html[data-theme="light"] .hover\:bg-white\/\[0\.05\]:hover {
    background-color: rgba(10, 10, 10, 0.05) !important;
}

/* Selection */
html[data-theme="light"] ::selection {
    background: rgba(77, 101, 255, 0.2);
    color: #0a0a0a;
}

/* bg-dark/95 (mobile menu on index) */
html[data-theme="light"] .bg-dark\/95 {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* =============================================
   CONTACT BUTTON
   ============================================= */
html[data-theme="light"] #contact-btn {
    border-color: rgba(10, 10, 10, 0.25) !important;
    color: #0a0a0a !important;
}

html[data-theme="light"] #contact-btn:hover {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* =============================================
   HAMBURGER / MOBILE MENU (index.html)
   ============================================= */
html[data-theme="light"] #menu-toggle {
    color: #0a0a0a !important;
}

html[data-theme="light"] .mobile-link {
    color: #0a0a0a !important;
}

/* =============================================
   INDEX — WORKS SECTION
   ============================================= */
html[data-theme="light"] .works-title {
    color: rgba(10, 10, 10, 0.2) !important;
}

html[data-theme="light"] .works-title.active {
    color: #0a0a0a !important;
}

html[data-theme="light"] .works-accordion-trigger {
    color: #0a0a0a;
}

html[data-theme="light"] .works-accordion-trigger h2 {
    color: rgba(10, 10, 10, 0.3) !important;
}

html[data-theme="light"] .works-accordion-item.is-open .works-accordion-trigger h2 {
    color: #0a0a0a !important;
}

html[data-theme="light"] .works-accordion-year {
    color: rgba(10, 10, 10, 0.3) !important;
}

html[data-theme="light"] .works-accordion-tag {
    background: rgba(10, 10, 10, 0.07) !important;
    color: rgba(10, 10, 10, 0.65) !important;
}

html[data-theme="light"] .works-accordion-item {
    border-color: rgba(10, 10, 10, 0.06) !important;
}

/* =============================================
   INDEX — MÉTHODE (pillars)
   ============================================= */
html[data-theme="light"] .pillar-label {
    color: rgba(10, 10, 10, 0.35) !important;
}

html[data-theme="light"] .pillar-col:hover .pillar-label {
    color: rgba(10, 10, 10, 0.85) !important;
}

html[data-theme="light"] .pillar-title {
    color: #0a0a0a !important;
}

html[data-theme="light"] .pillar-desc {
    color: rgba(10, 10, 10, 0.4) !important;
}

html[data-theme="light"] .pillar-col:hover .pillar-desc {
    color: rgba(10, 10, 10, 0.65) !important;
}

/* =============================================
   INDEX — SERVICES
   ============================================= */
html[data-theme="light"] .service-label {
    color: rgba(10, 10, 10, 0.35) !important;
}

html[data-theme="light"] .service-col:hover .service-label {
    color: rgba(10, 10, 10, 0.85) !important;
}

html[data-theme="light"] .service-title {
    color: #0a0a0a !important;
}

html[data-theme="light"] .service-desc {
    color: rgba(10, 10, 10, 0.4) !important;
}

html[data-theme="light"] .service-col:hover .service-desc {
    color: rgba(10, 10, 10, 0.65) !important;
}

html[data-theme="light"] .service-list {
    border-color: rgba(10, 10, 10, 0.06) !important;
}

html[data-theme="light"] .service-list li {
    color: rgba(10, 10, 10, 0.45) !important;
    border-color: rgba(10, 10, 10, 0.04) !important;
}

html[data-theme="light"] .service-col:hover .service-list li {
    color: rgba(10, 10, 10, 0.7) !important;
}

/* =============================================
   RESUME — SPECIFIC
   ============================================= */

/* Personal card background */
html[data-theme="light"] [style*="background: #0f0f11"] {
    background: #f0f0f2 !important;
}

/* Large decorative text "MOI" */
html[data-theme="light"] [style*="color: rgba(255,255,255,0.025)"] {
    color: rgba(10, 10, 10, 0.04) !important;
}

/* Radial gradient bg */
html[data-theme="light"] [style*="background: radial-gradient(circle, rgba(255,255,255,0.04)"] {
    background: radial-gradient(circle, rgba(10, 10, 10, 0.03) 0%, transparent 70%) !important;
}

/* Italic text in resume hero */
html[data-theme="light"] [style*="color: rgba(255,255,255,0.38)"] {
    color: rgba(10, 10, 10, 0.38) !important;
}

/* Skill/experience bars */
html[data-theme="light"] [style*="background: rgba(255,255,255,0.06)"] {
    background: rgba(10, 10, 10, 0.06) !important;
}

html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.1)"] {
    border-color: rgba(10, 10, 10, 0.1) !important;
}

html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.07)"] {
    border-color: rgba(10, 10, 10, 0.08) !important;
}

html[data-theme="light"] [style*="color: rgba(255,255,255,0.3)"] {
    color: rgba(10, 10, 10, 0.3) !important;
}

html[data-theme="light"] [style*="color: rgba(255,255,255,0.7)"] {
    color: rgba(10, 10, 10, 0.7) !important;
}

html[data-theme="light"] [style*="color: rgba(255,255,255,0.45)"] {
    color: rgba(10, 10, 10, 0.45) !important;
}

/* =============================================
   INDEX — INLINE STYLE OVERRIDES
   ============================================= */

/* Method section card bg */
html[data-theme="light"] [style*="background: rgba(255,255,255,0.025)"] {
    background: rgba(10, 10, 10, 0.025) !important;
}

/* =============================================
   PROJECT PAGES — BLOCKQUOTE
   ============================================= */
html[data-theme="light"] blockquote.border-accent {
    color: rgba(10, 10, 10, 0.85) !important;
}

/* =============================================
   PROJECT PAGES — "NEXT PROJECT" HOVER
   ============================================= */
html[data-theme="light"] .hover\:bg-white\/\[0\.02\]:hover {
    background-color: rgba(10, 10, 10, 0.02) !important;
}

/* =============================================
   INDEX — PLASMA GRADIENTS (light mode)
   ============================================= */

/* Hero vignette */
html[data-theme="light"] #hero-vignette {
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(255,255,255,0.55) 100%),
        linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, transparent 25%, transparent 70%, rgba(255,255,255,0.5) 100%);
}

/* Works → Contact bottom fade */
html[data-theme="light"] #works::after {
    background: linear-gradient(to bottom, transparent, #ffffff);
}

/* =============================================
   PRELOADER (keep dark — it's a loading screen)
   ============================================= */
html[data-theme="light"] #preloader {
    background: #0a0a0a;
}

/* =============================================
   THEME TOGGLE BUTTON
   ============================================= */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    transition: border-color 0.25s, color 0.25s;
    flex-shrink: 0;
}

.theme-toggle:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

html[data-theme="light"] .theme-toggle {
    border-color: rgba(10, 10, 10, 0.2);
    color: rgba(10, 10, 10, 0.5);
}

html[data-theme="light"] .theme-toggle:hover {
    border-color: rgba(10, 10, 10, 0.5);
    color: #0a0a0a;
}

/* Icon visibility */
.theme-icon-sun {
    display: block;
}

.theme-icon-moon {
    display: none;
}

html[data-theme="light"] .theme-icon-sun {
    display: none;
}

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

/* =============================================
   SMOOTH TRANSITION ON THEME CHANGE
   ============================================= */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition-duration: 0.4s !important;
    transition-property: background-color, color, border-color, fill, stroke, box-shadow, opacity !important;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
}

/* Don't transition images and iframes */
html.theme-transitioning img,
html.theme-transitioning video,
html.theme-transitioning iframe {
    transition: none !important;
}