/* ==========================================================================
   ПЕРЕПЛЁТ · Design tokens
   Единственный источник правды по цветам, типографике, отступам, тени и
   движению. Компоненты и блоки используют только эти переменные.
   Источник: Figma «Переплет» (Diana), экраны Desktop-7/9/23/28/31.
   ========================================================================== */

:root {
  /* ---------- Цвет: графит (тёмные секции) ---------- */
  --ink-950: #1a1818;       /* самый тёмный — футер, модальный фон */
  --ink-900: #242121;       /* базовый фон сайта (Figma bg) */
  --ink-800: #2b2828;       /* альтернативная тёмная секция */
  --ink-700: #393939;       /* градиент кнопки, разделители на тёмном */
  --ink-600: #4a4747;
  --ink-500: #737373;       /* рамки на бумаге */
  --ink-400: #8a8a8a;
  --ink-300: #a3a3a3;

  /* ---------- Цвет: бумага (светлые секции, формы) ---------- */
  --paper-50:  #ffffff;
  --paper-100: #f5f5f5;     /* лист формы (Figma #f5f5f5) */
  --paper-200: #e5e5e5;     /* поля ввода, светлые кнопки */
  --paper-300: #dddbd4;     /* тёплая шапка сайта (Figma #dddbd4) */
  --paper-400: #cfcdc6;
  --paper-500: #bcbcbc;     /* серые карточки на папке (Figma #bcbcbc) */

  /* ---------- Цвет: акценты ---------- */
  --red-600: #bc0707;       /* обязательные поля, ошибки, обводка даты */
  --red-500: #d0021b;       /* красная булавка */
  --red-700: #8e0505;
  --yellow-400: #ffe45c;    /* стикер */
  --yellow-500: #f6d53a;
  --lime-300: #e9f27c;      /* маркер-стрелка «Посмотреть описание» */
  --navy-700: #182869;      /* рукописный текст на стикере */

  /* ---------- Семантические роли ---------- */
  --bg: var(--ink-900);
  --bg-alt: var(--ink-800);
  --fg: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.72);
  --fg-faint: rgba(255, 255, 255, 0.45);
  --line-on-dark: rgba(255, 255, 255, 0.14);

  --paper-fg: var(--ink-900);
  --paper-fg-muted: #6e6e6e;          /* плейсхолдеры, подписи (Figma #6e6e6e) */
  --paper-line: var(--ink-500);

  --accent: var(--red-600);
  --focus: #ffd23f;

  /* ---------- Типографика ---------- */
  --font-display: "Fatal", "Oswald", "Roboto Condensed", Impact, sans-serif;
  --font-mono: "Fira Code", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-hand: "HTC Hand", "Caveat", "Comic Sans MS", cursive;

  --fs-h1: clamp(2.75rem, 1.2rem + 5vw, 5.125rem);      /* 44 → 82 */
  --fs-h2: clamp(2.5rem, 1.25rem + 4.2vw, 5.125rem);     /* 40 → 82 (Figma: 82) */
  --fs-h3-lg: clamp(1.75rem, 1rem + 2.4vw, 3rem);       /* 28 → 48 — подзаголовок внутри крупного блока */
  --fs-h3: clamp(1.5rem, 1.1rem + 1.25vw, 2rem);        /* 24 → 32 (Figma: 32) */
  /* Заголовок на моношрифте (Fatal строчных не имеет): шаги, карточка ведущих.
     Один кегль с лидом, отличается только весом — правка 10.09. */
  --fs-mono-title: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);  /* 16 → 17 */
  --fs-h4: clamp(1.5rem, 1.25rem + 0.7vw, 1.75rem);     /* 24 → 28 (Fatal узкий — ниже читается плохо) */
  --fs-display-xl: clamp(2.25rem, 1.5rem + 2.2vw, 3rem); /* «ИТОГО 160 000 ₽» (Figma: 48) */
  --fs-stat: clamp(2.75rem, 5vw, 4.5rem);               /* 44 → 72 — цифры-показатели */
  --fs-lead: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);/* 15 → 17 */
  --fs-body: 0.9375rem;                                  /* 15 */
  --fs-small: 0.8125rem;                                 /* 13 */
  --fs-caption: 0.75rem;                                 /* 12 — минимум для web */
  --fs-nav: 0.75rem;                                     /* 12 — минимум по решению 08.09 */

  /* Межстрочные — по одной на роль кегля. Своих значений в блоках быть не должно:
     если нужен новый интерлиньяж, сначала решаем, новая это роль или нет (13.09). */
  --lh-display: 0.94;      /* Fatal 82/32 — h1, h2, h3 */
  --lh-display-lg: 0.85;   /* Fatal 48 — крупные подзаголовки и числа сметы */
  --lh-h4: 1.1;            /* Fatal 28 — заголовок карточки */
  --lh-title-mono: 1.3;    /* Fira Code 17 — заголовок без капса */
  --lh-body: 1.55;         /* основной текст, лиды, списки */
  --lh-compact: 1.4;       /* текст внутри плотных карточек: дела, ящики, чек-листы */
  --lh-caption: 1.5;       /* подписи 12px */
  --lh-ui: 1.2;            /* кнопки, бейджи, штампы — блоки фиксированной высоты */
  --lh-hand: 1.15;         /* рукописный HTC Hand */
  --lh-flat: 1;            /* однострочная «фурнитура»: логотип, бейджи, штамп, стрелки */

  --ls-caps: 0.08em;
  --ls-wide: 0.14em;
  /* Трекинг заголовков: Fatal узкий, буквы слипаются (разбор 07.09) */
  --ls-display-lg: 0.015em;   /* H1–H2 */
  --ls-display-md: 0.035em;   /* H3 */
  --ls-display-sm: 0.055em;   /* H4 и мелкие заголовки — тут слипается сильнее всего */

  /* ---------- Текстура бумаги ---------- */
  /* Волокно бумаги: тот же приём, что и .grain, но плотнее и мягче — кладётся
     фоновым слоем на .paper, .polaroid и светлые секции (решение 10.09). */
  --paper-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.11  0 0 0 0 0.10  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");

  /* ---------- Единица макета ---------- */
  /* 1u = 1px фрейма Figma (кадр 1440). Выше 1440 макет фиксируется и центрируется,
     ниже — сжимается пропорционально; шрифты не опускаются ниже 10px. */
  --u: min(1px, calc(100vw / 1440));

  /* ---------- Сетка и отступы ---------- */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3.75rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --section-y-sm: clamp(2.5rem, 5vw, 4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---------- Форма ---------- */
  --radius-0: 0;
  --radius-xs: 2px;
  --radius-sm: 5px;      /* кнопка — обе, светлая и тёмная (Figma: 5px) */
  --radius-md: 8px;
  --radius-pill: 999px;

  /* ---------- Тени ---------- */
  --shadow-paper: 4px 4px 16px rgba(0, 0, 0, 0.25);           /* лист на папке (Figma) */
  --shadow-paper-inset: inset 2px 4px 4px rgba(255, 255, 255, 0.25);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-polaroid: 0 12px 28px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-btn: 0 2px 2px rgba(0, 0, 0, 0.25);
  --shadow-btn-hover: 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-sticker: 2px 6px 14px rgba(0, 0, 0, 0.35);
  --shadow-pin: 0 3px 4px rgba(0, 0, 0, 0.45);

  /* ---------- Движение ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Всё движение замедлено вдвое относительно первой версии (правка 10.09):
     «сейчас очень быстро всё». Задержки reveal/stagger умножаются на --anim-k,
     чтобы не переписывать инлайновые --reveal-delay в разметке. */
  --anim-k: 2;
  --dur-fast: 320ms;
  --dur-base: 560ms;
  --dur-slow: 1200ms;
  --dur-reveal: 1600ms;

  /* ---------- Слои ---------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-sticky-cta: 120;
  --z-modal: 200;
  --z-toast: 300;
}