:root {
    --primary: #2c3e50;
    --primary-light: #3d566e;
    --primary-dark: #1a2a3a;
    --secondary: #5d7a9a;
    --accent: #b8956a;
    --accent-light: #d4bca0;
    --gold: #a8845e;

    --bg-body: #eef0f3;
    --bg-card: #f7f8fa;
    --bg-soft: #e2e6ed;
    --bg-glass: rgba(247, 248, 250, 0.78);
    --bg-terminal: #1e293b;

    --text-primary: #1e2a3a;
    --text-secondary: #3d4f63;
    --text-muted: #6a7b8e;
    --text-terminal: #e2e8f0;

    --border-color: rgba(44, 62, 80, 0.10);
    --shadow-sm: 0 2px 14px rgba(44, 62, 80, 0.06);
    --shadow-md: 0 6px 28px rgba(44, 62, 80, 0.09);
    --shadow-lg: 0 12px 44px rgba(44, 62, 80, 0.12);
    --shadow-xl: 0 20px 64px rgba(44, 62, 80, 0.16);

    --radius: 22px;
    --radius-sm: 12px;
    --radius-full: 9999px;
    --transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.8;
    direction: rtl;
    min-height: 100vh;
    overflow-x: hidden;
    font-weight: var(--font-regular);
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-soft);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--primary), var(--accent));
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-extrabold);
    line-height: 1.3;
}
.section-title {
    font-weight: var(--font-black);
}
.hero-name {
    font-weight: var(--font-black);
}
.nav-link {
    font-weight: var(--font-semibold);
}
.btn-download, .btn-submit {
    font-weight: var(--font-semibold);
}

/* Skill Levels */
.level-expert { width: 92%; }
.level-advanced { width: 80%; }
.level-intermediate { width: 65%; }

/* DARK MODE */
body.dark-mode {
    --bg-body: #0b111e;
    --bg-card: #141c2b;
    --bg-soft: #1d283f;
    --bg-glass: rgba(20, 28, 43, 0.92);
    --bg-terminal: #070b12;

    --text-primary: #eef3fa;
    --text-secondary: #c8d8ec;
    --text-muted: #8fa4c0;
    --text-terminal: #e2e8f0;

    --border-color: rgba(255, 255, 255, 0.07);
    --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 28px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 44px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 64px rgba(0, 0, 0, 0.8);
}

body.dark-mode ::-webkit-scrollbar-track { background: var(--bg-soft); }
body.dark-mode ::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent), var(--primary-light)); }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--accent-light); }

body.dark-mode .main-nav {
    background: rgba(11, 17, 30, 0.92);
    border-bottom-color: var(--border-color);
}
body.dark-mode .main-nav.scrolled { background: rgba(11, 17, 30, 0.97); }
body.dark-mode .nav-link { color: var(--text-secondary); }
body.dark-mode .nav-link i { color: var(--accent); }
body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
    background: var(--bg-glass);
    color: var(--text-primary);
}
body.dark-mode .nav-link:hover i,
body.dark-mode .nav-link.active i { color: var(--accent-light); }
body.dark-mode .brand-symbol {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--accent), #d4bca0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.dark-mode .theme-toggle {
    background: var(--bg-soft);
    color: var(--text-primary);
    border-color: var(--border-color);
}
body.dark-mode .theme-toggle:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
body.dark-mode .hero-name { color: var(--text-primary); }
body.dark-mode .hero-subtitle { color: var(--text-secondary); }
body.dark-mode .hero-desc { color: var(--text-secondary); }
body.dark-mode .hero-desc strong { color: var(--text-primary); }
body.dark-mode .stat-item {
    background: var(--bg-card);
    border-color: var(--border-color);
}
body.dark-mode .stat-number { color: var(--accent); }
body.dark-mode .stat-label { color: var(--text-muted); }
body.dark-mode .btn-download {
    background: var(--accent);
    color: #fff;
}
body.dark-mode .btn-download:hover { background: var(--primary-light); }
body.dark-mode .about-text p { color: var(--text-secondary); }
body.dark-mode .about-text strong { color: var(--text-primary); }
body.dark-mode .highlight-badge {
    background: var(--bg-soft);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
body.dark-mode .highlight-badge i { color: var(--accent); }
body.dark-mode .skill-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}
body.dark-mode .skill-card:hover { border-color: var(--accent); }
body.dark-mode .skill-card-header i {
    color: var(--accent);
    background: rgba(184, 148, 108, 0.12);
}
body.dark-mode .skill-card-header h3 { color: var(--text-primary); }
body.dark-mode .skill-name { color: var(--text-secondary); }
body.dark-mode .skill-name span { color: var(--accent); }
body.dark-mode .skill-bar { background: var(--bg-soft); }
body.dark-mode .skill-fill { background: linear-gradient(90deg, var(--accent), var(--primary-light)); }
body.dark-mode .project-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}
body.dark-mode .project-card:hover { border-color: var(--accent); }
body.dark-mode .project-body h3 { color: var(--text-primary); }
body.dark-mode .project-body p { color: var(--text-secondary); }
body.dark-mode .project-tag {
    background: var(--bg-soft);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
body.dark-mode .project-tag:hover {
    background: var(--accent);
    color: #fff;
}
body.dark-mode .project-thumb .overlay { background: rgba(0, 0, 0, 0.7); }
body.dark-mode .overlay a { background: var(--accent); }
body.dark-mode .overlay a:hover { background: var(--primary-light); }
body.dark-mode .project-github-link {
    background: var(--bg-soft);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
body.dark-mode .project-github-link:hover {
    background: var(--accent);
    color: #fff;
}
body.dark-mode .timeline-content {
    background: var(--bg-card);
    border-color: var(--border-color);
}
body.dark-mode .timeline-content h3 { color: var(--text-primary); }
body.dark-mode .timeline-content p { color: var(--text-muted); }
body.dark-mode .timeline-item:hover .timeline-content { border-color: var(--accent); }
body.dark-mode .timeline-icon {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--accent);
}
body.dark-mode .timeline-item:hover .timeline-icon {
    background: var(--accent);
    color: #fff;
}
body.dark-mode .contact-item {
    background: var(--bg-soft);
    border-color: var(--border-color);
}
body.dark-mode .contact-item:hover { border-color: var(--accent); }
body.dark-mode .contact-item i {
    color: var(--accent);
    background: var(--bg-card);
}
body.dark-mode .contact-item a { color: var(--text-primary); }
body.dark-mode .contact-item a:hover { color: var(--accent); }
body.dark-mode .contact-message p { color: var(--text-secondary); }
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
    background: var(--bg-body);
    color: var(--text-primary);
    border-color: var(--border-color);
}
body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(184, 148, 108, 0.15);
}
body.dark-mode .btn-submit {
    background: var(--accent);
    color: #fff;
}
body.dark-mode .btn-submit:hover { background: var(--primary-light); }
body.dark-mode .footer {
    background: var(--bg-card);
    border-top-color: var(--border-color);
}
body.dark-mode .footer-text { color: var(--text-muted); }
body.dark-mode .social-link {
    background: var(--bg-soft);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
body.dark-mode .social-link:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
body.dark-mode .back-to-top {
    background: var(--accent);
    color: #fff;
}
body.dark-mode .back-to-top:hover { background: var(--primary-light); }
body.dark-mode .mobile-menu-toggle span { background: var(--text-primary); }
body.dark-mode .nav-links {
    background: rgba(11, 17, 30, 0.98);
    border-left-color: var(--border-color);
}
body.dark-mode .shape { opacity: 0.07; }
body.dark-mode .particle { opacity: 0.09; }
body.dark-mode .section-title { color: var(--text-primary); }
body.dark-mode .section-title::after {
    background: linear-gradient(90deg, var(--accent), var(--primary-light));
}

@media (max-width: 480px) {
    .level-expert { width: 90%; }
    .level-advanced { width: 78%; }
    .level-intermediate { width: 62%; }
}