/* ============================================================
   Logo — KidsTools
   Варианты:
     .logo — плейн-текст "Kids tools" шрифтом Fredoka в брендовом цвете.
             Надёжнее всего: использует Google-шрифт уже загруженный
             в страницу (через tokens.css @import Fredoka).
     .logo--sm / .logo--lg — размерные модификаторы.
   Для мест, где нужен именно image-файл — используйте
     <img src="/img/logo.svg" alt="Kids tools" width="170" height="40">
   ============================================================ */

.logo {
    display: inline-flex;
    align-items: center;
    /* Перебиваем легаси-правило .main-page .logo { width:56px; height:56px } из style.css */
    width: auto !important;
    height: auto !important;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);      /* Fredoka 700 ≈ Blue curve Bold визуально */
    font-size: var(--font-size-4xl);            /* 40px — замер макета (node 70:7780) */
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.logo:hover,
.logo:focus-visible {
    color: var(--color-primary-hover);
    outline: none;
}

.logo--sm {
    font-size: var(--font-size-3xl);            /* 32px */
}

.logo--lg {
    font-size: 56px;
}

/* Для футера, где фон тёмный */
.logo--on-dark {
    color: var(--color-primary-300);            /* светлее чтобы читалось на #1a1a1a */
}