:root {
    --hero-gradient: linear-gradient(135deg, #e8f0ff 0%, #f8f9ff 45%, #ffffff 100%);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.35);
    --section-tint: rgba(13, 110, 253, 0.04);
    --body-bg: #f6f8fc;
    --text-muted-custom: #6c757d;
}

[data-bs-theme="dark"] {
    --hero-gradient: linear-gradient(135deg, #0b1220 0%, #121a2b 50%, #0f172a 100%);
    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-border: rgba(148, 163, 184, 0.15);
    --section-tint: rgba(13, 110, 253, 0.08);
    --body-bg: #0b1220;
    --text-muted-custom: #94a3b8;
}

html {
    scroll-behavior: smooth;
}

body.portfolio-body {
    background: var(--body-bg);
    color: var(--bs-body-color);
}

.navbar-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
}

.hero-section {
    background: var(--hero-gradient);
    padding-top: 4.5rem;
}

.profile-frame {
    max-width: 320px;
}

.section-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.section-tint {
    background: var(--section-tint);
}

.skill-card,
.project-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.skill-card:hover,
.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.12) !important;
}

[data-bs-theme="dark"] .skill-card:hover,
[data-bs-theme="dark"] .project-card:hover {
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45) !important;
}

.project-thumb {
    height: 180px;
    object-fit: cover;
    background: var(--bs-secondary-bg);
}

.site-footer {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.letter-space {
    letter-spacing: 0.12em;
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Admin area */
.admin-wrap {
    min-height: 100vh;
    background: var(--body-bg);
}