/* Placy marketing site — tokens.
   Источник у каждой группы:
     [продукт] — voice-copilot/interface/web/DESIGN.md (Placy Pro, origin/dev 18.10.2026)
     [Миша]    — Placy Marketing Design System в Claude Design (colors_and_type.css, editorial.css)
     [своё]    — предложение для сайта, нет ни в одной системе; утверждается отдельно
   Светлая тема — основная. Тёмная используется только как одна полоса на странице. */

:root{
  color-scheme:light;

  /* Поверхности [продукт] */
  --ground:#F8F3F3;          /* фон страницы */
  --surface:#FFFFFF;         /* карточки, белая полоса */
  --inset:#F3ECEC;           /* утопленная панель, наведение */
  --muted:#EDE2E2;           /* подложка меток, колодец под картинкой */
  --line:#E6DEDE;            /* волосяная линия, рамка карточки */
  --line-accent:#F0D6D6;     /* редкий акцентный разделитель */

  /* Текст [продукт] */
  --ink:#1A1A1A;             /* основной текст и цифры — 15,8:1 на фоне */
  --ink-2:#6B5F5F;           /* только мелкие подписи до 14px — 5,6:1 на фоне; основной текст — --ink (решение 18.10) */

  /* Действие [продукт] */
  --action:#1664FF;          /* заливка главной кнопки; белый текст — 4,9:1 */
  --action-hover:#1450D6;    /* наведение на кнопку */
  --link:#1450D6;            /* синий ТЕКСТ (ссылки) — 6,1:1; #1664FF как текст даёт 4,4:1 */

  /* Состояния [продукт] — заливка для меток и значков, -text для слов */
  --success:#21C45D;  --success-text:#1D723C;
  --warning:#F59F0A;  --warning-text:#9A3D00;
  --danger:#EF4444;   --danger-text:#B91C1C;

  /* Тёмная полоса — основа [продукт], производные для текста и ссылок [своё] */
  --night:#171210;           /* фон тёмной полосы (тёмная тема продукта) */
  --night-surface:#1E1817;   /* карточка на тёмном */
  --night-ink:#F5EFEC;       /* текст на тёмном — 16,3:1 */
  --night-ink-2:#B8ACA8;     /* второй текст на тёмном — 8,4:1 [своё] */
  --night-link:#9CB8FF;      /* синий текст на тёмном — 9,5:1 [своё]; #1664FF даёт 3,8:1 */

  /* Бренд-исключение [продукт] */
  --whatsapp:#25D366;        /* только знак WhatsApp, не состояние */

  /* Шрифт [продукт + Миша — совпадают] */
  --font:"Inter","Inter Variable",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Жирность [решения Димы 18.10]: текст 400; кнопки, меню, подписи 500; заголовки 18–32px и выделение 600;
     крупные заголовки 40–64px — 500 (на большом кегле 600 читается как жирный); жирнее 600 нельзя.
     Оптический размер Inter (ось opsz) включён — крупный кегль рисуется тоньше, как Inter Display */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  /* Шкала размеров [Миша] — у продукта самый крупный 20px, для витрины мало */
  --fs-display:56px;  --fw-display:500;
  --fs-h1:40px;       --fw-h1:500;
  --fs-h2:32px;       --fw-h2:600;
  --fs-h3:24px;       --fw-h3:600;
  --fs-subhead:20px;  /* вес 400 */
  --fs-stat:44px;     /* цифра как графика, всегда --ink */
  --fs-body-lg:18px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-label:12px;
  --lh-tight:1.15; --lh-snug:1.25; --lh-body:1.5;
  --tracking-tight:-0.02em;

  /* Отступы, база 4px [Миша] */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Радиусы: кнопки — пилюля [продукт: форма кнопок по умолчанию «круглая», #753];
     поля 8 [продукт + Миша], карточки 12–16 [Миша] */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;

  /* Тени: карточка не парит [продукт]; тень — только у плавающего слоя, тёплая [продукт] */
  --shadow-float:0 2px 10px rgba(70,40,40,.06);          /* меню, тост, липкая кнопка */
  --shadow-overlay:0 12px 40px rgba(70,40,40,.14);       /* окно, лист снизу */

  /* Радиусы по ролям [решение 18.10] */
  --r-button:var(--r-pill); --r-card:var(--r-xl); --r-field:var(--r-md);

  /* Размер нажатия [продукт] */
  --tap:44px;

  /* Движение: роли и кривые [Миша], значения [продукт — 150–250 мс] */
  --dur-instant:150ms;       /* фокус, нажатие, переключатель */
  --dur-quick:200ms;         /* наведение, смена цвета, тост уходит */
  --dur-standard:300ms;      /* появление блока, раскрытие ответа, тост приходит */
  --dur-large:400ms;         /* окно, лист снизу, мобильное меню; потолок */
  --ease-standard:cubic-bezier(0.2,0.8,0.2,1);
  --ease-enter:cubic-bezier(0,0,0.2,1);
  --ease-exit:cubic-bezier(0.4,0,1,1);
  --shift-sm:8px;            /* появление снизу */
  --shift-md:16px;           /* смена соседних шагов */
  --press:0.97;              /* нажатие [продукт]; не меньше 0.96 [Миша] */
  --ease:var(--ease-standard); --dur:var(--dur-quick);

  /* Фокус [продукт + Figma + Миша] */
  --focus:0 0 0 2px var(--ground),0 0 0 4px var(--action);
  --scrim:rgba(23,18,16,.5); /* подложка окна — тёмный продукта */

  /* Размеры блоков [Миша: бенто и сцены] */
  --grid-gap:18px;           /* шаг бенто и карточек */
  --r-tile:22px;             /* плитка бенто, тариф */
  --r-stage:28px;            /* сцена показа продукта, видео, финальный призыв */
  --pad-tile:28px;           /* внутренний отступ плитки и тарифа */
  --gap-cta:48px;            /* от текста до кнопок — решение 18.10 */

  /* Тонированные панели сцены [своё, 19.10 — по cue.im, Calendly, Notion]: у каждой секции свой мягкий тон,
     кадр лежит на панели, а не в белой рамке; страница остаётся светлой, без чересполосицы */
  --tint-blue:linear-gradient(180deg,#DCE8FB,#EEF3FC);
  --tint-sky:linear-gradient(165deg,#5B8FD6 0%,#3D6DB5 42%,#7FB3EA 78%,#CFE9E2 100%);
  --tint-sage:linear-gradient(180deg,#E3EEE6,#F1F6F1);
  --tint-sand:linear-gradient(180deg,#F5E9D4,#FBF4E8);
  --tint-rose:#EFE4E1;
  --tint-mist:#E4EAF5;        /* холодная панель: сцены про систему (веб, база, сайт); ровный цвет вместо градиента --tint-blue [решение Димы 25.10] */
  --tint-ink:#2A3C55;        /* текст и значки на голубой сцене, если нужны */
  --progress:#3FAE9E;
  --tint-hero:linear-gradient(180deg,#F3ECEC 0%,#E9EEF8 38%,#A9C3E9 74%,#6F98D5 100%);  /* общий фон героя: текст сверху, телефоны снизу */        /* полоска времени у автоперелистывания */
  /* Раскладка страницы [своё] */
  --wrap:1200px;             /* ширина контента */
  --band:96px;               /* вертикальный отступ полосы = --s-9 */
}

/* Тени: один свет сверху, тёплые, три уровня (решение 25.10). low — чипы и подписи; mid — стекло, всплывающие карточки, окна внутри плиток; high — браузер и телефон. dsh — то же для filter у вырезанных картинок. */
:root{--shc:64,40,36;
  --sh-low:0 1px 2px rgba(var(--shc),.08),0 4px 10px -2px rgba(var(--shc),.08);
  --sh-mid:0 1px 2px rgba(var(--shc),.08),0 14px 30px -8px rgba(var(--shc),.16);
  --sh-high:0 2px 4px rgba(var(--shc),.12),0 30px 60px -14px rgba(var(--shc),.28);
  --dsh-mid:drop-shadow(0 2px 3px rgba(var(--shc),.10)) drop-shadow(0 20px 30px rgba(var(--shc),.16));
  --dsh-high:drop-shadow(0 2px 4px rgba(var(--shc),.12)) drop-shadow(0 26px 40px rgba(var(--shc),.20))}