/*
 * iSKV Kinnisvara — дизайн-токены «Glassmorphic Breeze», v1.0 — стабильная утверждённая версия (2026-10-30)
 * Правила применения: FOUNDATION.md. Все стили компонентов ссылаются только на эти переменные.
 * Префикс --iskv- — чтобы не пересекаться с переменными Bootstrap, темы G5 и ERE.
 */

:root {
  /* ---------- 1. Палитра (сырые значения, в компонентах не использовать напрямую) ---------- */

  /* Бирюзовый — фирменный. 500 = #00A699 из референса */
  --iskv-teal-50:  #EAF7F6;
  --iskv-teal-100: #D9F2EF;
  --iskv-teal-200: #B3E5DF;
  --iskv-teal-300: #66CCC2;
  --iskv-teal-400: #26B5A8;
  --iskv-teal-500: #00A699;
  --iskv-teal-600: #00897E;
  --iskv-teal-700: #007F75; /* белый текст на нём — 4,9:1 */
  --iskv-teal-800: #00786E; /* текст на белом — 5,4:1 */
  --iskv-teal-900: #005A52;

  /* Золотистый — CTA. 500 = #F5A623 из референса */
  --iskv-gold-100: #FDEFD6;
  --iskv-gold-300: #F9C86F;
  --iskv-gold-400: #F7B547;
  --iskv-gold-500: #F5A623;
  --iskv-gold-600: #E0921A;
  --iskv-gold-800: #9A5B00; /* текст на белом — 5,4:1 */

  /* Графит и нейтральные */
  --iskv-ink-900: #1F2D3A;
  --iskv-ink-800: #2C3E50; /* основной текст — 11:1 */
  --iskv-ink-600: #5B6B79; /* вторичный текст — 5,5:1 на белом, 5,0:1 на светлом фоне */
  --iskv-ink-400: #8A99A6; /* только неактивное и декоративное, не для текста */
  --iskv-ink-200: #D5DEE4;
  --iskv-ink-100: #EEF2F5;
  --iskv-white:   #FFFFFF;

  /* Служебные */
  --iskv-red-600:   #C0392B;
  --iskv-red-100:   #FBE9E7;
  --iskv-green-700: #1E7B4A;
  --iskv-green-100: #E3F4EA;
  --iskv-amber-100: #FFF4DC;

  /* ---------- 2. Семантика (это используют компоненты) ---------- */

  --iskv-color-text:           var(--iskv-ink-800);
  --iskv-color-text-muted:     var(--iskv-ink-600);
  --iskv-color-text-inverse:   var(--iskv-white);
  --iskv-color-heading:        var(--iskv-ink-900);
  --iskv-color-link:           var(--iskv-teal-800);
  --iskv-color-link-hover:     var(--iskv-teal-900);

  --iskv-color-accent:         var(--iskv-teal-500); /* иконки, линии, заливки крупных элементов */
  --iskv-color-accent-strong:  var(--iskv-teal-700); /* заливки с белым мелким текстом: бейджи, полоса карточки */
  --iskv-color-accent-soft:    var(--iskv-teal-100); /* полупрозрачные плашки, выбранное */
  --iskv-color-cta:            var(--iskv-gold-500);
  --iskv-color-cta-hover:      var(--iskv-gold-400);
  --iskv-color-cta-text:       var(--iskv-ink-900); /* 6,9:1 на золотом; белый — 2,0:1, нельзя */

  --iskv-color-success:        var(--iskv-green-700);
  --iskv-color-success-bg:     var(--iskv-green-100);
  --iskv-color-danger:         var(--iskv-red-600);
  --iskv-color-danger-bg:      var(--iskv-red-100);
  --iskv-color-warning-text:   var(--iskv-gold-800);
  --iskv-color-warning-bg:     var(--iskv-amber-100);

  /* Фон страницы — вариант C (утверждён 2026-10-30): размытые цветовые пятна из макета, файл bg-glow.svg (~1 КБ).
     Основа #F2F3F2; пятна: бирюза #BEE2E2 / #AAD6D6 / #C4DEE0 / #D1EFF2, голубовато-белый #E8F6FA,
     песочный #DED4CA, серо-голубой #D6E2E6, тёплое золотисто-кремовое #EFE0BE, шалфейный #D6DCC6.
     Слой закреплён за экраном (position: fixed), не анимируется. */
  --iskv-bg-page:       #F2F3F2;
  --iskv-bg-glow:       url("bg-glow.svg");
  /* старый мягкий градиент — запасной вариант без файла */
  --iskv-bg-gradient:   radial-gradient(1200px 700px at 10% -10%, #DDF3F1 0%, rgba(221, 243, 241, 0) 60%),
                        radial-gradient(900px 600px at 100% 0%, #E6F0FA 0%, rgba(230, 240, 250, 0) 55%),
                        linear-gradient(180deg, #F2FAF9 0%, #FBFAF6 100%);

  /* ---------- 2a. Метки и статусы (лёгкие капсулы: светлый оттенок + тёмный текст той же гаммы) ---------- */
  /* Все пары текст/фон ≥ 4,5:1. Классы ERE: .ere__term-status.<slug>, .ere__term-label.<slug>, .ere__status-<post_status>, .ere__featured */

  /* Тип сделки (property-status) */
  --iskv-badge-sale-text:     #00786E;  --iskv-badge-sale-bg:     #DDF3F0;  /* Продажа · for-sale */
  --iskv-badge-rent-text:     #22609E;  --iskv-badge-rent-bg:     #E2EDF8;  /* Аренда · for-rent */
  /* Метки объекта (property-label) */
  --iskv-badge-reserved-text: #A9461C;  --iskv-badge-reserved-bg: #FCE7DD;  /* Забронировано · reserved */
  --iskv-badge-newprice-text: #8A5300;  --iskv-badge-newprice-bg: #FDEFD3;  /* Новая цена · new-price */
  --iskv-badge-sold-text:     #2C3E50;  --iskv-badge-sold-bg:     #E4E9EE;  /* Продано · sold_ */
  --iskv-badge-featured-text: #00786E;  --iskv-badge-featured-bg: #DDF3F0;  /* Рекомендуемое (на публичных карточках скрыто) */
  /* Статусы публикации в кабинете маклера (post_status) */
  --iskv-badge-publish-text:  #1E7B4A;  --iskv-badge-publish-bg:  #E1F3E8;  /* Опубликовано / Одобрен */
  --iskv-badge-pending-text:  #8A5300;  --iskv-badge-pending-bg:  #FFF3D6;  /* На утверждении / В ожидании */
  --iskv-badge-expired-text:  #B03A2E;  --iskv-badge-expired-bg:  #FBE6E3;  /* Истек срок / Истекла */
  --iskv-badge-hidden-text:   #4A5A68;  --iskv-badge-hidden-bg:   #ECEFF2;  /* Скрытый / Скрыто везде */
  --iskv-badge-draft-text:    #4A5A68;  --iskv-badge-draft-bg:    #F2F4F6;  /* Черновик */
  /* Капсула на фото: фон оттенка почти непрозрачный + размытие, чтобы читалась на любом снимке */
  --iskv-badge-on-photo-alpha: 0.92;

  /* ---------- 3. Стекло: три уровня ---------- */

  --iskv-glass-blur-sm: 8px;
  --iskv-glass-blur-md: 12px;
  --iskv-glass-blur-lg: 20px;

  /* light — карточки и строки в больших списках, БЕЗ размытия (скорость) */
  --iskv-glass-light-bg:     rgba(255, 255, 255, 0.72);
  --iskv-glass-light-border: rgba(255, 255, 255, 0.60);
  /* regular — шапка, фильтр, панели кабинета, подвал */
  --iskv-glass-regular-bg:     rgba(255, 255, 255, 0.55);
  --iskv-glass-regular-border: rgba(255, 255, 255, 0.45);
  /* dense — выпадающие меню, модальные окна, всплывающие окна: текст поверх любого фона */
  --iskv-glass-dense-bg:     rgba(255, 255, 255, 0.86);
  --iskv-glass-dense-border: rgba(255, 255, 255, 0.70);
  /* запасной фон, если backdrop-filter не поддерживается */
  --iskv-glass-fallback-bg:  rgba(255, 255, 255, 0.94);
  /* тонкий внутренний блик верхней кромки */
  --iskv-glass-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* Плашки-оттенки (поверх стекла) */
  --iskv-tint-teal:  rgba(0, 166, 153, 0.10);
  --iskv-tint-gold:  rgba(245, 166, 35, 0.14);
  --iskv-tint-ink:   rgba(44, 62, 80, 0.06);

  /* ---------- 4. Типографика ---------- */

  --iskv-font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --iskv-font-numeric: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --iskv-fw-light:    300;
  --iskv-fw-regular:  400;
  --iskv-fw-medium:   500;
  --iskv-fw-semibold: 600;

  /* Шкала (шаг ≈ 1,2). Заголовки h1–h2 тянутся от телефона к десктопу */
  --iskv-fs-xs:   12px;  /* подписи, бейджи */
  --iskv-fs-sm:   13px;  /* мета карточки, полоса характеристик */
  --iskv-fs-base: 15px;  /* основной текст (сейчас 14 px Play) */
  --iskv-fs-md:   17px;  /* лид, крупные поля */
  --iskv-fs-lg:   20px;  /* h4, цена в карточке */
  --iskv-fs-xl:   24px;  /* h3, цена на странице объекта */
  --iskv-fs-2xl:  clamp(26px, 2.2vw + 14px, 32px);  /* h2 (сейчас 40) */
  --iskv-fs-3xl:  clamp(30px, 3vw + 14px, 44px);    /* h1 (сейчас 76) */

  --iskv-lh-tight: 1.2;
  --iskv-lh-snug:  1.35;
  --iskv-lh-base:  1.6;

  --iskv-ls-tight: -0.01em; /* заголовки */
  --iskv-ls-caps:  0.04em;  /* капс в меню и бейджах */

  /* ---------- 5. Отступы (шаг 4 px) ---------- */

  --iskv-space-1:  4px;
  --iskv-space-2:  8px;
  --iskv-space-3:  12px;
  --iskv-space-4:  16px;
  --iskv-space-5:  20px;
  --iskv-space-6:  24px;
  --iskv-space-8:  32px;
  --iskv-space-10: 40px;
  --iskv-space-12: 48px;
  --iskv-space-16: 64px;
  --sf-top: 20px; /* 1.4.2: отступ от шапки до содержимого (крошки / заголовок): телефон 20, планшет 32, компьютер 40, широкие экраны 48 */

  /* ---------- 6. Радиусы ---------- */

  --iskv-radius-xs:   6px;   /* чекбоксы, мелкие кнопки-действия */
  --iskv-radius-sm:   8px;   /* миниатюры, теги */
  --iskv-radius-md:   12px;  /* поля, кнопки, карточки */
  --iskv-radius-lg:   16px;  /* крупные блоки: фильтр, панели, подвал */
  --iskv-radius-xl:   24px;  /* герой-блоки, модальные окна */
  --iskv-radius-pill: 999px; /* капсулы: телефон, бейджи, вкладки */

  /* ---------- 7. Тени и свечения ---------- */

  --iskv-shadow-glass:    0 8px 32px rgba(31, 45, 58, 0.08), 0 1px 2px rgba(31, 45, 58, 0.04);
  --iskv-shadow-raised:   0 12px 40px rgba(31, 45, 58, 0.12), 0 2px 6px rgba(31, 45, 58, 0.06);
  --iskv-shadow-overlay:  0 24px 64px rgba(31, 45, 58, 0.18);
  --iskv-glow-teal:       0 6px 20px rgba(0, 166, 153, 0.28);
  --iskv-glow-gold:       0 6px 20px rgba(245, 166, 35, 0.40);

  /* Фокус: двойное кольцо видно на любом фоне */
  --iskv-focus-ring: 0 0 0 2px var(--iskv-white), 0 0 0 4px var(--iskv-teal-500);

  /* ---------- 8. Движение ---------- */

  --iskv-dur-fast: 120ms;
  --iskv-dur-base: 200ms;
  --iskv-dur-slow: 320ms;
  --iskv-ease:     cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- 9. Слои ---------- */

  --iskv-z-header:   1000;
  --iskv-z-dropdown: 1010;
  --iskv-z-overlay:  1040;
  --iskv-z-modal:    1050;
  --iskv-z-toast:    1080;

  /* ---------- 10. Размеры ---------- */

  /* Режим wide (как на сайте и в макете): контент на всю ширину окна, только боковые поля */
  --iskv-page-gutter:    clamp(16px, 3vw, 48px);
  --iskv-container:      none;   /* без ограничения ширины; узкие колонки текста — через --iskv-measure */
  --iskv-measure:        72ch;   /* максимальная ширина абзацев текста (описание объекта, политика) */
  --iskv-control-height: 44px;  /* поля и кнопки; не меньше 44 px для касания */
  --iskv-control-sm:     36px;
  --iskv-header-height:  76px;

  /* Точки перестройки — как у Bootstrap 4 темы (в media-запросах переменные не работают, значения для справки):
     sm 576px · md 768px · lg 992px · xl 1200px */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --iskv-dur-fast: 0ms;
    --iskv-dur-base: 0ms;
    --iskv-dur-slow: 0ms;
  }
}
@media (min-width: 768px) { :root { --sf-top: 32px; } }
@media (min-width: 1200px) { :root { --sf-top: 40px; } }
@media (min-width: 1600px) { :root { --sf-top: 48px; } }