/* Theme colours. Bootstrap switches [data-bs-theme] between dark and light. */
[data-bs-theme="dark"] {
    --bs-body-bg: #0e1116;
    --bs-body-color: #d7dde5;
    --accent: #4da3ff;
    --line: #1f2630;
    --nav-bg: rgba(14, 17, 22, .92);
}

[data-bs-theme="light"] {
    --bs-body-bg: #f6f8fb;
    --bs-body-color: #1d2430;
    --accent: #1b6fc9;
    --line: #dde3ec;
    --nav-bg: rgba(246, 248, 251, .92);
}

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

.site-nav {
    background: var(--nav-bg);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}
.site-nav .nav-link.active { color: var(--accent); }

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

.eyebrow {
    color: var(--accent);
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portrait {
    max-width: 280px;
    border: 3px solid var(--line);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent);
}

.btn-primary {
    --bs-btn-bg: #2f7fd6;
    --bs-btn-border-color: #2f7fd6;
    --bs-btn-hover-bg: #4da3ff;
    --bs-btn-hover-border-color: #4da3ff;
}

/* Theme toggle button: show the icon for the theme you would switch to. */
.theme-toggle { line-height: 1; }
[data-bs-theme="dark"] .icon-moon,
[data-bs-theme="light"] .icon-sun { display: none; }

/* Project cards */
.project-card { background: var(--bs-body-bg); border-color: var(--line); transition: border-color .15s, transform .15s; }
.project-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tech-tag {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--bs-body-color);
    font-weight: 400;
}

.video-frame { border-radius: .5rem; overflow: hidden; border: 1px solid var(--line); background: #000; }