:root {
    --primary-grad: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    --bg-color: #f8fafc;
    --text-color: #1e293b;
    --card-bg: rgba(255, 255, 255, 0.9);
    --nav-bg: #ffffff;
    --nav-text: #1e293b;
}

[data-theme="dark"] {
    --bg-color: #0f172a;
    --text-color: #f1f5f9;
    --card-bg: rgba(30, 41, 59, 0.7);
    --nav-bg: #1e293b;
    --nav-text: #f1f5f9;
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    font-family: 'Inter', sans-serif;
    transition: 0.4s ease;
    margin: 0;
}

.hero-gradient {
    background: var(--primary-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.navbar {
    background-color: var(--nav-bg) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
}

.nav-link { color: var(--nav-text) !important; font-weight: 500; }

/* Home Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

/* Rounded Square Skill Cards */
.skill-card {
    background: var(--card-bg);
    border-radius: 24px;
    padding: 30px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.skill-card:hover { transform: translateY(-10px); }

.progress { height: 8px; width: 100%; border-radius: 10px; background: rgba(0,0,0,0.1); }
.progress-bar { background: var(--primary-grad); width: 0; transition: width 1.5s ease; }

.theme-btn { background: none; border: none; font-size: 1.4rem; color: var(--nav-text); cursor: pointer; }

/* Social Icons */
.social-icons a { font-size: 2rem; margin: 0 15px; color: var(--text-color); transition: 0.3s; }
.social-icons a:hover { color: #10b981; }

/* Projects Page Image Container */
.project-img-container {
    background-color: white;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.project-img-container img { max-height: 100%; max-width: 100%; object-fit: contain; }