:root {
    --brand-primary: #5260e8;
    --brand-primary-hover: #414ecc;
    --brand-accent: #ff7f77;
    --brand-ink: #192343;
    --brand-muted: #5c6680;
    --brand-soft: #f0f1ff;
    --blue: var(--brand-primary);
    --blue-soft: var(--brand-soft);
    --text: var(--brand-ink);
    --bg: #f7f8fc;
}
.vynli-logo { display: block; width: 141px; height: 44px; max-width: 100%; object-fit: contain; flex-shrink: 0; }
.brand, .landing-logo, .footer-brand { align-items: center; }
.landing-logo .vynli-logo { width: 154px; height: 48px; }
.landing-logo .landing-logo__tagline { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: .015em; color: var(--brand-muted); }
.footer-brand .vynli-logo { width: 100px; height: 32px; }
.brand:focus-visible, .landing-logo:focus-visible, .footer-brand:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 5px; border-radius: 6px; }
.guest-intro h1 span, .guest-auth-intro h1 span, .guest-header-actions a { color: var(--brand-primary); }
.auth-submit, .guest-page .auth-submit { background: var(--brand-primary); }
.auth-submit:hover, .guest-page .auth-submit:hover { background: var(--brand-primary-hover); }
.guest-register-button { background: var(--brand-soft); color: var(--brand-primary-hover); border: 1px solid #daddff; }
.guest-register-button:hover { background: #e5e8ff; }
.guest-header-actions .guest-header-join { background: var(--brand-soft); }
@media (max-width: 720px) {
    .topbar .brand .vynli-logo { width: 112px; height: 35px; }
    .landing-logo .vynli-logo { width: 128px; height: 40px; }
}
@media (max-width: 380px) {
    .topbar .brand .vynli-logo { width: 100px; height: 32px; }
    .auth-header .landing-logo .vynli-logo { width: 112px; height: 35px; }
}