/* ==========================================================================
   Chronos UI — общий слой «новых» разделов (/produkty/, /prognoz-na-den/, /tests/)
   --------------------------------------------------------------------------
   Подключается ДО CSS раздела (header.php). Префикс токенов --ch-*, классов .ch-*.

   ЧТО ЗДЕСЬ ЖИВЁТ. Шрифт PT Serif, токены (цвета, шкалы), примитивы, у которых
   уже есть два и больше потребителя. Примитив переезжает сюда, когда у него
   появляется второй раздел-потребитель; до этого он живёт в CSS своего раздела.
   Новый частный набор цветов в разделе не заводим: берём --ch-*, а свои токены
   раздела — только для его специфики (сетка, градиенты конкретного блока).

   ЕДИНИЦЫ. Только px и clamp(). Без rem/em: common.css уменьшает html до 14/12px
   на ноутбуках, и rem-размеры молча сжимаются.

   ШКАЛЫ.
   Отступы  --ch-sp-1..8: 4 8 12 16 24 32 48 64. Других значений отступов нет.
   Шрифт    --ch-fs-xs 12 · sm 14 · base 16 · md 17 · lg 20 · xl 22–26 · 2xl 26–34 · display 32–54.
   Радиусы  --ch-r-sm 12 (кнопки) · md 16 (блоки) · lg 20 (карточки) · xl 28 (баннеры) · pill.
   Ритм     --ch-section-gap: 48 (32 на <900) — отступ сверху у каждой секции, снизу 0.

   ТИПОГРАФИКА. PT Serif 400 — заголовки и .ch-prose, курсив <em> — один акцент
   на заголовок. Inter — всё остальное. Веса: 400 текст, 500 кнопки, 600 лейблы.

   КНОПКИ. .ch-btn--accent (оранжевая pill) только для перехода к ИИ-астрологу,
   одна на экран. --dark — действия продукта (начать, поделиться). --outline —
   рядом с dark. --chip — шаринг, повтор, вторичное. Max — текстовая ссылка.

   ВЫРАВНИВАНИЕ. Один контейнер на раздел, один левый край. Текст не центрируем.

   COLORS.CSS. Шаблонный colors.css грузится асинхронно и красит a:link /
   a:visited / a:hover (специфичность 0,1,1) и h1–h6 (#000). Цвет ссылочных
   компонентов задаём с двумя классами (0,2,0) или через a:link в контексте.

   НЕЛЬЗЯ. Значения вне шкал; hex в правилах компонентов (только в токенах);
   копировать @font-face в CSS раздела; text-align:center в новых разделах.
   ========================================================================== */

/* PT Serif, самохост. Диапазоны как у Google Fonts (есть U+0301 — ударения). */
@font-face {
    font-family: "PT Serif";
    src: url(/local/templates/furniture_gray/assets/fonts/PTSerif-Regular-cyrillic.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "PT Serif";
    src: url(/local/templates/furniture_gray/assets/fonts/PTSerif-Regular-latin.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "PT Serif";
    src: url(/local/templates/furniture_gray/assets/fonts/PTSerif-Italic-cyrillic.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "PT Serif";
    src: url(/local/templates/furniture_gray/assets/fonts/PTSerif-Italic-latin.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* цвета: эталон — витрина /produkty/ */
    --ch-ink: #2F2A38;
    --ch-muted: #6E6A77;
    --ch-line: #EAE7EF;
    --ch-dark: #312D3A;
    --ch-dark-hover: #211E28;
    --ch-violet: #8858d8;
    --ch-violet-soft: #EDE7FB;
    --ch-blue: #476eea;
    /* оранжевый — как у кнопки на главном слайде (.hero-ai__btn) */
    --ch-orange: #f07400;
    --ch-orange-hover: #ff8613;
    --ch-rose: #c24b6e;
    --ch-rose-soft: #FBEFF4;
    --ch-green: #7ABD5B;
    --ch-surface: #fff;
    --ch-paper: #FBFAF9;
    /* пастели карточек (.pr-report--*) */
    --ch-c-blue: #EFF2FB;
    --ch-c-purple: #F2EEFB;
    --ch-c-green: #EFF5EE;
    --ch-c-pink: #FBEFF4;
    --ch-c-cream: #FBF3E4;
    --ch-c-teal: #EEF5F5;

    --ch-serif: "PT Serif", Georgia, "Times New Roman", serif;
    --ch-sans: "Inter", Arial, sans-serif;

    --ch-sp-1: 4px;
    --ch-sp-2: 8px;
    --ch-sp-3: 12px;
    --ch-sp-4: 16px;
    --ch-sp-5: 24px;
    --ch-sp-6: 32px;
    --ch-sp-7: 48px;
    --ch-sp-8: 64px;
    --ch-section-gap: var(--ch-sp-7);

    --ch-fs-xs: 12px;
    --ch-fs-sm: 14px;
    --ch-fs-base: 16px;
    --ch-fs-md: 17px;
    --ch-fs-lg: 20px;
    --ch-fs-xl: clamp(22px, 2.6vw, 26px);
    --ch-fs-2xl: clamp(26px, 3vw, 34px);
    --ch-fs-display: clamp(32px, 5.6vw, 54px);
    --ch-lh-tight: 1.1;
    --ch-lh-snug: 1.25;
    --ch-lh-base: 1.55;
    --ch-lh-read: 1.62;
    --ch-ls-caps: .06em;
    --ch-measure: 640px;

    --ch-r-sm: 12px;
    --ch-r-md: 16px;
    --ch-r-lg: 20px;
    --ch-r-xl: 28px;
    --ch-r-pill: 999px;

    --ch-shadow-card: 0 14px 30px rgba(49, 45, 58, .12);
    --ch-shadow-pop: 0 24px 70px rgba(49, 45, 58, .25);
    --ch-shadow-orange: 0 12px 28px rgba(240, 116, 0, .28);
}
@media (max-width: 900px) {
    :root { --ch-section-gap: var(--ch-sp-6); }
}

/* ---------- кнопки ---------- */
.ch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ch-sp-2);
    min-height: 48px;
    padding: 0 var(--ch-sp-5);
    border: 0;
    border-radius: var(--ch-r-sm);
    font-family: var(--ch-sans);
    font-size: var(--ch-fs-base);
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, background-color .18s ease, box-shadow .18s ease, border-color .15s ease, color .15s ease;
}
.ch-btn:hover { transform: translateY(-2px); text-decoration: none; }
.ch-btn:focus-visible { outline: 3px solid var(--ch-orange); outline-offset: 2px; }
.ch-btn:disabled { opacity: .45; cursor: default; transform: none; }
.ch-btn--lg { min-height: 54px; padding: 0 var(--ch-sp-6); }
.ch-btn--block { width: 100%; }

.ch-btn.ch-btn--dark,
.ch-btn.ch-btn--dark:hover { background: var(--ch-dark); color: #fff; }
.ch-btn.ch-btn--dark:hover { background: var(--ch-dark-hover); }

.ch-btn.ch-btn--accent,
.ch-btn.ch-btn--accent:hover { background: var(--ch-orange); color: #fff; border-radius: var(--ch-r-pill); }
.ch-btn.ch-btn--accent.ch-btn--lg { font-size: var(--ch-fs-md); }
.ch-btn.ch-btn--accent:hover { background: var(--ch-orange-hover); box-shadow: var(--ch-shadow-orange); }

.ch-btn.ch-btn--outline,
.ch-btn.ch-btn--outline:hover { background: var(--ch-surface); color: var(--ch-ink); border: 1.5px solid var(--ch-line); border-radius: var(--ch-r-pill); }
.ch-btn.ch-btn--outline:hover { border-color: var(--ch-violet); }

.ch-btn.ch-btn--chip { min-height: 36px; padding: 0 var(--ch-sp-4); background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: var(--ch-r-pill); color: var(--ch-muted); font-size: var(--ch-fs-sm); }
.ch-btn.ch-btn--chip:hover { border-color: var(--ch-violet); color: var(--ch-ink); }

/* ---------- хлебные крошки (микроразметка — в JSON-LD) ---------- */
.ch-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ch-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ch-muted);
    font-size: var(--ch-fs-sm);
    line-height: 1.3;
}
.ch-crumbs__list li { display: inline-flex; align-items: center; gap: var(--ch-sp-2); }
.ch-crumbs__list li + li::before { content: "•"; }
.ch-crumbs a:link,
.ch-crumbs a:visited { color: var(--ch-ink); text-decoration: none; }
.ch-crumbs a:hover { color: var(--ch-ink); text-decoration: underline; }
.ch-crumbs a:focus-visible { outline: 3px solid var(--ch-violet); outline-offset: 3px; }

/* ---------- аккордеон на <details>, без JS ---------- */
.ch-accordion { border-top: 1px solid var(--ch-line); }
.ch-accordion:last-of-type { border-bottom: 1px solid var(--ch-line); }
.ch-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ch-sp-4);
    min-height: 44px;
    padding: var(--ch-sp-4) 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--ch-fs-md);
    font-weight: 600;
    line-height: var(--ch-lh-snug);
    transition: color .15s ease;
}
.ch-accordion__summary::-webkit-details-marker { display: none; }
.ch-accordion__summary::after {
    content: "";
    flex: 0 0 28px;
    height: 28px;
    border: 1px solid var(--ch-line);
    border-radius: 50%;
    color: var(--ch-muted);
    background:
        linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
    transition: transform .2s ease, border-color .15s ease, color .15s ease;
}
.ch-accordion[open] > .ch-accordion__summary::after { transform: rotate(45deg); border-color: var(--ch-violet); color: var(--ch-violet); }
.ch-accordion__summary:hover { color: var(--ch-violet); }
.ch-accordion__summary:focus-visible { outline: 3px solid var(--ch-violet); outline-offset: 2px; }
.ch-accordion__body { padding: 0 0 var(--ch-sp-5); max-width: var(--ch-measure); font-size: var(--ch-fs-base); line-height: var(--ch-lh-base); }

/* ---------- мелкие примитивы ---------- */
.ch-lift { transition: transform .14s ease, box-shadow .18s ease; }
.ch-lift:hover { transform: translateY(-4px); box-shadow: var(--ch-shadow-card); }

.ch-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--ch-sp-2);
    margin: 0 0 var(--ch-sp-3);
    color: var(--ch-violet);
    font-size: var(--ch-fs-xs);
    font-weight: 600;
    letter-spacing: var(--ch-ls-caps);
    text-transform: uppercase;
}
.ch-eyebrow--rule::before { content: ""; width: 26px; height: 1px; background: currentColor; }

.ch-prose { max-width: var(--ch-measure); font-family: var(--ch-serif); font-size: var(--ch-fs-lg); line-height: var(--ch-lh-read); }
.ch-prose p { margin: 0 0 var(--ch-sp-4); }
.ch-prose p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .ch-btn, .ch-lift, .ch-accordion__summary::after { transition: none; }
    .ch-btn:hover, .ch-lift:hover { transform: none; }
}