/* IceCold v2 — токены системы.
   Источник правды: design/system-v2/ICECOLD-V2-SYSTEM.md (снято с superwhisper.com 11.10.2026).
   Слои: сырая палитра → тинты → небо → семантика → типографика → пространство → контейнеры →
   скругления → глубина → движение. Семантика ссылается на сырые через var(); экраны берут
   семантику, сырые — только когда нужен цвет смысла. Своих значений здесь нет: каждое снято
   у источника, происхождение — комментарием в строке. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&subset=cyrillic&display=swap");

:root {
  /* ── 1. Сырая палитра ─────────────────────────────────────────────── */
  --black:      #000000; /* body и все секции источника */
  --white:      #FFFFFF; /* основа всех прозрачностей белого */
  --gray-950:   #0F0F10; /* trigray-950, фон карточки тарифа Free */
  --gray-900:   #1A1A1A; /* фон кнопок App Store / Google Play */
  --gray-800:   #1C1D1F; /* trigray-800, рамка тарифа Free, фон вторичных кнопок тарифов */
  --gray-600:   #70757C; /* trigray-600, 48 вхождений: подписи, подвал */
  --gray-400:   #888B91; /* trigray-400, 36 вхождений: неактивный сегмент, тихий текст */
  --gray-200:   #C4C5C9; /* trigray-200, подзаголовки на чёрном */
  --gray-100:   #FAFAFA; /* trigray-100, основной текст и заголовки */
  --slate-500:  #798498; /* надзаголовок «Adaptability» */
  --blue-500:   #0088FF; /* triblue-500, акцент, Custom Mode */
  --blue-300:   #83C9FF; /* triblue-400, надзаголовки Integrations и Tutorials */
  --pink-500:   #DD55E7; /* tripink, функция «offline», What's inside */
  --pink-300:   #FF9DC4; /* надзаголовок «What people say» */
  --teal-500:   #1CECBB; /* функция «свои слова» */
  --red-500:    #FF5252; /* функция «режимы» */
  --green-500:  #17C253; /* функция «буфер обмена» */
  --yellow-500: #FFDD00; /* triyellow, функция «встречи» */

  /* ── 2. Тинты карточек: цвет смысла около 10 % поверх чёрного ─────── */
  --tint-blue:   rgb(3 7 25);   /* карточка функции, синяя */
  --tint-pink:   rgb(28 3 31);  /* карточка «offline» */
  --tint-teal:   rgb(3 19 16);  /* карточка «свои слова» */
  --tint-red:    rgb(32 4 1);   /* карточка «режимы» */
  --tint-green:  rgb(2 22 11);  /* карточка «буфер» */
  --tint-yellow: rgb(25 19 3);  /* карточка «встречи» */

  /* ── 3. Небо: градиенты сверху вниз, сэмплы пикселей кадров ───────── */
  --sky-day:     linear-gradient(180deg, #2A79DE, #388DE7, #87B7F6, #B7CBFB, #DDE2FE); /* хиро, режим Day */
  --sky-dusk:    linear-gradient(180deg, #010103, #05103A, #4E499F, #856DB8, #B791C6); /* хиро, режим Dusk, любимый владельца */
  --sky-night:   linear-gradient(180deg, #021632, #072A55, #275E92, #576E97, #8A8299); /* хиро, режим Night */
  --sky-card:    linear-gradient(180deg, rgb(5 1 22) 0%, rgb(17 45 114) 30%, rgb(75 104 170) 45%, rgb(135 167 220) 64%, rgb(156 172 208) 88%, rgb(252 219 239) 98%); /* карточка тарифа Pro, авторский CSS */
  --sky-reviews: linear-gradient(180deg, #000006, #01052E, #18184E, #4C337A, #7A4C90, #B073A3); /* секция отзывов */

  /* ── 4. Семантика: выведена по элементам, у источника только шкалы ─── */
  --bg:           var(--black);              /* фон страницы, body */
  --surface-1:    var(--gray-950);           /* карточка, тариф Free */
  --surface-2:    var(--gray-800);           /* кнопка и поле, «Download» и «Contact us» в тарифах */
  --glass:        color-mix(in srgb, var(--white) 10%, transparent); /* «Play Demo», мелкие плашки 12px */
  --stroke:       var(--gray-800);           /* рамка тихая, рамка тарифа Free */
  --stroke-glass: color-mix(in srgb, var(--white) 20%, transparent); /* рамка стекла, «Play Demo», ring-white/20, 16 вхождений */
  --ring-dark:    color-mix(in srgb, var(--white) 15%, transparent); /* кольцо на тёмной кнопке, App Store */
  --text:         var(--gray-100);           /* заголовки */
  --text-2:       color-mix(in srgb, var(--white) 60%, transparent); /* «Download» в тарифах, text-white/60 */
  --text-3:       color-mix(in srgb, var(--white) 50%, transparent); /* описания карточек, text-white/50, 18 вхождений */
  --text-4:       color-mix(in srgb, var(--white) 40%, transparent); /* text-white/40, слабый: 3,7:1 на чёрном — только текст от 24px и неважные метки */
  --accent:       var(--blue-500);           /* один элемент на экран */
  --eyebrow:      var(--blue-300);           /* надзаголовок по умолчанию, Integrations и Tutorials */
  --focus:        color-mix(in srgb, var(--white) 70%, transparent); /* кольцо фокуса, как у SW focus-visible:ring-white/70, решение 11.10 */
  --nav-fill:     linear-gradient(color-mix(in srgb, var(--white) 5%, transparent) 0 0), color-mix(in srgb, var(--black) 70%, transparent); /* заливка шапки, pretty.css:3241; два слоя, только в background */

  /* Текст на небе: тёмное небо (Dusk, Night) — --text и --text-on-sky-2; светлое (Day) — чернила */
  --text-on-sky-2: color-mix(in srgb, var(--white) 85%, transparent); /* вторичный на тёмном небе: .60 у горизонта Dusk = 2,3:1 */
  --ink:           var(--gray-950);  /* чернила на небе Day: белый там 1,3–2,9:1 */
  --ink-2:         color-mix(in srgb, var(--gray-950) 72%, transparent); /* вторичные чернила на небе Day */

  /* Цвета смыслов IceCold (справочник, раздел 2): синий — действие и IceCold,
     красный, жёлтый и зелёный — только оценка сайта, розовый и бирюзовый — продукты. */
  --score-bad:  var(--red-500);    /* оценка сайта «плохо», больше нигде */
  --score-mid:  var(--yellow-500); /* оценка сайта «средне», больше нигде */
  --score-good: var(--green-500);  /* оценка сайта «хорошо», больше нигде */
  --product-a:  var(--pink-500);   /* продукт A, имя позже */
  --product-b:  var(--teal-500);   /* продукт B, имя позже */

  /* ── 5. Типографика ───────────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Inter, кириллица есть */

  --fw-light:    300; /* Inter 300 */
  --fw-regular:  400; /* Inter 400, текст */
  --fw-medium:   500; /* Inter 500, заголовки карточек, h3 */
  --fw-semibold: 600; /* Inter 600, display и h2 */

  --t-display-xl-size: 60px;     /* цена «Custom», «$8» */
  --t-display-xl-weight: var(--fw-semibold);
  --t-display-xl-lh: 60px;
  --t-display-xl-ls: -1.5px;

  --t-display-size: 48px;        /* хиро «Just speak. Write faster.»; трекинг ужат под кириллицу */
  --t-display-weight: var(--fw-semibold);
  --t-display-lh: 51px;
  --t-display-ls: normal;

  --t-display-2-size: 48px;      /* «Build it yourself», «Write medical notes offline» */
  --t-display-2-weight: var(--fw-medium);
  --t-display-2-lh: 48px;
  --t-display-2-ls: normal;

  --t-h2-size: 31px;             /* «Used by those who move fast» */
  --t-h2-weight: var(--fw-semibold);
  --t-h2-lh: 37px;
  --t-h2-ls: -1.24px;

  --t-h3-size: 24px;             /* «Ready to see how it works?» */
  --t-h3-weight: var(--fw-medium);
  --t-h3-lh: 36px;
  --t-h3-ls: 0px;

  --t-title-size: 20px;          /* «Testimonies» */
  --t-title-weight: var(--fw-medium);
  --t-title-lh: 28px;
  --t-title-ls: 0px;

  --t-lead-size: 18px;           /* вопросы FAQ, подзаголовки */
  --t-lead-weight: var(--fw-regular);
  --t-lead-lh: 28px;
  --t-lead-ls: 0px;

  --t-body-size: 16px;           /* основной текст */
  --t-body-weight: var(--fw-regular);
  --t-body-lh: 24px;
  --t-body-ls: 0px;

  --t-card-title-size: 16px;     /* заголовок карточки функции, цветом смысла */
  --t-card-title-weight: var(--fw-medium);
  --t-card-title-lh: 22.4px;
  --t-card-title-ls: 0.16px;

  --t-body-sm-size: 15px;        /* строки тарифов */
  --t-body-sm-weight: var(--fw-regular);
  --t-body-sm-lh: 22.5px;
  --t-body-sm-ls: 0px;

  --t-small-size: 14px;          /* меню, подписи, 53 вхождения */
  --t-small-weight: var(--fw-regular);
  --t-small-lh: 20px;
  --t-small-ls: 0px;

  --t-eyebrow-size: 14px;        /* надзаголовок над h2, цветной */
  --t-eyebrow-weight: var(--fw-medium);
  --t-eyebrow-lh: 20px;
  --t-eyebrow-ls: 0.35px;

  --t-caption-size: 12px;        /* подписи карточек */
  --t-caption-weight: var(--fw-regular);
  --t-caption-lh: 16px;
  --t-caption-ls: 0px;

  --t-micro-size: 11px;          /* версии, метки */
  --t-micro-weight: var(--fw-regular);
  --t-micro-lh: 11px;
  --t-micro-ls: 0px;

  /* Мобильные значения (на 390, снято у источника); ниже 640px они подменяют основные */
  --t-display-m-size: 40px;      /* хиро на 390 */
  --t-display-m-weight: var(--fw-semibold);
  --t-display-m-lh: 42px;
  --t-display-m-ls: -1px;

  --t-h2-m-size: 27px;           /* h2 на 390 */
  --t-h2-m-weight: var(--fw-semibold);
  --t-h2-m-lh: 32px;
  --t-h2-m-ls: -0.675px;

  /* ── 6. Пространство: шаг 4px (Tailwind), рабочие отступы ─────────── */
  --space-4:  4px;  /* gap-1 */
  --space-8:  8px;  /* gap-2 */
  --space-12: 12px; /* gap-3 */
  --space-16: 16px; /* p-4, отступ шапки сверху */
  --space-24: 24px; /* p-6, поле карточки функции */
  --space-32: 32px; /* p-8 */
  --space-48: 48px; /* p-12 */
  --space-64: 64px; /* секция на 390 */
  --space-96: 96px; /* секция на 1440 */

  --section-y: var(--space-96); /* поле секции сверху и снизу на 1440 */

  /* ── 7. Контейнеры и каркас ───────────────────────────────────────── */
  --container-text:  768px;  /* текстовая колонка */
  --container-cards: 1008px; /* сетка карточек 3×320 + зазоры */
  --container-wide:  1200px; /* тарифы 3×384 + зазоры */

  --nav-w:   347px;          /* шапка-таблетка по центру */
  --nav-h:   41px;           /* высота шапки-таблетки */
  --nav-top: var(--space-16);/* отступ шапки сверху */

  --card-feature-w: 320px;   /* карточка функции */
  --card-feature-h: 400px;   /* карточка функции */
  --card-price-w:   384px;   /* карточка тарифа */
  --card-price-h:   605px;   /* карточка тарифа */

  /* ── 8. Скругления ────────────────────────────────────────────────── */
  --r-sm:   9px;    /* кнопки хиро «Download for Mac / Windows» */
  --r-md:   12px;   /* плашки внутри карточек, поля */
  --r-lg:   20px;   /* карточки тарифов */
  --r-xl:   24px;   /* карточки функций, rounded-3xl, 18 вхождений */
  --r-2xl:  32px;   /* большие окна, стопка отзывов, верх демо-окна */
  --r-pill: 9999px; /* все кнопки ниже хиро, сегменты, шапка */

  /* ── 9. Глубина: свечения нет, его роль играет небо ───────────────── */
  --shadow-btn:      0 2px 6px rgb(0 0 0 / 0.08);  /* белая кнопка в хиро */
  --shadow-float:    0 8px 32px rgb(0 0 0 / 0.40); /* плавающие карточки: отзывы, всплывашки UI */
  --ring-glass:      0 0 0 1px color-mix(in srgb, var(--white) 15%, transparent); /* тёмные кнопки на чёрном */
  --ring-nav:        0 0 0 1px rgb(0 0 0 / 0.80);  /* шапка поверх неба */
  --stroke-gradient: linear-gradient(135deg, color-mix(in srgb, var(--white) 40%, transparent), color-mix(in srgb, var(--white) 0%, transparent), color-mix(in srgb, var(--white) 10%, transparent)); /* кромка стеклянной карточки, свет из левого верхнего угла */
  --blur-nav:        blur(5px);                    /* только шапка, floating-nav */

  /* ── 10. Движение ─────────────────────────────────────────────────── */
  --ease-std:      cubic-bezier(0.4, 0, 0.2, 1);   /* кнопки, ссылки */
  --ease-out-soft: cubic-bezier(0.25, 0.1, 0.1, 1);/* раскрытия, сегменты */
  --ease-drift:    ease-in-out;                    /* пара к --dur-slow, дрейф фоновых слоёв */
  --dur-fast: 150ms;  /* hover кнопок */
  --dur-mid:  300ms;  /* переключатель сегментов */
  --dur-slow: 1200ms; /* медленный дрейф фоновых слоёв */

  /* ── 11. Компоненты: значения, которых не было в токенах (лист компонентов, 11.10) ── */
  --line:          1px;    /* толщина кольца и разделителя: ring-1 у источника */
  --focus-w:       2px;    /* кольцо фокуса, контракт компонентов */
  --focus-offset:  2px;    /* отступ кольца фокуса от элемента, контракт компонентов */
  --r-xs:          4px;    /* метки «New», «40% off», rounded */
  --r-tile:        6px;    /* плитка иконки 24, rounded-md */
  --control-sm:    40px;   /* кнопка малая, контракт */
  --control-md:    44px;   /* кнопки App Store / Google Play, поле подвала */
  --control-lg:    52px;   /* кнопки тарифов, трек сегмента Monthly/Yearly */
  --control-xs:    32px;   /* сегмент RU/RO, контракт */
  --field-h:       46px;   /* поле в хиро источника */
  --control-xl:    56px;   /* таблетка поля проверки сайта */
  --chip-h:        36px;   /* чип выбора ниши */
  --check-box:     18px;   /* квадрат флажка */
  --dot:           6px;    /* точка «ждёт» в прогрессе проверки */
  --bar-2:         2px;    /* полоса прогресса, кольцо аватаров и метки шкалы */
  --cta-h:         480px;  /* мин. высота окна призыва */
  --row-h:         60px;   /* строка FAQ */
  --nav-btn-h:     33px;   /* белая pill «Download» в шапке */
  --seg-pad:       6px;    /* внутреннее поле трека сегмента */
  --icon-16:       16px;   /* иконка в строке и кнопке */
  --icon-20:       20px;   /* иконка в плитке карточки, плавающая кнопка */
  --tile-24:       24px;   /* плитка иконки «Build it yourself» */
  --avatar:        32px;   /* аватар в отзыве */
  --qr:            80px;   /* QR «Also available on mobile» */
  --logo-h:        24px;   /* высота знака в ряду логотипов, 20–24 у источника */
  --card-feature-w-m: 300px; /* карточка смысла на 390, контракт */
  --tilt:          2deg;   /* поворот подложек в стопке отзывов */

  --nav-link:          color-mix(in srgb, var(--white) 80%, transparent); /* ссылки шапки, text-white/80; hover ссылок подвала */
  --glass-hover:       color-mix(in srgb, var(--white) 20%, transparent); /* hover стекла и кнопок --ring, bg-white/20 */
  --stroke-glass-focus: color-mix(in srgb, var(--white) 40%, transparent); /* поле в хиро в фокусе, ring-white/40 */
  --stroke-faint:      color-mix(in srgb, var(--white) 8%, transparent);  /* поле подвала, inset ring-white/[.08] */
  --stroke-faint-focus: color-mix(in srgb, var(--white) 26%, transparent); /* поле подвала в фокусе, ring-white/[.26] */
  --ink-hover:         color-mix(in srgb, var(--black) 95%, transparent);  /* кнопка Get Pro в hover, bg-black/95 */
  --o-disabled:        0.4;   /* недоступная кнопка и поле, disabled:opacity-40 */
}

/* Телефон: ступени display и h2 и поле секции, как у источника на 390.
   display-xl и display-2 берут те же 40/42 из --t-display-m-*, вес свой (справочник, раздел 3). */
@media (max-width: 640px) {
  :root {
    --t-display-xl-size: var(--t-display-m-size);
    --t-display-xl-lh:   var(--t-display-m-lh);
    --t-display-xl-ls:   var(--t-display-m-ls);

    --t-display-2-size: var(--t-display-m-size);
    --t-display-2-lh:   var(--t-display-m-lh);

    --t-display-size:   var(--t-display-m-size);
    --t-display-weight: var(--t-display-m-weight);
    --t-display-lh:     var(--t-display-m-lh);

    --t-h2-size:   var(--t-h2-m-size);
    --t-h2-weight: var(--t-h2-m-weight);
    --t-h2-lh:     var(--t-h2-m-lh);
    --t-h2-ls:     var(--t-h2-m-ls);

    --section-y: var(--space-64); /* поле секции на 390 */
  }
}