@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&display=swap');

:root {
    --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
    --accent-ink: #2ecc71;
    --sec-alt: #0d1f35;
    --footer-bg: #050b14;
    --hero-overlay: rgba(11, 25, 44, 0.82);
    --hero-desc: #e2e8f0;
    --cta-bg: linear-gradient(120deg, #1b4965 0%, #0b192c 55%, #0b192c 100%);
    --hairline: rgba(148, 163, 184, 0.15);
    --soft-fill: rgba(255, 255, 255, 0.05);
    --soft-line: rgba(255, 255, 255, 0.1);
    --outline-btn: rgba(255, 255, 255, 0.2);
    --label-muted: #94a3b8;
}

:root[data-theme="light"] {
    --dark-bg: #f4f8fc;
    --card-bg: #ffffff;
    --text-light: #0b192c;
    --text-muted: #4a5b6e;

    --accent-ink: #178246;
    --sec-alt: #eaf1f8;
    --footer-bg: #e8f0f7;
    --hero-overlay: linear-gradient(180deg, rgba(244, 248, 252, 0.92) 0%, rgba(234, 241, 248, 0.86) 100%);
    --hero-desc: #33475b;
    --cta-bg: linear-gradient(120deg, #d5e6f2 0%, #f4f8fc 55%, #f4f8fc 100%);
    --hairline: rgba(11, 25, 44, 0.12);
    --soft-fill: rgba(11, 25, 44, 0.05);
    --soft-line: rgba(11, 25, 44, 0.1);
    --outline-btn: rgba(11, 25, 44, 0.25);
    --label-muted: #5b6b7d;
}

:root[data-theme="light"] #site-navbar,
:root[data-theme="light"] .footer-section {
    --dark-bg: #0b192c;
    --card-bg: #112238;
    --text-light: #ffffff;
    --text-muted: #ffffff;
    --accent-ink: #2ecc71;
    --footer-bg: #050b14;
    --hairline: rgba(148, 163, 184, 0.15);
    --soft-fill: rgba(255, 255, 255, 0.05);
    --soft-line: rgba(255, 255, 255, 0.1);
    --outline-btn: rgba(255, 255, 255, 0.2);
    --label-muted: #94a3b8;
}

body,
section {
    transition: background-color 0.4s ease, color 0.4s ease;
}

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

#site-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 72px;
    background: var(--dark-bg);
}

.custom-navbar {
    border-bottom-color: var(--hairline);
}

.theme-toggle {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--outline-btn);
    background: var(--soft-fill);
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    color: var(--accent-ink);
    border-color: var(--accent-ink);
    background: rgba(46, 204, 113, 0.12);
    transform: translateY(-2px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.theme-toggle i {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.05rem;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.theme-toggle .icon-moon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.theme-toggle .icon-sun {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.4);
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.hero-overlay {
    background: var(--hero-overlay);
}

.hero-desc {
    color: var(--hero-desc);
}

:root[data-theme="light"] .hero-title {
    text-shadow: none;
}

:root[data-theme="light"] .custom-hero-btn:hover {
    box-shadow: 0 10px 20px rgba(11, 25, 44, 0.18);
}

.section-badge,
.cta-badge,
.service-link,
.project-tag,
.project-cta,
.preview-tag {
    color: var(--accent-ink);
}

.icon-box {
    background-color: var(--soft-fill);
    border-color: var(--soft-line);
}

:root[data-theme="light"] .feature-card:hover .icon-box {
    color: #0b192c;
}

:root[data-theme="light"] .preview-tag {
    background: rgba(255, 255, 255, 0.94);
}

.project-stack span {
    background: var(--soft-fill);
    border-color: var(--soft-line);
}

.project-visual .frame {
    border-color: var(--soft-line);
}

:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .preview-card,
:root[data-theme="light"] .project-row {
    border-color: var(--soft-line);
    box-shadow: 0 10px 30px rgba(11, 25, 44, 0.06);
}

:root[data-theme="light"] .feature-card:hover,
:root[data-theme="light"] .service-card:hover,
:root[data-theme="light"] .preview-card:hover,
:root[data-theme="light"] .project-row:hover {
    border-color: rgba(46, 204, 113, 0.5);
    box-shadow: 0 20px 40px rgba(11, 25, 44, 0.12);
}

:root[data-theme="light"] .services-section {
    background: #f0f5fa;
}

:root[data-theme="light"] .service-card .btn-outline-light {
    --bs-btn-color: #0b192c;
    --bs-btn-border-color: rgba(11, 25, 44, 0.3);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0b192c;
    --bs-btn-hover-border-color: #0b192c;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0b192c;
    --bs-btn-active-border-color: #0b192c;
}

:root[data-theme="light"] .filter-btn:hover,
:root[data-theme="light"] .filter-btn.active {
    color: #ffffff;
}

.cta-section {
    background: var(--cta-bg);
}

.cta-btn-secondary {
    border-color: var(--outline-btn);
}

.cta-btn-secondary:hover {
    border-color: var(--accent-ink);
    color: var(--accent-ink);
}

.footer-section {
    background-color: var(--footer-bg);
    border-top-color: var(--hairline);
}

.footer-divider {
    border-color: var(--hairline);
}

.social-icon {
    background-color: var(--soft-fill);
    border-color: var(--soft-line);
}

.social-icon:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #0b192c;
}

.footer-links a:hover {
    color: var(--accent-ink);
}

.footer-contact .contact-label {
    color: var(--label-muted);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle i,
    body,
    section {
        transition: none;
    }
}



:root[data-theme="light"] .starter-section,
:root[data-theme="dark"] .starter-section {
    background-color: var(--dark-bg);
    color: var(--text-light);
}

.starter-section .card {
    background-color: var(--card-bg);
    color: var(--text-light);
    border-color: var(--soft-line);
}


.starter-section .text-light {
    color: var(--text-muted) !important;
}