:root,
html[data-hfdz-theme="aurora"] {
    --hfdz-ambient: #4F9DFF;
    --hfdz-narrative: #8B5CFF;
    --hfdz-action: #4DE1C1;
    --hfdz-title: #C9DDFF;
    --hfdz-ambient-rgb: 79 157 255;
    --hfdz-narrative-rgb: 139 92 255;
    --hfdz-action-rgb: 77 225 193;
}

html[data-hfdz-theme="sakura"] { --hfdz-ambient: #FF86B7; --hfdz-narrative: #C86CFF; --hfdz-action: #FFB08B; --hfdz-title: #FFD1E3; --hfdz-ambient-rgb: 255 134 183; --hfdz-narrative-rgb: 200 108 255; --hfdz-action-rgb: 255 176 139; }
html[data-hfdz-theme="lavender"] { --hfdz-ambient: #8798FF; --hfdz-narrative: #B06CFF; --hfdz-action: #73E4D4; --hfdz-title: #D7DCFF; --hfdz-ambient-rgb: 135 152 255; --hfdz-narrative-rgb: 176 108 255; --hfdz-action-rgb: 115 228 212; }
html[data-hfdz-theme="sunset"] { --hfdz-ambient: #FF8A65; --hfdz-narrative: #E85D9E; --hfdz-action: #FFD166; --hfdz-title: #FFE0C8; --hfdz-ambient-rgb: 255 138 101; --hfdz-narrative-rgb: 232 93 158; --hfdz-action-rgb: 255 209 102; }

:root {
    --glow-blue: var(--hfdz-ambient);
    --glow-purple: var(--hfdz-narrative);
    --glow-cyan: var(--hfdz-action);
    --hfdz-theme-duration: 240ms;
}

body {
    background-color: #0F1117;
    background-image: radial-gradient(circle at 24% 18%, rgb(var(--hfdz-ambient-rgb) / 0.22), transparent 34%), radial-gradient(circle at 76% 76%, rgb(var(--hfdz-narrative-rgb) / 0.18), transparent 36%), radial-gradient(circle at 52% 48%, rgb(var(--hfdz-action-rgb) / 0.12), transparent 42%);
    transition: background-color var(--hfdz-theme-duration) ease, background-image var(--hfdz-theme-duration) ease;
}

.orb,
.avatar,
.skill-bar-fill,
.timeline-dot,
.timeline-item.active .timeline-dot,
.project-card::before,
.project-card span,
.project-link,
.timeline-year,
.skill-level,
.eyebrow,
.code {
    transition: background-color var(--hfdz-theme-duration) ease, background-image var(--hfdz-theme-duration) ease, border-color var(--hfdz-theme-duration) ease, box-shadow var(--hfdz-theme-duration) ease, color var(--hfdz-theme-duration) ease, opacity var(--hfdz-theme-duration) ease;
}

.project-card::before { background: linear-gradient(135deg, rgb(var(--hfdz-ambient-rgb) / .56), rgb(var(--hfdz-narrative-rgb) / .48) 52%, rgb(var(--hfdz-action-rgb) / .34)); }
.avatar { background: linear-gradient(45deg, var(--hfdz-action), var(--hfdz-ambient)); }
.skill-bar-fill { background: linear-gradient(90deg, var(--hfdz-ambient), var(--hfdz-action)); }
.timeline-item.active .timeline-dot { background: var(--hfdz-narrative); border-color: var(--hfdz-narrative); box-shadow: 0 0 15px var(--hfdz-narrative); }
.timeline-year { color: var(--hfdz-ambient); }
.skill-level, .project-card span, .project-link, .code { color: var(--hfdz-action); }
.eyebrow { color: var(--hfdz-action); }
.brand, .hero-title { color: var(--hfdz-title); text-shadow: 0 0 24px rgb(var(--hfdz-ambient-rgb) / .14); transition: color var(--hfdz-theme-duration) ease, text-shadow var(--hfdz-theme-duration) ease; }

.site-nav { overflow: visible; }
.nav-brand-area { display: inline-flex; min-width: 0; align-items: center; }
.hfdz-theme-utility { position: fixed; top: 1rem; right: 1rem; z-index: 20; }
.site-nav .hfdz-language-control { margin-left: auto; }
.site-nav .hfdz-theme-utility { position: relative; top: auto; right: auto; z-index: 1; margin-left: .45rem; }
.nav-contact-shortcut { display: none; }
.nav-links a.is-current, .nav-contact-shortcut.is-current { color: var(--text-main, #fff); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.hfdz-theme-trigger,
.hfdz-language-trigger,
.hfdz-theme-option {
    font: inherit;
    color: var(--text-main, #fff);
    border: 1px solid var(--glass-border, rgba(255,255,255,.12));
    background: rgba(255,255,255,.06);
    cursor: pointer;
}
.hfdz-theme-trigger {
    min-height: 44px;
    padding: .55rem .8rem;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    border-radius: 999px;
    white-space: nowrap;
    font-size: .84rem;
}
.hfdz-language-control { position: relative; z-index: 220; }
.hfdz-language-trigger { min-height: 44px; padding: .55rem .72rem; display: inline-flex; align-items: center; gap: .42rem; border: 1px solid var(--glass-border, rgba(255,255,255,.12)); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-main, #fff); cursor: pointer; font: inherit; font-size: .84rem; }
.hfdz-language-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hfdz-language-menu { position:absolute; z-index:221; top:calc(100% + .55rem); right:0; display:grid; min-width:160px; padding:.35rem; border:1px solid var(--glass-border, rgba(255,255,255,.12)); border-radius:14px; background:rgba(20,23,32,.96); box-shadow:0 18px 48px rgba(0,0,0,.42); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity 180ms ease,transform 180ms ease,visibility 180ms step-end; }
.hfdz-language-control:hover .hfdz-language-menu, .hfdz-language-control:focus-within .hfdz-language-menu, .hfdz-language-control.is-open .hfdz-language-menu { opacity:1; visibility:visible; transform:translateY(0); transition:opacity 180ms ease,transform 180ms ease; }
.hfdz-language-menu button { min-height:42px; padding:.45rem .6rem; display:flex; align-items:center; justify-content:space-between; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text-main,#fff); cursor:pointer; font:inherit; text-align:left; }
.hfdz-language-menu button:hover, .hfdz-language-menu button.is-selected { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
.hfdz-language-menu b { visibility:hidden; font-size:1rem; }
.hfdz-language-menu .is-selected b { visibility:visible; }
.hfdz-language-trigger:focus-visible, .hfdz-language-menu button:focus-visible { outline: 2px solid var(--hfdz-action); outline-offset: 2px; }
.hfdz-language-floating { position: fixed; top: 1rem; right: 7.25rem; z-index: 21; }
.hfdz-theme-current { color: var(--text-sub, rgba(255,255,255,.64)); }
.hfdz-theme-menu {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    display: grid;
    width: min(236px, calc(100vw - 2rem));
    padding: .4rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,.12));
    border-radius: 16px;
    background: rgba(20, 23, 32, .84);
    box-shadow: 0 18px 48px rgba(0,0,0,.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms step-end;
}
.site-nav .hfdz-theme-menu { left: auto; right: 0; }
.hfdz-theme-utility.is-open .hfdz-theme-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 180ms ease, transform 180ms ease; }
.hfdz-theme-option { min-height: 44px; width: 100%; padding: .55rem .65rem; display: grid; grid-template-columns: 1fr auto 1rem; align-items: center; gap: .55rem; border-color: transparent; border-radius: 11px; text-align: left; }
.hfdz-theme-option:hover, .hfdz-theme-option.is-selected { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.hfdz-theme-option.is-selected .hfdz-theme-name { font-weight: 600; }
.hfdz-theme-swatches { display: inline-flex; gap: .2rem; }
.hfdz-theme-swatches i { width: .52rem; height: .52rem; border-radius: 50%; background: var(--theme-swatch); }
.hfdz-theme-check { visibility: hidden; color: var(--text-main, #fff); }
.hfdz-theme-option.is-selected .hfdz-theme-check { visibility: visible; }
.hfdz-theme-trigger:focus-visible, .hfdz-theme-option:focus-visible { outline: 2px solid var(--hfdz-action); outline-offset: 2px; }

@media (max-width: 768px) {
    .site-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "brand language theme contact" "links links links links"; align-items: center; gap: .55rem .4rem; }
    .site-nav .nav-brand-area { grid-area: brand; }
    .site-nav .nav-links { grid-area: links; width: 100%; padding-bottom: .1rem; }
    .site-nav .hfdz-language-control { grid-area: language; margin-left: 0; }
    .site-nav .hfdz-theme-utility { grid-area: theme; position: relative; top: auto; right: auto; margin-left: 0; }
    .site-nav .hfdz-theme-trigger { padding-inline: .65rem; }
    .site-nav .hfdz-theme-current { display: none; }
    .site-nav .hfdz-theme-menu, .site-nav .hfdz-language-menu { right: 0; left: auto; }
    .site-nav .hfdz-language-menu { min-width: 152px; }
    .site-nav .nav-contact-shortcut { grid-area: contact; min-height: 44px; padding: .55rem .65rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--glass-border, rgba(255,255,255,.12)); border-radius: 999px; color: var(--text-sub, rgba(255,255,255,.64)); text-decoration: none; font-size: .84rem; white-space: nowrap; }
    .site-nav .nav-links a[href="#contact"] { display: none; }
    .site-nav .nav-links a.is-current, .site-nav .nav-contact-shortcut.is-current { border-color: rgba(255,255,255,.2); }
    .hfdz-theme-utility { top: .75rem; right: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    body, .orb, .avatar, .skill-bar-fill, .timeline-dot, .timeline-item.active .timeline-dot, .project-card::before, .project-card span, .project-link, .timeline-year, .skill-level, .eyebrow, .code, .hfdz-theme-menu, .hfdz-language-menu { transition: none; }
}
