/* ══════════════════════════════════════════════
   Chillafish Design Tokens
   Бренд: Chillafish (Антверпен, Бельгия) · детский транспорт, «Play longer»
   Тема: Clean Play — белый холст, цвет приходит от товара
   Источник: Chillafish_Brand_Bible_Public V2.2 + Chillafish color palette.pdf + logo_color.svg
   ══════════════════════════════════════════════ */

/* ── Шрифты ──────────────────────────────────────
   Alegreya Sans — основной (текст И заголовки). Версия Google Fonts: КИРИЛЛИЦА ЕСТЬ.
   ⚠️ В брендбуке лежит latin-only сборка — для РУ она не годится, здесь заменена.
   Life Savers / Luckiest Guy — только латиница, только для латинских имён моделей
   (BMXIE, SCOTTI, FLEXXI). Для русского текста НЕ использовать.
   ────────────────────────────────────────────── */
@font-face { font-family:'Alegreya Sans'; font-weight:400; font-display:swap;
  src:url('assets/fonts/alegreyasans-regular-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Alegreya Sans'; font-weight:400; font-display:swap;
  src:url('assets/fonts/alegreyasans-regular-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF; }
@font-face { font-family:'Alegreya Sans'; font-weight:500; font-display:swap;
  src:url('assets/fonts/alegreyasans-medium-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Alegreya Sans'; font-weight:500; font-display:swap;
  src:url('assets/fonts/alegreyasans-medium-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF; }
@font-face { font-family:'Alegreya Sans'; font-weight:700; font-display:swap;
  src:url('assets/fonts/alegreyasans-bold-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Alegreya Sans'; font-weight:700; font-display:swap;
  src:url('assets/fonts/alegreyasans-bold-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF; }
@font-face { font-family:'Alegreya Sans'; font-weight:800; font-display:swap;
  src:url('assets/fonts/alegreyasans-extrabold-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Alegreya Sans'; font-weight:800; font-display:swap;
  src:url('assets/fonts/alegreyasans-extrabold-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF; }
@font-face { font-family:'Alegreya Sans'; font-weight:900; font-display:swap;
  src:url('assets/fonts/alegreyasans-black-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Alegreya Sans'; font-weight:900; font-display:swap;
  src:url('assets/fonts/alegreyasans-black-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF; }
@font-face { font-family:'Life Savers'; font-weight:400; font-display:swap; src:url('assets/fonts/lifesavers-regular.woff2') format('woff2'); }
@font-face { font-family:'Life Savers'; font-weight:700; font-display:swap; src:url('assets/fonts/lifesavers-bold.woff2') format('woff2'); }
@font-face { font-family:'Luckiest Guy'; font-weight:400; font-display:swap; src:url('assets/fonts/luckiestguy.woff2') format('woff2'); }

:root {
  /* ── Логотип (точные из logo_color.svg) ─────────
     ⚠️ Правило брендбука: логотип только на БЕЛОМ, ничем не перекрывать. */
  --cf-logo-navy:   #33526F;  /* словомарка */
  --cf-logo-blue:   #00A8DF;
  --cf-logo-green:  #97C93C;
  --cf-logo-orange: #EF4F23;

  /* ── База ─────────────────────────────────────── */
  --cf-white:    #FFFFFF;   /* фон бренда по умолчанию */
  --cf-paper:    #F7F8F8;   /* подложка секций */
  --cf-ink:      #33526F;   /* основной текст = navy логотипа, НЕ чёрный */
  --cf-ink-soft: #5C6E7D;   /* вторичный текст — затемнён до WCAG AA 4.5+ на белом и paper */
  --cf-line:     #E3E8EC;   /* границы */

  /* ── Цвета ассортимента РФ ──────────────────────
     Реальные цвета наших 14 SKU из брендбуковых палитр.
     Каждая модель на сайте ведёт свой цвет — это и есть система. */
  --cf-silver:      #909295;  /* TRENDI · Charlie белый */
  --cf-black:       #3D3935;  /* FUNKI  · Charlie чёрный */
  --cf-forest:      #28724F;  /* BIO    · Charlie зелёный */
  --cf-flamingo:    #FF8674;  /* TRENDI · Charlie светло-коралловый */
  --cf-mint:        #6BBBAE;  /* TRENDI · BMXie 2, SkatieSkootie */
  --cf-blue:        #00A9E0;  /* HAPI   · BMXie 2 голубой */
  --cf-anthracite:  #5B6770;  /* FUNKI  · BMXie Vrooom */
  --cf-breeze:      #B7CEC4;  /* BIO    · Scotti, Flexxi бирюзовые */
  --cf-cameo:       #DBA9B7;  /* SOFTI  · Scotti, Flexxi розовые */
  --cf-coral:       #ED2939;  /* TRENDI · SkatieSkootie коралловый */
  --cf-pistachio:   #D4EC8E;  /* FUNKI  · SkatieSkootie фисташковый */

  /* ── Функциональные ─────────────────────────────
     Ярко и «по-детски» — но строго из палитры HAPI/TRENDI, ничего выдуманного. */
  --cf-accent:   #D33F17;  /* CTA: «Купить». Затемнён от логотипного #EF4F23 до AA 4.5 с белым текстом */
  --cf-accent-2: var(--cf-logo-blue);    /* ссылки, вторичные действия */
  --cf-success:  #64A70B;  /* HAPI Green — «в наличии» */
  --cf-warn:     #FFD100;  /* HAPI Yellow */
  --cf-danger:   #E4002B;  /* HAPI Red — скидка, «мало осталось» */

  /* ── Возрастные метки (навигация каталога — главная ось) ── */
  --cf-age-1:  var(--cf-blue);       /* 1,5–4 года · Charlie */
  --cf-age-2:  var(--cf-mint);       /* 2–5 лет   · BMXie */
  --cf-age-3:  var(--cf-flamingo);   /* 3+        · Scotti, SkatieSkootie */
  --cf-age-5:  var(--cf-logo-green); /* 5+        · Flexxi */

  /* ══ ТИПОГРАФИКА ═══════════════════════════════
     Одна гарнитура, контраст держим весом и размером (правило бренда: no frills).

     Метрики Alegreya Sans (сняты из файла, em = 1000):
       x-height 458 (Black 472) · cap 641 · asc 900 · desc −300 · lineGap 0
     Что из этого следует:
     • x-height/em = 0,46 — НИЗКАЯ (у Inter 0,73, у Helvetica 0,52). При одном и том же
       кегле текст выглядит мельче → базовый размер поднят до 17px, не 16px.
     • Кириллица шире латиницы: ш 709 / щ 737 против n 516. Строка набирается плотнее
       по цвету и длиннее по ширине → интерлиньяж основного текста 1,6 и мера 62ch, не 75ch.
     • lineGap = 0 → шрифт сам не добавляет отбивку, всё решает line-height.
     ────────────────────────────────────────────── */
  --cf-font:        'Alegreya Sans', system-ui, sans-serif;
  --cf-font-latin:  'Life Savers', 'Alegreya Sans', serif;       /* только латиница */
  --cf-font-shout:  'Luckiest Guy', 'Alegreya Sans', sans-serif; /* только КАПС латиницей */

  /* ── Кегли ──────────────────────────────────────
     Шаг ≈ 1,25 (major third) на мобильном, до 1,33 на десктопе — крупный контраст,
     потому что заголовки набираем 900-м весом и им нужен воздух по размеру. */
  --cf-text-hero:  clamp(2.75rem, 1.1rem + 7.6vw, 7rem);      /* 44 → 112px */
  --cf-text-h1:    clamp(2rem,  1.05rem + 4.2vw, 3.75rem);    /* 32 → 60px  */
  --cf-text-h2:    clamp(1.5rem, .95rem + 2.4vw, 2.5rem);     /* 24 → 40px  */
  --cf-text-h3:    clamp(1.25rem, 1.05rem + .9vw, 1.625rem);  /* 20 → 26px  */
  --cf-text-lead:  clamp(1.1875rem, 1.05rem + .6vw, 1.4375rem); /* 19 → 23px — лид-абзац */
  --cf-text-base:  clamp(1.0625rem, 1.02rem + .28vw, 1.1875rem); /* 17 → 19px */
  --cf-text-sm:    .9375rem;   /* 15px — подписи, мета */
  --cf-text-xs:    .8125rem;   /* 13px — минимум для основного UI */
  --cf-text-caps:  .75rem;     /* 12px — только для КАПС с трекингом */

  /* ── Интерлиньяж ────────────────────────────────
     Правило: чем крупнее кегль, тем плотнее строки. */
  --cf-lh-hero:  .92;   /* 112px: строки почти касаются — так и надо у 900-го веса */
  --cf-lh-h1:    1.02;
  --cf-lh-h2:    1.12;
  --cf-lh-h3:    1.25;
  --cf-lh-lead:  1.45;
  --cf-lh-body:  1.6;   /* кириллица + низкая x-height → не меньше */
  --cf-lh-ui:    1.35;  /* кнопки, чипы, таблицы — компактнее текста */
  --cf-lh-tight: .95;   /* совместимость со старой разметкой */
  --cf-lh-head:  1.1;

  /* ── Межбуквенное ───────────────────────────────
     Оптическая компенсация: крупный кегль зрительно «расползается» → минус,
     мелкий «слипается» → плюс. Значения в em, поэтому масштабируются сами.
     ⚠️ Для кириллицы отрицательный трекинг опаснее, чем для латиницы: у ш/щ/м/ж
     и так тесные внутрибуквенные просветы. Поэтому −0,035em — предел, не отправная точка. */
  --cf-track-hero:  -.035em;   /* 64px+ */
  --cf-track-h1:    -.025em;   /* 40–60px */
  --cf-track-h2:    -.018em;   /* 28–40px */
  --cf-track-h3:    -.008em;   /* 20–26px */
  --cf-track-lead:  -.004em;
  --cf-track-body:   0;        /* 17–19px — родной кернинг шрифта, не трогаем */
  --cf-track-sm:     .004em;   /* 15px */
  --cf-track-xs:     .01em;    /* 13px — раскрываем, иначе слипается */
  --cf-track-caps:   .12em;    /* КАПС 12px: без этого читается как аббревиатура */
  --cf-track-caps-lg:.06em;    /* КАПС крупнее 20px — трекинг убавляем */
  --cf-track-latin:  .01em;    /* Life Savers: cap 821 при x-height 436 — нужен воздух */
  --cf-track-shout:  .02em;    /* Luckiest Guy: набран очень плотно, всегда раскрывать */
  --cf-track-num:    .01em;    /* цифры в табличном наборе */

  /* ── Мера строки ────────────────────────────────
     Кириллица шире → целимся в 55–68 знаков, а не в латинские 65–75. */
  --cf-measure:       62ch;
  --cf-measure-lead:  46ch;
  --cf-measure-short: 34ch;   /* заголовки: не длиннее двух-трёх слов в строке */

  /* ── Ритм и форма ───────────────────────────────
     Скругления крупные — от округлого логотипа и обтекаемых рам беговелов. */
  --cf-space-section: clamp(3.5rem, 2rem + 6vw, 8rem);
  --cf-space-block:   clamp(1.5rem, 1rem + 2vw, 3rem);
  --cf-gap:           clamp(1rem, .75rem + 1vw, 1.75rem);
  --cf-container:     min(100% - 2.5rem, 1280px);

  --cf-r-sm:   8px;
  --cf-r-md:   16px;
  --cf-r-lg:   28px;
  --cf-r-xl:   40px;
  --cf-r-pill: 999px;

  /* Тени: правило брендбука — [цвет + 10% чёрного], без серых «дефолтных» теней */
  --cf-shadow-sm: 0 2px 8px rgba(51,82,111,.08);
  --cf-shadow-md: 0 8px 28px rgba(51,82,111,.12);
  --cf-shadow-lg: 0 24px 60px rgba(51,82,111,.16);

  /* ── Движение ───────────────────────────────────
     Езда, качение — движение всегда «вперёд» по горизонтали, не пружины. */
  --cf-dur-fast:   150ms;
  --cf-dur-normal: 280ms;
  --cf-dur-slow:   600ms;
  --cf-ease:       cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --cf-dur-fast:0ms; --cf-dur-normal:0ms; --cf-dur-slow:0ms; }
}

/* ── Типографические примитивы ─────────────────── */
.cf-container { width: var(--cf-container); margin-inline: auto; }

.cf-body {
  font: 400 var(--cf-text-base)/var(--cf-lh-body) var(--cf-font);
  letter-spacing: var(--cf-track-body);
  color: var(--cf-ink);
  /* переносы: русские слова длинные, без этого рваный правый край */
  hyphens: auto; -webkit-hyphens: auto;
  text-wrap: pretty;          /* не оставляет висячее слово в конце абзаца */
}
.cf-body > p { max-width: var(--cf-measure); }

.cf-hero {
  font: 900 var(--cf-text-hero)/var(--cf-lh-hero) var(--cf-font);
  letter-spacing: var(--cf-track-hero);
  max-width: var(--cf-measure-short);
  text-wrap: balance; hyphens: manual;  /* заголовки не переносим по слогам никогда */
  color: var(--cf-ink);
}
.cf-h1 { font: 900 var(--cf-text-h1)/var(--cf-lh-h1) var(--cf-font); letter-spacing: var(--cf-track-h1);
         max-width: var(--cf-measure-short); text-wrap: balance; hyphens: manual; color: var(--cf-ink); }
.cf-h2 { font: 800 var(--cf-text-h2)/var(--cf-lh-h2) var(--cf-font); letter-spacing: var(--cf-track-h2);
         text-wrap: balance; hyphens: manual; color: var(--cf-ink); }
.cf-h3 { font: 800 var(--cf-text-h3)/var(--cf-lh-h3) var(--cf-font); letter-spacing: var(--cf-track-h3);
         text-wrap: balance; hyphens: manual; color: var(--cf-ink); }
.cf-lead { font: 400 var(--cf-text-lead)/var(--cf-lh-lead) var(--cf-font);
           letter-spacing: var(--cf-track-lead); max-width: var(--cf-measure-lead); color: var(--cf-ink-soft); }
.cf-sm { font-size: var(--cf-text-sm); letter-spacing: var(--cf-track-sm); line-height: var(--cf-lh-ui); }
.cf-xs { font-size: var(--cf-text-xs); letter-spacing: var(--cf-track-xs); line-height: var(--cf-lh-ui); }

.cf-eyebrow {
  font: 700 var(--cf-text-caps)/1 var(--cf-font);
  letter-spacing: var(--cf-track-caps); text-transform: uppercase; color: var(--cf-ink-soft);
}
.cf-eyebrow--lg { font-size: var(--cf-text-h3); letter-spacing: var(--cf-track-caps-lg); }

/* Латиница: имена моделей. На кириллице НЕ применять — глифов нет. */
.cf-latin { font-family: var(--cf-font-latin); letter-spacing: var(--cf-track-latin); line-height: 1.15; }
.cf-shout { font-family: var(--cf-font-shout); letter-spacing: var(--cf-track-shout);
            text-transform: uppercase; line-height: 1.2; }

/* Цифры: цены, характеристики, таблицы — моноширинные, чтобы колонки не плясали.
   В Alegreya Sans есть tnum/lnum, включаем явно. */
.cf-num, .cf-price, table td, table th {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.cf-price { font: 800 var(--cf-text-h3)/1 var(--cf-font); letter-spacing: var(--cf-track-num); }
.cf-price sup { font-size: .55em; font-weight: 700; vertical-align: .5em; margin-left: .1em; }

/* Висячая пунктуация в цитатах и лидах */
.cf-hang { hanging-punctuation: first last; }

.cf-btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .8em 1.6em; border: 0; border-radius: var(--cf-r-pill);
  font: 700 var(--cf-text-base)/1 var(--cf-font); cursor: pointer;
  background: var(--cf-accent); color: var(--cf-white);
  transition: transform var(--cf-dur-fast) var(--cf-ease), box-shadow var(--cf-dur-fast) var(--cf-ease);
}
.cf-btn:hover  { transform: translateX(3px); box-shadow: var(--cf-shadow-md); }
.cf-btn:active { transform: translateX(1px) scale(.98); }
.cf-btn:focus-visible { outline: 3px solid var(--cf-accent-2); outline-offset: 3px; }
.cf-btn--ghost { background: transparent; color: var(--cf-ink); box-shadow: inset 0 0 0 2px var(--cf-line); }

/* Карточка товара: цвет модели задаётся через --cf-tone на элементе */
.cf-card {
  background: var(--cf-white); border-radius: var(--cf-r-lg); overflow: hidden;
  box-shadow: var(--cf-shadow-sm);
  transition: transform var(--cf-dur-normal) var(--cf-ease), box-shadow var(--cf-dur-normal) var(--cf-ease);
}
.cf-card:hover { transform: translateY(-4px); box-shadow: var(--cf-shadow-md); }
.cf-card__media { background: color-mix(in oklab, var(--cf-tone, var(--cf-breeze)) 18%, white); aspect-ratio: 4/3; }

.cf-chip {
  display: inline-block; padding: .35em .9em; border-radius: var(--cf-r-pill);
  font: 700 var(--cf-text-xs)/1.2 var(--cf-font); letter-spacing: .04em;
  background: color-mix(in oklab, var(--cf-tone, var(--cf-blue)) 16%, white);
  color: color-mix(in oklab, var(--cf-tone, var(--cf-blue)) 70%, var(--cf-ink));
}