/* ==========================================================
   THEME.CSS
   Darpan Mishra Website
   Theme System v1.0
========================================================== */

/* ==========================================================
   LIGHT THEME (DEFAULT)
========================================================== */

html[data-theme="light"]{

    --bg-color:#F8F8F6;
    --surface:#FFFFFF;

    --primary:#0B1220;
    --secondary:#1E293B;

    --text-primary:#111827;
    --text-secondary:#6B7280;

    --border:#E5E7EB;

    --accent:#C8A14A;

}

html[data-theme="light"] .light-logo{

    display:block;

}

html[data-theme="light"] .dark-logo{

    display:none;

}


/* ==========================================================
   DARK THEME
========================================================== */

html[data-theme="dark"]{

    --bg-color:#0B1120;
    --surface:#111827;

    --primary:#F8FAFC;
    --secondary:#CBD5E1;

    --text-primary:#F8FAFC;
    --text-secondary:#94A3B8;

    --border:#243244;

    --accent:#D4AF37;

}


/* ==========================================================
   LOGO SWITCH
========================================================== */

html[data-theme="dark"] .light-logo{

    display:none;

}

html[data-theme="dark"] .dark-logo{

    display:block;

}


/* ==========================================================
   BODY
========================================================== */

html[data-theme="dark"] body{

    background:var(--bg-color);

    color:var(--text-primary);

}


/* ==========================================================
   HEADER
========================================================== */

html[data-theme="dark"] .header.scrolled{

    background:rgba(11,17,32,.85);

    border-bottom:1px solid rgba(255,255,255,.06);

}


/* ==========================================================
   CARDS
========================================================== */

html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .point,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .expertise-card,
html[data-theme="dark"] .insight-card,
html[data-theme="dark"] .theme-btn{

    background:var(--surface);

    border-color:var(--border);

}


/* ==========================================================
   TEXT
========================================================== */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4{

    color:var(--text-primary);

}

html[data-theme="dark"] p{

    color:var(--text-secondary);

}

html[data-theme="dark"] .nav-menu a{

    color:var(--text-primary);

}


/* ==========================================================
   HERO
========================================================== */

html[data-theme="dark"] .hero{

    background:var(--bg-color);

}

html[data-theme="dark"] .hero::after{

    opacity:.06;

}


/* ==========================================================
   ABOUT
========================================================== */

html[data-theme="dark"] .about-image{

    background:#0F172A;

}


/* ==========================================================
   BUTTONS
========================================================== */

html[data-theme="dark"] .primary-btn{

    background:var(--accent);

    color:#111827;

}

html[data-theme="dark"] .primary-btn:hover{

    background:#ffffff;

}

html[data-theme="dark"] .secondary-btn{

    background:transparent;

    color:var(--text-primary);

    border-color:var(--border);

}


/* ==========================================================
   FOOTER
========================================================== */

html[data-theme="dark"] .footer{

    background:#020617;

}

html[data-theme="dark"] .footer-brand p,
html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-bottom{

    color:#94A3B8;

}

html[data-theme="dark"] .footer-links h4{

    color:#ffffff;

}


/* ==========================================================
   BACK TO TOP
========================================================== */

html[data-theme="dark"] .back-to-top{

    background:var(--accent);

    color:#111827;

}

html[data-theme="dark"] .back-to-top:hover{

    background:#ffffff;

}


/* ==========================================================
   SELECTION
========================================================== */

html[data-theme="dark"] ::selection{

    background:var(--accent);

    color:#111827;

}


/* ==========================================================
   TRANSITIONS
========================================================== */

body,
.header,
.hero,
.metric-card,
.point,
.timeline-card,
.expertise-card,
.insight-card,
.primary-btn,
.secondary-btn,
.footer{

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease;

}

/* ==========================================================
   DARK HERO
========================================================== */

html[data-theme="dark"] .hero-grid-pattern{
    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );
}

html[data-theme="dark"] .hero-portrait-glow{
    background:radial-gradient(
        circle,
        rgba(212,175,55,.25) 0%,
        rgba(212,175,55,.10) 42%,
        transparent 72%
    );
}

html[data-theme="dark"] .hero-portrait::before{
    border-color:rgba(212,175,55,.25);
}

html[data-theme="dark"] .experience-card{
    background:rgba(17,24,39,.90);
    border-color:rgba(212,175,55,.30);
}

/* ==========================================================
   HERO V2 — DARK THEME
========================================================== */

html[data-theme="dark"] .hero-v2{
    background:#080E1C;
}

html[data-theme="dark"] .hero-v2-glow{
    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.22) 0%,
            rgba(212,175,55,.10) 32%,
            rgba(212,175,55,.035) 52%,
            transparent 72%
        );
}

html[data-theme="dark"] .hero-v2-dots{
    background-image:
        radial-gradient(
            rgba(212,175,55,.65) 1.5px,
            transparent 1.5px
        );
}

html[data-theme="dark"] .hero-v2-secondary{
    background:rgba(15,23,42,.70);
    border-color:#263247;
    color:#F8FAFC;
}

html[data-theme="dark"] .hero-v2-highlights span{
    background:rgba(15,23,42,.72);
    border-color:#263247;
    color:#F8FAFC;
}

html[data-theme="dark"] .hero-v2-ring{
    border-color:rgba(212,175,55,.32);
}

html[data-theme="dark"] .hero-v2-glow-back{
    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.25),
            rgba(212,175,55,.08) 45%,
            transparent 72%
        );
}

html[data-theme="dark"] .hero-v2-experience{
    background:rgba(17,24,39,.90);
    border-color:rgba(212,175,55,.20);

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);
}

html[data-theme="dark"] .hero-v2-experience-text{
    color:#F8FAFC;
}

html[data-theme="dark"] .hero-v2-experience-label{
    color:#94A3B8;
}

/* ==========================================================
   HERO V2 — PORTRAIT FINAL SCALE
========================================================== */

.hero-v2-visual{
    min-height:650px;
}

.hero-v2-portrait-wrap{
    height:650px;
}

.hero-v2-portrait{
    width:650px;
    height:690px;
    right:-55px;
    bottom:-5px;
}

.hero-v2-ring,
.hero-v2-glow-back{
    width:510px;
    height:510px;
    right:35px;
    bottom:30px;
}

.hero-v2-experience{
    right:-20px;
    bottom:85px;
}


/* Desktop — keep portrait dominant */

@media (min-width:1201px){

    .hero-v2-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(560px,.95fr);

        gap:0;
    }

    .hero-v2-portrait{
        width:690px;
        height:720px;
        right:-85px;
    }

    .hero-v2-visual{
        min-height:680px;
    }

    .hero-v2-portrait-wrap{
        height:680px;
    }

}


/* Tablet */

@media (max-width:1200px){

    .hero-v2-visual{
        min-height:590px;
    }

    .hero-v2-portrait-wrap{
        height:590px;
    }

    .hero-v2-portrait{
        width:570px;
        height:610px;
        right:-40px;
    }

}


/* Mobile */

@media (max-width:992px){

    .hero-v2-visual{
        min-height:560px;
    }

    .hero-v2-portrait-wrap{
        height:560px;
    }

    .hero-v2-portrait{
        width:570px;
        height:580px;
        right:50%;
        transform:translateX(50%);
    }

    .hero-v2-experience{
        right:5%;
        bottom:55px;
    }

}


@media (max-width:576px){

    .hero-v2-visual{
        min-height:450px;
    }

    .hero-v2-portrait-wrap{
        height:450px;
    }

    .hero-v2-portrait{
        width:450px;
        height:460px;
        right:50%;
    }

    .hero-v2-ring,
    .hero-v2-glow-back{
        width:330px;
        height:330px;
    }

}

/* ==========================================================
   END OF THEME.CSS
========================================================== */