/**
 * Logo Component Styles
 */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    color: var(--gray-800);
    font-weight: 600;
    transition: color var(--transition-base);
}

a.logo:hover {
    color: var(--accent-primary);
    text-decoration: none;
}

.logo__icon {
    font-size: 1.25em;
    line-height: 1;
}

.logo__wordmark {
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────
   SIZES
   ───────────────────────────────────────────────────────── */

/* Small - for compact headers */
.logo--sm {
    font-size: 0.875rem;
    gap: 0.25rem;
}

.logo--sm .logo__icon {
    font-size: 1.1em;
}

/* Medium (default) - for app nav */
.logo--md {
    font-size: 1rem;
}

/* Large - for public pages */
.logo--lg {
    font-size: 1.125rem;
    gap: 0.5rem;
}

.logo--lg .logo__icon {
    font-size: 1.35em;
}