/* Miniflow: токены. Значения сняты с шаблона Align (refs/align/tokens-*.json, tree-*.txt).
   Нейтральные цвета как у Align, тёмный и акцент бренда Miniflow. */

@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Метрики-заглушки, чтобы при подмене шрифта не прыгала вёрстка */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  /* Цвета */
  --page: #FCFCFC;        /* фон страницы и карточек (Align) */
  --ink: #161616;         /* бренд (у Align #1C1D1F) */
  --ink-2: #363636;       /* текст чипов, второй тёмный (Align) */
  --gray: #6B717B;        /* подзаголовки. У Align #757B85: ≈4.2:1, ниже AA */
  --badge-bg: #F0F0F0;    /* маленький бейдж (Align) */
  --line: #E5E7EC;        /* тонкие линии (Align, tokens → ::after border) */
  --panel: #FAFAFA;       /* подложка картинок и выбранного пункта (Align) */
  --track: #DBDBDB;       /* дорожка прогресса (Align) */
  --accent: #FF4400;      /* бренд: только мелкие вставки */
  --accent-ink: #C23400;  /* акцент в тексте */
  --accent-soft: rgb(255 68 0 / .12);
  --success: #1F9D55;
  --danger: #C8261B;
  --danger-soft: rgb(200 38 27 / .14);
  --line-strong: #D2D5DB;  /* граница полей и чипов при наведении */
  --placeholder: #80868F;  /* подсказка формата в поле (≈3.6:1, рядом всегда есть label) */
  --accent-tint: rgb(255 68 0 / .04); /* выделенная колонка сравнения */
  --status-ok: #2EB86C;    /* точка «на месте» в футере (Align) */
  --status-ok-line: #14A857;

  /* Шрифты */
  --f-display: "Inter Display", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-geist: "Geist", "Inter Display", "Inter Fallback", system-ui, sans-serif;

  /* Шкала отступов Align (все значения, найденные в tokens/tree) */
  --s-2: 2px; --s-3: 3px; --s-4: 4px; --s-5: 5px; --s-6: 6px; --s-8: 8px; --s-10: 10px;
  --s-12: 12px; --s-14: 14px; --s-15: 15px; --s-16: 16px; --s-18: 18px; --s-20: 20px;
  --s-24: 24px; --s-25: 25px; --s-30: 30px; --s-32: 32px; --s-35: 35px; --s-40: 40px;
  --s-50: 50px; --s-60: 60px; --s-70: 70px; --s-100: 100px; --s-150: 150px;

  /* Сетка */
  --frame: 1280px;
  --gutter: var(--s-50);   /* поля страницы: 50 / 30 (810-1199) / 15 (<810) */
  --nav-h: 70.4px;

  /* Радиусы */
  --r-badge: 2px;
  --r-chip: 5px;
  --r-card: 10px;
  --r-btn: 12px;
  --r-panel: 20px;
  --r-frame: 24px;

  /* Кнопки Align */
  --btn-dark-bg: linear-gradient(0deg, #161616 57%, #363636 100%);
  --btn-dark-shadow:
    rgb(168 168 168 / .04) 0 -.24px .14px 0 inset,
    rgb(168 168 168 / .30) 0 -2px 1.2px 0 inset,
    rgb(168 168 168 / .03) 0 .12px .07px 0 inset,
    rgb(168 168 168 / .23) 0 1px .6px 0 inset,
    rgb(0 0 0 / .10) 0 5px 4px 0;
  --btn-light-shadow: 0 2px 4px rgb(0 0 0 / .10);
  --frame-shadow: rgb(0 0 0 / .23) 0 -.6px 3px -1.67px, rgb(0 0 0 / .19) 0 -2.29px 11.44px -3.33px, rgb(0 0 0 / 0) 0 -10px 50px -5px;
  --icon-dark-shadow: rgb(255 255 255 / .04) 0 .24px .24px 0 inset, rgb(255 255 255 / .30) 0 2px 2px 0 inset;

  /* Движение */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --dur-hover: 160ms;
  --dur-press: 120ms;
  --dur-reveal: 600ms;
  --reveal-y: 15px;
  --stagger: 80ms;
}

@media (max-width: 1199.98px) {
  :root { --gutter: var(--s-30); }
}
@media (max-width: 809.98px) {
  :root { --gutter: var(--s-15); --nav-h: 72px; }
}