:root {
    /* Light Theme Variables */
    --light-bg: #F8F9FA;
    --light-text: #212529;
    --light-primary: #0D6EFD;
    --light-primary-rgb: 13, 110, 253;
    --light-secondary: #6C757D;
    --light-accent: #20C997;
    --light-card-bg: #FFFFFF;
    --light-border: #DEE2E6;
    
    /* Light Theme Variables */
    --light-h1-color: #002b71; /* Deep blue, slightly darker than primary */
    --light-h2-color: #0D6EFD; /* Primary blue */
    --light-h3-color: #3F88F4; /* Lighter blue */
    --light-h4-color: #5C636A; /* Dark gray with slight blue undertone */


    /* Dark Theme Variables */
    --dark-bg: #212529;
    --dark-text: #F8F9FA;
    --dark-primary: #0D99FF;
    --dark-primary-rgb: 13, 153, 255;
    --dark-secondary: #ADB5BD;
    --dark-accent: #2FDCB6;
    --dark-card-bg: #343A40;
    --dark-border: #495057;
    
    /* Dark Theme Variables */
    --dark-h1-color: #58B5FF; /* Bright blue, stands out in dark mode */
    --dark-h2-color: #0D99FF; /* Primary blue in dark mode */
    --dark-h3-color: #68B8FF; /* Lighter blue */
    --dark-h4-color: #ADB5BD; /* Light gray with slight blue undertone */

    /* Icon brand colours */
    --icon-html:   #e44d26;  /* HTML orange  */
    --icon-css:    #2965f1;  /* CSS blue     */
    --icon-js:     #f7df1e;  /* JS yellow    */
    --icon-overall:#20c997;  /* Teal/green   */
    
    /* Overall‑progress colours */
    --overall-red:        #dc3545; /* 0 – 5   */
    --overall-orange:     #fd7e14; /* 6 – 11  */
    --overall-green:      #20c997; /* 12 – 17 */
    --overall-dark-green: #0f5132; /* 18      */


    /* Transition for smooth theme switching */
    --theme-transition: all 0.3s ease;
}

body {
    transition: var(--theme-transition);
}

body.light-theme {
    --bg-color: var(--light-bg);
    --text-color: var(--light-text);
    --primary-color: var(--light-primary);
    --primary-color-rgb: var(--light-primary-rgb);
    --secondary-color: var(--light-secondary);
    --accent-color: var(--light-accent);
    --card-bg: var(--light-card-bg);
    --border-color: var(--light-border);
    
    --h1-color: var(--light-h1-color);
    --h2-color: var(--light-h2-color);
    --h3-color: var(--light-h3-color);
    --h4-color: var(--light-h4-color);

    background-color: var(--bg-color);
    color: var(--text-color);
}

body.dark-theme {
    --bg-color: var(--dark-bg);
    --text-color: var(--dark-text);
    --primary-color: var(--dark-primary);
    --primary-color-rgb: var(--dark-primary-rgb);
    --secondary-color: var(--dark-secondary);
    --accent-color: var(--dark-accent);
    --card-bg: var(--dark-card-bg);
    --border-color: var(--dark-border);
    
    --h1-color: var(--dark-h1-color);
    --h2-color: var(--dark-h2-color);
    --h3-color: var(--dark-h3-color);
    --h4-color: var(--dark-h4-color);

    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Heading Colours */
h1 {
    color: var(--h1-color);
}

h2 {
    color: var(--h2-color);
}

h3 {
    color: var(--h3-color);
}

h4 {
    color: var(--h4-color);
}

/* Theme Switch Styles */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.theme-switch {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--theme-transition);
}

/* On Hover effect */
.theme-switch:hover {
    background-color: rgba(var(--primary-color-rgb), 0.3); 
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.8); /* subtle glow effect */
}

/* Inverted background coloring for theme buttons */
body.light-theme .theme-switch {
    background-color: var(--dark-card-bg);
    color: var(--dark-text);
}

/* Ensure correct background coloring for dark theme */
body.dark-theme .theme-switch {
    background-color: var(--light-card-bg);
    color: var(--light-text);
}

.theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    width: 24px;
    height: 24px;
    position: relative;
}

.theme-icon .bi-sun-fill {
    color: #FFB100; /* Bright yellow color for sun */
}

.theme-icon .bi-moon-fill {
    color: #E8E9EA; /* Very light grey, almost white for moon */
}

/* Morphing animation */
.theme-icon.morphing {
    transform: scale(0.1) rotate(180deg);
    opacity: 0;
}

.theme-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Theme-specific Component Styling */
.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    transition: var(--theme-transition);
}

.navbar {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.navbar-brand, .nav-link {
    color: var(--text-color);
}

.offcanvas {
    background-color: var(--card-bg);
    color: var(--text-color);
}

.offcanvas-title {
    color: var(--primary-color);
}

body.light-theme .offcanvas-header .btn-close {
    filter: none;    /*style for light theme */
}

body.dark-theme .offcanvas-header .btn-close {
    filter: invert(1);  /*style for dark theme */
}


.nav-link.active {
    color: var(--primary-color);
}

.progress-bar {
    background-color: var(--primary-color);
}

.footer {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-top: 1px solid var(--border-color);
}

.alert-success {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

/* Form elements */
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.nav-tabs .nav-link {
    color: var(--text-color);
}

.nav-tabs .nav-link.active {
    background-color: var(--card-bg);
    color: var(--primary-color);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

/* Typography adjustments for dark mode */
.dark-theme p, 
.dark-theme .card-body, 
.dark-theme .lead,
.dark-theme .form-check-label,
.dark-theme .card-text {
    color: var(--text-color);
}

/* Blockquote styling */
blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
    font-style: italic;
}

.blockquote-footer {
    color: var(--secondary-color);
}