/* Theme Variables */
.theme-dark {
    /* Colors */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #e5e5e5;
    --text-muted: #a0a0a0;
    --border-color: #333333;
    --accent-color: #00ffff;
    --accent-secondary: #ff00ff;
    --accent-rgb: 0, 255, 255;
    --accent-hover: #00cccc;
    --success-color: #00ff88;
    --warning-color: #ffaa00;
    --error-color: #ff4444;
    
    /* Header Background */
    --header-bg: rgba(10, 10, 10, 0.9);
    
    /* Scrollbar */
    --scrollbar-track: #1a1a1a;
    --scrollbar-thumb: #00ffff;
    --scrollbar-thumb-hover: #ff00ff;
}

.theme-light {
    /* Colors */
    --bg-primary: #faf8f5;
    --bg-secondary: #f5f2ed;
    --bg-tertiary: #ede8e0;
    --text-primary: #2d2a26;
    --text-secondary: #4a453e;
    --text-muted: #8b7e73;
    --border-color: #d4c8b8;
    --accent-color: #d2691e;
    --accent-secondary: #cd853f;
    --accent-rgb: 210, 105, 30;
    --accent-hover: #b8571a;
    --success-color: #228b22;
    --warning-color: #ff8c00;
    --error-color: #dc143c;
    
    /* Header Background */
    --header-bg: rgba(250, 248, 245, 0.9);
    
    /* Scrollbar */
    --scrollbar-track: #f5f2ed;
    --scrollbar-thumb: #d2691e;
    --scrollbar-thumb-hover: #cd853f;
}

/* Base Theme Styles */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

html {
    background-color: var(--bg-primary) !important;
}

/* Main content is transparent to allow body background effects to show through */
.main-content {
    background-color: transparent;
}

/* Override any canvas elements that might have wrong colors */
canvas {
    background: transparent !important;
}

/* Header Theming */
.site-header {
    background: var(--header-bg);
    border-bottom-color: var(--border-color);
}

.name-element {
    color: var(--text-primary);
}

.arabic-name {
    color: var(--text-secondary);
}

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

.nav-link:hover {
    color: var(--accent-color);
}

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

.nav-link.active::after {
    background: var(--accent-color);
}

.theme-toggle {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.theme-toggle:hover {
    color: var(--accent-color);
    background: var(--bg-tertiary);
}

/* Hero Section Theming */
.greeting-line,
.greeting-code,
.greeting-arabic,
.hero-name,
.name-english,
.name-arabic,
.degree-line,
.degree-text {
    color: var(--text-primary) !important;
}

.code-comment {
    color: var(--text-muted) !important;
}

.name-arabic-circle {
    border-color: var(--accent-color);
}

.cta-button {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: transparent;
}

.cta-button:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/* Section Theming */
.section-title {
    color: var(--accent-color) !important;
}

.section-title::before {
    color: var(--accent-color);
}

/* About Section Theming */
.about-text {
    color: var(--text-secondary);
}

.download-cv-btn {
    background: transparent;
    color: var(--text-muted);
}

/* Education Section Theming */
.education-item {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.university-name {
    color: var(--text-primary);
}

.education-location {
    color: var(--text-muted);
}

.degree-title {
    color: var(--text-secondary);
}

.graduation-date {
    color: var(--text-muted);
}

.education-description {
    color: var(--text-secondary);
}

.cert-tag {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Timeline Theming */
.timeline::before {
    background: var(--border-color);
}

.timeline-content {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.timeline-marker {
    background: var(--bg-primary);
    border-color: var(--accent-color);
}

.experience-category {
    color: var(--accent-color);
}

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

.job-company {
    color: var(--text-secondary);
}

.job-period {
    color: var(--text-muted);
}

.job-description {
    color: var(--text-secondary);
}

.tech-tag {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Skills Section Theming */
.skills-subtitle {
    color: var(--text-primary);
}

.skill-category {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

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

.skill-tag {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.skill-tag:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

.soft-skill {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Projects Section Theming */
.project-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.project-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 20px rgba(var(--accent-color), 0.1);
}

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

.project-link {
    color: var(--text-muted);
    background: var(--bg-tertiary);
}

.project-link:hover {
    color: var(--accent-color);
    background: var(--bg-primary);
}

.project-description {
    color: var(--text-secondary);
}

/* Footer Theming */
.site-footer {
    background: var(--bg-secondary);
    border-top-color: var(--border-color);
}

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

.footer-cta {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: transparent;
}

.footer-cta:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.footer-bottom {
    border-top-color: var(--border-color);
    color: var(--text-muted);
}

.footer-link {
    color: var(--text-muted);
}

.footer-link:hover {
    color: var(--accent-color);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Dark Theme Specific Effects */
html.theme-dark .section-title {
    color: var(--accent-color) !important;
    text-shadow: 0 0 10px var(--accent-color);
}

.theme-dark .name-arabic-circle {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.theme-dark .nav-link:hover {
    text-shadow: 0 0 8px var(--accent-color);
}

.theme-dark .skill-tag:hover {
    box-shadow: 0 0 10px var(--accent-color);
}

/* Light Theme Specific Effects */
html.theme-light .section-title {
    text-shadow: none !important;
    color: var(--accent-color) !important;
}

.theme-light .name-arabic-circle {
    box-shadow: 0 4px 15px rgba(210, 105, 30, 0.2);
}

.theme-light .project-card {
    box-shadow: var(--shadow-sm);
}

.theme-light .project-card:hover {
    box-shadow: var(--shadow-md);
}

.theme-light .education-item,
.theme-light .skill-category,
.theme-light .timeline-content {
    box-shadow: var(--shadow-sm);
}

/* Theme transition animations */
* {
    transition: background-color var(--transition-normal), 
                color var(--transition-normal), 
                border-color var(--transition-normal),
                box-shadow var(--transition-normal);
}