/* Токены. Единственное место в проекте, где допустимы сырые значения.
   Имена = имена в docs/design-system.md → Токены. Направление – тёмный блокнот в клетку с маркерными дудлами (референс от клиента).
   Десктоп – масштаб 0.75 от первой сборки (решение клиента: в браузере на 75 % смотрится лучше); мобильные значения – в @media внизу.
   Новое значение – сначала сюда и в базу, потом в правило. */
:root {
  /* Цвет: чёрный стол, графитовый лист, мел; три маркера закладок – лайм (главный акцент), маджента, голубой */
  --color-bg-page: #050505;
  --color-bg-sheet: #121212;
  --color-bg-dark: #050505;
  --color-bg-elevated: #1c1c1c;
  --color-fg: #f4f4ef;
  --color-fg-muted: #b9b9b2;
  --color-fg-on-dark: #f4f4ef;
  --color-fg-muted-on-dark: #b9b9b2;
  --color-ink: #070707;
  --color-lime: #b6f31f;
  --color-magenta: #ef45ea;
  --color-blue: #7399fc;
  --color-accent: var(--color-lime);
  --color-line: rgba(244, 244, 239, 0.16);

  /* Типографика: Permanent Marker – заголовки маркером от руки, как пометки на листе; Figtree – ярлыки закладок и текст.
     У маркера одно начертание (400): больший вес браузер нарисовал бы фальшивым жирным; трекинг 0 – отрицательный склеивает штрихи */
  --font-display: 'Permanent Marker', 'Comic Sans MS', cursive;
  --font-text: 'Figtree', system-ui, sans-serif;
  --fw-display: 400;
  --fw-text: 600;

  /* Шкала кеглей: классы в base.css ссылаются только сюда. Потолки display и title-m – ×0.75, наклон vw и минимум для мобильных прежние */
  --fs-display-xl: clamp(2.6rem, 7.4vw, 6rem);
  --fs-display-l: clamp(2.5rem, 5.5vw, 5.5rem);
  --fs-display-s: clamp(2.25rem, 4vw, 3rem);
  --fs-display-m: clamp(1.75rem, 3vw, 2.5rem);
  --fs-title-l: 1.75rem;
  --fs-title-m: 1.125rem;
  --fs-title-xxs: 1rem;
  --fs-body-l: 1.375rem;
  --fs-body-m: 1.125rem;
  --fs-body-s: 0.9375rem;
  --fs-body-xs: 0.8125rem;

  --lh-display: 1.05;
  --lh-title: 1.15;
  --lh-body: 1.45;
  --ls-display: 0;
  --ls-body: 0;

  /* Сетка */
  --container: 960px;
  --columns: 12;
  --gutter: 12px;
  --page-margin: 18px;
  --page-margin-mobile: 16px;

  /* Отступы: шкала, вертикальный ритм секций – --space-section */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-180: 180px;
  --space-section: var(--space-96);
  --space-section-mobile: var(--space-64);

  /* Радиусы: скругление есть только у верхних углов закладок – как у картонного разделителя */
  --radius-s: 4px;
  --radius-m: 10.5px;
  --radius-l: 20px;
  --radius-pill: 999px;

  /* Блокнот: полоса закладок над листом, спираль, клетка. Плитка бумаги 596 px = 24 клетки по 24.8 px */
  --tabs-h: 66px;
  --tab-pad-y: 12px;
  --tab-pad-x: 24px;
  --tab-tuck: 10px;
  --tab-pull: 8px;
  --tab-tilt: 7deg;
  --tab-persp: 195px;
  --tab-rot-lime: -1.2deg;
  --tab-rot-magenta: 0.6deg;
  --tab-rot-blue: 1.6deg;
  --tab-icon: 1.15em;
  --circle-pad-x: 0.45em;
  --circle-pad-y: 0.3em;
  --binding-w: 81px;
  --paper-size: 596px;
  --doodle-px: 0.75px;
  --doodle-turn-1: 28deg;
  --doodle-turn-2: -22deg;
  --doodle-turn-3: 160deg;
  --doodle-turn-4: -64deg;
  --hero-h: calc(100svh - var(--tabs-h));
  --section-min-h: 100svh;

  /* Projects: бумажные постеры на скотче, колажные стикеры поверх углов (концепт B) */
  --color-paper: #f4f4ef;
  --shadow-paper: 0 14px 30px rgba(0, 0, 0, 0.55);
  --poster-pad: 14px;
  --poster-col-offset: 140px;
  --tilt-poster-1: -1.6deg;
  --tilt-poster-2: 1.2deg;
  --tilt-poster-3: 0.8deg;
  --tilt-poster-4: -1deg;
  --tape-w: 34%;
  --tape-h: 30px;
  --tape-tilt: -4deg;
  --tape-alpha: 0.82;
  --tape-notch: 6px;
  --mark-pad: 0.12em;
  --underline-w: 2px;
  --underline-offset: 0.22em;
  --underline-w-hover: 0.5em;
  --underline-offset-hover: -0.38em;
  --link-icon: 0.9em;
  --sticker-k: 1;
  --sticker-globe: 120px;
  --sticker-bubble: 120px;
  --sticker-bang: 46px;
  --sticker-burst: 132px;
  --sticker-out: 30px;

  /* Help: бумажные билеты с цветным корешком (концепт C) и кнопка */
  --color-ink-soft: rgba(7, 7, 7, 0.4);
  --notch: 14px;
  --mask-aa: 0.5px;
  --perf-w: 2px;
  --tilt-ticket-1: -1.4deg;
  --tilt-ticket-2: 0.9deg;
  --tilt-ticket-3: -0.5deg;
  --tear: 2.5deg;
  --btn-pad-y: 14px;
  --btn-pad-x: 20px;
  --btn-icon: 1em;

  /* Contacts: линованное письмо поверх конверта, кнопка-марка (концепт A) */
  --color-rule: rgba(7, 7, 7, 0.16);
  /* Подсказка в поле письма: чернила 60 % на бумаге – контраст 5.2 : 1 */
  --color-placeholder: rgba(7, 7, 7, 0.6);
  --color-env-seam: rgba(7, 7, 7, 0.22);
  --color-field-focus: color-mix(in srgb, var(--color-lime) 35%, transparent);
  --letter-rule: 44px;
  --letter-margin: 150px;
  --letter-margin-line: 2px;
  --letter-pad-x: 28px;
  --letter-tilt: -1deg;
  --env-tilt: 3deg;
  --env-shift: 46px;
  --stamp-perf: 7px;
  --stamp-tilt: 4deg;
  --stamp-frame: 2px;
  --stamp-frame-gap: 10px;
  --stamp-pad-y: 18px;
  --stamp-pad-x: 26px;
  --contacts-arrow-tilt: -28deg;
  /* Contacts: иконки соцсетей в ряд, поле нажатия больше значка */
  --social-icon: 28px;
  --social-hit: 44px;

  /* Benefits: чек-лист с пометками маркером (концепт D). Квадрат и галочка – штрихи SVG, пометки – em от кегля пункта */
  --check-size: 52px;
  /* Сноска-звёздочка от руки (help: цена → примечание) – в em от кегля строки */
  --footnote-mark: 0.42em;
  --footnote-mark-note: 1.1em;
  --footnote-lift: 0.12em;
  --benefit-sticker-k: 1;
  --check-line: 2.5;
  --tick-line: 5;
  --mark-line: 3;
  --benefit-sticker-col: 140px;
  --benefit-measure: 34em;
  --benefit-ruler: 132px;
  --benefit-cursor: 70px;
  --benefit-bubble: 104px;
  --benefit-bolt: 64px;
  --tilt-benefit-1: -8deg;
  --tilt-benefit-2: 8deg;
  --tilt-benefit-3: -6deg;
  --tilt-benefit-4: 5deg;
  --ann-circle-x: 0.16em;
  --ann-circle-y: 0.22em;
  --ann-wave-y: 0.22em;
  --ann-wave-h: 0.32em;
  --ann-speed-gap: 0.12em;
  --ann-speed-w: 0.7em;
  --ann-speed-h: 0.75em;
  --ann-speed-room: 0.9em;

  /* Заголовки глав: полоска малярного скотча (концепт headings A) – цвет закладки секции или бумага */
  --title-tape-alpha: 0.92;
  --title-tape-tilt-1: -2deg;
  --title-tape-tilt-2: 1.5deg;
  --shadow-tape: 0 6px 10px rgba(0, 0, 0, 0.45);

  /* About: оборот почтовой открытки (концепт G) – картинка | оборот с марками клиента, текст на пунктирных строках, подпись */
  --color-pc-dot: rgba(7, 7, 7, 0.55);
  --color-pc-divider: rgba(7, 7, 7, 0.7);
  --shadow-stamp: 0 3px 4px rgba(0, 0, 0, 0.3);
  --pc-pad: 32px;
  --pc-tilt: -1.2deg;
  --pc-rule: 36px;
  --pc-dot-r: 0.9px;
  --pc-dot-fade: 1.3px;
  --pc-dot-step: 5px;
  --pc-dot-row: 2px;
  --pc-photo-w: 92%;
  --pc-stamp-w: 120px;
  --pc-stamp-overlap: -16px;
  --tilt-pc-stamp-1: -4deg;
  --tilt-pc-stamp-2: 3deg;
  --tilt-pc-stamp-3: -2deg;
  /* Бейдж-звезда на углу портрета */
  --pc-badge-w: 124px;
  --tilt-pc-badge: 8deg;
  --burst-icon: 24px;
  --tilt-pc-sign: -3deg;
  --pc-sign-line: 3px;
  --pc-sign-offset: 0.18em;

  /* Hero: подзаголовок, кнопки на тёмном листе, наклейки инструментов */
  --btn-line: 2px;
  --tool-size: 80px;
  --tool-radius: 24%;
  --tool-icon: 50%;
  --sticker-cut: 4px;
  --tilt-tool-1: -8deg;
  --tilt-tool-2: 6deg;
  --tilt-tool-3: -3deg;
  --tilt-tool-4: 10deg;

  /* Hero: рамка фокуса закладок, запас маски письма под выносные элементы, зачёркивание от руки */
  --focus-w: 0.06em;
  --ink-bleed: 0.25em;
  --strike-over: 0.08em;
  --strike-h: 0.55em;

  /* Движение: см. docs/motion.md */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.9, 0, 0.1, 1);
  --ease-overshoot: cubic-bezier(0.16, 0.03, 0.08, 1.55);
  --dur-150: 150ms;
  --dur-300: 300ms;
  --dur-600: 600ms;
  --dur-900: 900ms;
  /* Автозаполнение браузера: его фон (с !important) откладывается на сутки – по сути никогда не наступает */
  --autofill-hold: 86400s;
  --reveal-y: 18px;

  /* Слои */
  --z-scene: 0;
  --z-content: 1;
  --z-header: 10;
}

@media (max-width: 768px) {
  :root {
    --binding-w: 72px;
    --poster-pad: 10px;
    --tape-h: 24px;
    --sticker-k: 0.7;
    --letter-rule: 40px;
    --letter-margin: 0px;
    --letter-pad-x: 18px;
    /* Письмо на телефоне без наклона: iOS Safari рисует повёрнутые 1-px линейки без сглаживания – лесенкой. Наклон держит конверт */
    --letter-tilt: 0deg;
    --env-tilt: 1.2deg;
    --env-shift: 18px;
    --tool-size: 72px;
    --check-size: 40px;
    --benefit-sticker-k: 0.7;
    --pc-pad: 18px;
    --pc-tilt: -0.5deg;
    --pc-rule: 36px;
    --pc-photo-w: 70%;
    --pc-stamp-w: 118px;
    --pc-stamp-overlap: 12px;
    --pc-badge-w: 112px;
    /* Марка рядом с подписью внизу оборота – меньше, чтобы подпись шла в две строки */
    --pc-stamp-w: 88px;
  }
}

/* Мобильные – как в первой сборке: на 0.75 ярлыки закладок были бы 11 px */
@media (max-width: 500px) {
  :root {
    --tabs-h: 60px;
    --tab-pad-y: 16px;
    --tab-pad-x: 12px;
    --tab-pull: 6px;
    --tab-persp: 260px;
    --binding-w: 50px;
    --paper-size: 560px;
    --doodle-px: 0.55px;
    --fs-title-m: 0.9375rem;
    --fs-body-l: 1.125rem;
    --radius-m: 10px;
    --tool-size: 64px;
  }
}