/*
=====================================================================
*   Dark Mode Theme Stylesheet
*   Defines CSS custom properties for light and dark themes
=====================================================================
*/

/* Default Light Theme */
:root {
    /* Background colors */
    --bg-primary: #fff;
    --bg-secondary: #2B2B2B;
    --bg-tertiary: #ebeeee;
    --bg-dark: #0f0f0f;
    --bg-nav: #333;
    --bg-card: #fafafa;
    --bg-form: #D3D9D9;
    --bg-form-focus: #3d4145;

    /* Text colors */
    --text-primary: #838C95;
    --text-heading: #313131;
    --text-light: #e0e0e0;
    --text-white: #fff;
    --text-dark: #333;
    --text-muted: #8B9798;
    --text-form: #647373;
    --text-form-focus: #B3B7BC;

    /* Accent colors */
    --accent-primary: #0D7377;
    --accent-hover: #11ABB0;
    --accent-orange: #F06000;
    --accent-mobile-btn: #CC5200;

    /* Border colors */
    --border-color: #E8E8E8;
    --border-card: #e0e0e0;
    --border-light: rgba(150, 150, 150, .1);

    /* Shadow colors */
    --shadow-sm: rgba(0, 0, 0, 0.05);
    --shadow-md: rgba(0, 0, 0, 0.08);

    /* Tech badge colors */
    --badge-bg: #f8f9fa;
    --badge-border: #11ABB0;
    --badge-text: #313131;
    --tech-tag-bg: #f8f9fa;
    --tech-tag-border: #dee2e6;
    --tech-tag-text: #495057;

    /* Skill bar colors */
    --skill-bar-bg: #ccc;
    --skill-bar-fill: #313131;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Background colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #0f0f0f;
    --bg-tertiary: #2a2a2a;
    --bg-dark: #0a0a0a;
    --bg-nav: #1f1f1f;
    --bg-card: #252525;
    --bg-form: #2a2a2a;
    --bg-form-focus: #3a3a3a;

    /* Text colors */
    --text-primary: #b8b8b8;
    --text-heading: #e8e8e8;
    --text-light: #d0d0d0;
    --text-white: #fff;
    --text-dark: #e8e8e8;
    --text-muted: #999;
    --text-form: #b8b8b8;
    --text-form-focus: #d0d0d0;

    /* Accent colors - slightly adjusted for dark mode */
    --accent-primary: #14a5aa;
    --accent-hover: #1bc5cb;
    --accent-orange: #ff7a2f;
    --accent-mobile-btn: #ff6b1a;

    /* Border colors */
    --border-color: #3a3a3a;
    --border-card: #3a3a3a;
    --border-light: rgba(255, 255, 255, .1);

    /* Shadow colors */
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.5);

    /* Tech badge colors */
    --badge-bg: #2a2a2a;
    --badge-border: #14a5aa;
    --badge-text: #e8e8e8;
    --tech-tag-bg: #2a2a2a;
    --tech-tag-border: #3a3a3a;
    --tech-tag-text: #b8b8b8;

    /* Skill bar colors */
    --skill-bar-bg: #3a3a3a;
    --skill-bar-fill: #14a5aa;
}

/* Theme Toggle Button Styles */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: var(--accent-primary);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-toggle:hover {
    background: var(--accent-hover);
    transform: scale(1.1);
}

.theme-toggle svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Smooth transitions for theme changes */
body,
header,
#about,
#resume,
#photos,
.work-entry,
.education-entry,
.certification-entry,
.tech-group-card,
.patent-entry,
.portfolio-entry,
.tech-item,
.photos-item .item-wrap,
.core-strength-badge,
.tech-tag,
input,
textarea,
select,
button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Mobile adjustments for theme toggle */
@media only screen and (max-width: 767px) {
    .theme-toggle {
        top: 10px;
        right: 80px;
        /* Position to the left of mobile menu button */
        width: 44px;
        height: 44px;
    }

    .theme-toggle svg {
        width: 20px;
        height: 20px;
    }
}