/* ==========================================
   Theme Stylesheet
   Developer Portfolio Website
   Author : Shaik Mahaboob Basha
   Description : Light & Dark Theme Styles
========================================== */


/* ==========================================
   Theme Structure

   1. Light Theme (Default)
   2. Dark Theme Variables
   3. Dark Theme Component Styles
   4. Theme Toggle Animation
   5. Theme Transition

========================================== */

/* ==========================================
   Light Theme (Default)

   Uses variables defined in :root
   inside style.css

========================================== */

/* ==========================================
   Dark Theme Variables
========================================== */

body.dark-theme{

    --background-color:#0f172a;

    --section-background:#111827;

    --card-background:#1e293b;

    --primary-color:#3b82f6;

    --secondary-color:#60a5fa;

    --heading-color:#f8fafc;

    --text-color:#cbd5e1;

    --border-color:#334155;

    --shadow:0 8px 25px rgba(0,0,0,.35);

}

/* ==========================================
   Dark Theme Component Styles
========================================== */

body.dark-theme header{

    background:rgba(15,23,42,.95);

    border-bottom:1px solid var(--border-color);

}

body.dark-theme nav{

    background:transparent;

}

body.dark-theme .project-card,
body.dark-theme .education-card,
body.dark-theme .skill-card,
body.dark-theme .certificate-card,
body.dark-theme .profile-card,
body.dark-theme .resume-preview,
body.dark-theme .resume-content,
body.dark-theme .contact-info{

    border:1px solid var(--border-color);

}

body.dark-theme .project-card:hover,
body.dark-theme .education-card:hover,
body.dark-theme .skill-card:hover,
body.dark-theme .certificate-card:hover{

    box-shadow:var(--shadow);

}

body.dark-theme footer{

    border-top:1px solid var(--border-color);

}

/* ==========================================
   Theme Toggle Animation
========================================== */

.theme-toggle{

    transition:transform .3s ease;

}

.theme-toggle:hover{

    transform:rotate(180deg);

}

.theme-toggle i{

    transition:

        color .3s ease,

        transform .3s ease;

}

body.dark-theme .theme-toggle i{

    transform:rotate(180deg);

}

/* ==========================================
   Theme Transition
========================================== */

body,
header,
section,
footer,
nav,
button,
a,
i,
svg,
.project-card,
.education-card,
.skill-card,
.certificate-card,
.profile-card,
.resume-content,
.resume-preview,
.contact-info{

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;

}