:root {
    --brand-logo-size-nav: 36px;
    --brand-logo-size-footer: 34px;
    --brand-logo-size-auth: 36px;
    --brand-gap: 0.625rem;
    --brand-wordmark-size: 1.375rem;
    --brand-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--brand-gap);
    text-decoration: none;
    color: var(--text-dark, var(--text-primary, #0f172a));
    font-weight: 700;
    font-size: var(--brand-wordmark-size);
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand:hover {
    color: var(--text-dark, var(--text-primary, #0f172a));
}

.brand:focus-visible {
    outline: none;
    border-radius: 12px;
    box-shadow: var(--brand-focus-ring);
}

.brand__logo {
    width: var(--brand-logo-size-nav);
    height: var(--brand-logo-size-nav);
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

.brand__wordmark {
    display: inline-block;
    transform: translateY(1px);
}

.brand--footer .brand__logo {
    width: var(--brand-logo-size-footer);
    height: var(--brand-logo-size-footer);
}

.brand--auth .brand__logo {
    width: var(--brand-logo-size-auth);
    height: var(--brand-logo-size-auth);
}

@media (max-width: 768px) {
    .brand {
        font-size: clamp(1.08rem, 4.5vw, var(--brand-wordmark-size));
        gap: clamp(0.45rem, 2vw, var(--brand-gap));
    }

    .brand__logo {
        width: clamp(30px, 8.5vw, var(--brand-logo-size-nav));
        height: clamp(30px, 8.5vw, var(--brand-logo-size-nav));
    }

    .brand--footer .brand__logo {
        width: clamp(28px, 7.5vw, var(--brand-logo-size-footer));
        height: clamp(28px, 7.5vw, var(--brand-logo-size-footer));
    }

    .brand--auth .brand__logo {
        width: clamp(30px, 8.5vw, var(--brand-logo-size-auth));
        height: clamp(30px, 8.5vw, var(--brand-logo-size-auth));
    }
}