:root {
    --theme-bg: #0B1220;
    --theme-bg-deep: #080F1A;
    --theme-surface: #111A2B;
    --theme-border: #24324A;
    --theme-text: #D5DFEA;
    --theme-muted: #9FB0C7;
    --theme-primary: #0F4C81;
    --theme-primary-hover: #0C3D68;
    --theme-accent: #00B8D9;
    --theme-shadow: rgba(0, 0, 0, 0.35);

    /* Typography scale */
    --fs-h1:    2.5rem;
    --fs-h2:    2rem;
    --fs-h3:    1.3rem;
    --fs-body:  1rem;
    --fs-small: 0.875rem;
    --fs-nav:   0.95rem;
    --fs-btn:   0.95rem;

    /* Logo tokens */
    --logo-size: 40px;

    /* Header/Banner tokens */
    --header-height: auto;
    --header-z-index: 1000;
    --header-bg: rgba(10, 14, 20, 0.92);
    --header-blur: 14px;
    --header-padding: 1rem 0;
    --nav-max-width: 1200px;
    --nav-padding: 0 2rem;
}

body {
    background: linear-gradient(180deg, var(--theme-bg), var(--theme-bg-deep));
    color: var(--theme-text);
}

header {
    background: var(--header-bg) !important;
    backdrop-filter: blur(var(--header-blur));
    -webkit-backdrop-filter: blur(var(--header-blur));
    border-bottom: 1px solid var(--theme-border);
    position: sticky;
    top: 0;
    z-index: var(--header-z-index);
    padding: var(--header-padding);
}

/* Canonical logo sizing */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: calc(var(--header-z-index) + 1);
}

.logo img {
    height: var(--logo-size);
    width: var(--logo-size);
    border-radius: 50%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.logo:hover img {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.nav-links a {
    color: var(--theme-text);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active {
    color: var(--theme-accent);
}

.nav-links a::after {
    background: var(--theme-accent);
}

.lang-btn {
    border: 1px solid var(--theme-border);
    color: var(--theme-text);
}

.lang-btn.active {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: #051017;
}

.cta-button,
.btn-primary,
.maria-banner-btn {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-hover));
    color: #fff;
}

.cta-button:hover,
.btn-primary:hover,
.maria-banner-btn:hover {
    filter: brightness(1.08);
}

.service-card,
.project-card,
.skill-category,
.blog-post,
.sidebar-widget,
.card,
.pricing-card,
.code-card,
.api-key-card,
.config-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: 0 6px 24px var(--theme-shadow);
}

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