/* Токены. Единственное место в проекте, где допустимы сырые значения.
   Имена = имена в docs/design-system.md → Токены. Значения разобраны из концепта B (concepts/b.html, зафиксирован 2026-10-29).
   Новое значение – сначала сюда и в базу, потом в правило. */

/* Шрифты – локальные файлы (решение Насти): Onest – всё, Swanky and Moo Moo (кириллица) – только рукописные заметки */
@font-face { font-family: 'Onest'; src: url('../assets/fonts/Onest-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Swanky'; src: url('../assets/fonts/swanky-and-moo-moo.otf') format('opentype'); font-weight: 400; font-display: swap; }

:root {
  /* Цвет – палитра aardvarkbookclub.com, тёплые оттенки (решения Насти). Контраст – числом в базе */
  --color-bg-page: #FFFFFF;
  --color-bg-sheet: #FFDBFD;
  --color-bg-elevated: #FFFFFF;
  --color-fg: #3E3E3E;
  --color-fg-muted: #4A4B52;
  --color-fg-faint: rgba(22, 23, 27, 0.6);
  --color-fg-on-accent: #FFFFFF;
  --color-accent: #E0007A;
  --color-action: #3B308F;
  --color-decor: #FE5658;
  --color-line: rgba(22, 23, 27, 0.08);
  --color-line-strong: rgba(22, 23, 27, 0.28);
  --color-lang-off: rgba(22, 23, 27, 0.5);
  --color-lang-sep: rgba(22, 23, 27, 0.3);

  /* Цвета друзей: курсоры, обводки аватаров, плашки сообщений */
  --color-friend-dana: #FF9466;
  --color-friend-leo: #FFD24A;
  --color-friend-tess: #FD48F2;
  --color-friend-maya: #9982DE;
  --color-note: #FAED8F;
  --color-tape: rgba(255, 255, 255, 0.6);

  /* Голубой лист devices (как коробка aardvark, решение Насти) и нарисованная волна листов */
  --color-bg-sheet-blue: #A4F6F8;
  --color-bg-sheet-yellow: #FAED8F;
  --color-wave: rgba(255, 255, 255, 0.6);
  /* Устройства devices: белая рамка плоских экрана и телефона, тень */
  --shadow-device: 0 2px 4px rgba(22, 23, 27, 0.06), 0 24px 48px -20px rgba(22, 23, 27, 0.3), 0 60px 90px -50px rgba(22, 23, 27, 0.3);

  /* Карточки шагов «Как это работает» и колонки дней (секция how) */
  --color-step-1: #FAED8F;
  --color-step-2: #FF5C2A;
  --color-step-3: #7458CC;
  --color-step-4: #E0007A;
  --color-step-5: #FAED8F;
  --color-lane-1: #FFF3C4;
  --color-lane-2: #FFDBFD;
  --color-lane-3: #FFE1D3;
  --color-lane-4: #E8E0FF;
  --color-day: rgba(255, 255, 255, 0.8);

  /* Интерфейс Travoll в окнах (how, экран ноутбука devices): фон доски с точками, поля, статусы, карта */
  --color-board: #FAFAF8;
  --board-dots: radial-gradient(rgba(22, 23, 27, 0.12) 1px, transparent 1.2px);
  --board-dots-size: 18px;
  --color-chip: rgba(22, 23, 27, 0.06);
  --color-field: #F3F2EF;
  --color-placeholder: rgba(22, 23, 27, 0.45);
  --color-live: #2F9E5B;
  --color-live-dot: #3DBE6B;
  --color-done: #DFF5E6;
  --color-footer-line: rgba(255, 255, 255, 0.35);
  --color-decor-soft: rgba(254, 86, 88, 0.6);
  --color-map-water: #CFEAF0;
  --color-map-wave: #BFE1E8;
  --color-map-land: #F4F1E8;
  --color-map-green: #D9EDCF;
  --color-map-road: #E2DCCB;

  /* Стекло интерфейсных карточек */
  --color-glass: rgba(255, 255, 255, 0.58);
  --color-glass-edge: rgba(255, 255, 255, 0.85);
  --color-glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-filter: blur(20px) saturate(1.8);

  /* Тени */
  --shadow-card: 0 1px 2px rgba(22, 23, 27, 0.06), 0 10px 24px -10px rgba(22, 23, 27, 0.18), 0 30px 60px -30px rgba(22, 23, 27, 0.25);
  --shadow-lift: 0 2px 4px rgba(22, 23, 27, 0.06), 0 20px 40px -12px rgba(22, 23, 27, 0.28), 0 44px 80px -36px rgba(22, 23, 27, 0.3);
  --shadow-step: 0 -12px 34px -20px rgba(22, 23, 27, 0.3);
  --shadow-msg: 0 2px 8px -4px rgba(22, 23, 27, 0.2);
  --shadow-tab: 0 2px 6px -2px rgba(22, 23, 27, 0.25);
  --shadow-react: 0 6px 16px -6px rgba(22, 23, 27, 0.35);
  --shadow-avatar: 0 8px 18px -8px rgba(22, 23, 27, 0.45);
  --shadow-label: 0 4px 10px -4px rgba(22, 23, 27, 0.35);
  --shadow-tape: 0 1px 2px rgba(22, 23, 27, 0.08);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -10px rgba(59, 48, 143, 0.6), 0 2px 4px rgba(22, 23, 27, 0.08);
  --shadow-btn-hover: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 18px 34px -12px rgba(59, 48, 143, 0.7), 0 2px 4px rgba(22, 23, 27, 0.08);
  --drop-cursor: drop-shadow(0 2px 3px rgba(22, 23, 27, 0.25));
  --drop-sticker: drop-shadow(0 6px 10px rgba(22, 23, 27, 0.18));

  /* Фон: сетка квадратов с крестиками (закреплена на экране) и размытые пятна первого экрана */
  --grid-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100M0 0V100' stroke='rgba(22,23,27,.08)' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 0H2M0 -2V2M98 0H102M100 -2V2M-2 100H2M0 98V102M98 100H102M100 98V102' stroke='rgba(22,23,27,.4)' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --grid-cell: 25vw;
  --hero-glow:
    radial-gradient(30vw 26vw at 12% 22%, rgba(255, 210, 74, 0.55), transparent 70%),
    radial-gradient(26vw 24vw at 88% 18%, rgba(253, 72, 242, 0.28), transparent 70%),
    radial-gradient(28vw 24vw at 84% 78%, rgba(116, 88, 204, 0.26), transparent 70%),
    radial-gradient(30vw 26vw at 16% 82%, rgba(255, 148, 102, 0.38), transparent 70%),
    radial-gradient(26vw 22vw at 52% 104%, rgba(250, 237, 143, 0.6), transparent 70%);
  /* те же пятна по отдельности – для «воды» на первом экране (тянутся за мышью) */
  --blob-1: radial-gradient(closest-side, rgba(255, 210, 74, 0.55), transparent);
  --blob-2: radial-gradient(closest-side, rgba(253, 72, 242, 0.3), transparent);
  --blob-3: radial-gradient(closest-side, rgba(116, 88, 204, 0.28), transparent);
  --blob-4: radial-gradient(closest-side, rgba(255, 148, 102, 0.4), transparent);
  --blob-5: radial-gradient(closest-side, rgba(250, 237, 143, 0.6), transparent);
  /* вода гаснет к низу первого экрана – пятна не заходят на лист how (правка Насти) */
  --water-fade: linear-gradient(to bottom, #000 70%, transparent 100%);
  --blob-w: 34vw;
  --blob-h: 30vw;

  /* Типографика: Onest для всего (display = text), Swanky – только рукописные заметки */
  --font-display: 'Onest', system-ui, sans-serif;
  --font-text: 'Onest', system-ui, sans-serif;
  --font-hand: 'Swanky', 'Onest', cursive;

  /* Шкала кеглей: классы в base.css ссылаются только сюда. Одинаковый текст везде одного размера (правило Насти) */
  --fs-display-xl: clamp(40px, 6.2vw, 88px);
  --fs-display-l: clamp(32px, 3.6vw, 52px);
  --fs-title-m: 22px;
  --fs-title-xxs: 15px;
  --fs-body-l: 18px;
  --fs-body-l-mobile: 16px;
  --fs-label: 14px;
  --fs-body-s: 13px;
  --fs-hand: 22px;
  --fs-hand-l: 34px;
  --fs-hand-l-mobile: 24px;
  --fs-btn: 19px;
  --fs-avatar: 15px;

  --lh-display: 0.88;
  --lh-display-l: 0.92;
  --lh-title: 1.1;
  --lh-title-xxs: 1.25;
  --lh-body: 1.4;
  --lh-small: 1.3;
  --lh-tight: 1;
  --ls-display: -0.05em;
  --ls-title: -0.02em;
  --ls-body: -0.02em;
  --ls-label: -0.015em;
  --ls-page: -0.015em;
  --ls-btn: -0.01em;
  --fw-display: 800;
  --fw-title: 700;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Сетка */
  --container: 1440px;
  --columns: 12;
  --gutter: 24px;
  --gutter-mobile: 12px;
  --page-margin: 48px;
  --page-margin-mobile: 20px;

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

  /* Радиусы: карточка интерфейса 18 – как в продукте; лист 48 и карточки шагов 40 – «листы» aardvark; заметка 4 – бумажный стикер */
  --radius-s: 4px;
  --radius-m: 18px;
  --radius-window: 24px;
  --radius-l: 40px;
  --radius-xl: 48px;
  --radius-l-mobile: 28px;
  --radius-panel: 20px;
  --radius-invite: 22px;
  --radius-thumb: 12px;
  --radius-msg: 18px 18px 18px 6px;
  --radius-msg-me: 18px 18px 6px 18px;
  --radius-pill: 999px;
  --radius-label: 999px 999px 999px 4px;

  /* Размеры элементов */
  --control-h: 40px;
  --control-pad: 16px;
  --btn-pad-y: 19px;
  --btn-pad-x: 34px;
  --btn-pad-y-mobile: 18px;
  --btn-pad-x-mobile: 22px;
  --logo-w: 104px;
  --logo-w-mobile: 90px;
  --hero-card-w: 192px;
  --hero-card-w-l: clamp(192px, 16.875vw, 243px);
  --hero-field-h-mobile: 320px;
  --hero-field-top-mobile: 84px;
  --avatar: 44px;
  --avatar-mobile: 36px;
  --avatar-ring: 3px;
  --avatar-x: -16px;
  --avatar-y: -18px;
  --avatar-x-mobile: -10px;
  --avatar-y-mobile: -12px;
  --dot: 7px;
  --cursor-w: 18px;
  --cursor-h: 20px;
  --cursor-x: -28px;
  --cursor-y: -26px;
  --cursor-x-mobile: -14px;
  --cursor-y-mobile: -22px;
  --cursor-label-top: 14px;
  --cursor-label-pad: 5px 9px;
  --card-body-pad: 11px 13px 13px;
  --note-w: 168px;
  --note-pad: 13px 14px 11px;
  --note-x: -40px;
  --note-y: -30px;
  --tape-w: 46px;
  --tape-h: 18px;
  --tape-y: -9px;
  --sticker-h: 84px;
  --sticker-h-l: 96px;
  --sticker-h-mobile: 54px;
  --sticker-h-l-mobile: 62px;
  /* Стикеры на правом верхнем углу карточки: смещение вверх (y) и вправо (x) */
  --sticker-palm-y: -26px;
  --sticker-palm-x: -12px;
  --sticker-eiffel-y: -30px;
  --sticker-eiffel-x: -10px;
  --sticker-pisa-y: -34px;
  --sticker-pisa-x: -6px;
  --sticker-palm-y-mobile: -18px;
  --sticker-palm-x-mobile: -8px;
  --sticker-eiffel-y-mobile: -20px;
  --sticker-eiffel-x-mobile: -6px;
  --sticker-pisa-y-mobile: -22px;
  --sticker-pisa-x-mobile: -4px;
  --text-sub: 46ch;

  /* how: пин, карточки шагов, экраны интерфейса (рисуются в 760 px и уменьшаются zoom, js/main.js) */
  --how-pin: 3.2;
  --step-stack: 12px;
  --step-pad: 48px;
  --step-pad-mobile: 24px 20px;
  --step-pad-x-mobile: 20px;
  --step-txt-w: 32%;
  --step-h-still: 680px;
  --step-h-still-mobile: 720px;
  --vis-ui-w: 760px;
  --vis-y: 32px;
  --vis-x: 40px;
  --vis-w: 60%;
  --vis-y-mobile: 16px;
  --vis-x-mobile: 14px;
  --vis-h-mobile: 56%;
  /* Телефон: появления при входе в экран (docs/motion.md → «Телефон: появления») */
  --pop-scale: 0.9;
  --pop-x: 64px;
  /* верх листа – под закреплённой шапкой (60 px от края экрана) */
  --sheet-top: 72px;
  --how-pad: var(--sheet-top) 0 28px;
  --how-pad-mobile: var(--sheet-top) 0 14px;
  --how-pad-still: 64px 0;
  --ui-chip-h: 28px;
  --ui-chip-h-s: 26px;
  --ui-btn-h: 32px;
  --ui-react-h: 34px;
  --ui-voice-h: 44px;
  --ui-ask-h: 48px;
  --ui-icon: 32px;
  --ui-icon-s: 26px;
  --ui-icon-l: 36px;
  --ui-glyph: 16px;
  --ui-glyph-s: 9px;
  --ui-mic: 14px;
  --ui-dot: 8px;
  --avatar-s: 34px;
  --avatar-xs: 28px;
  --avatar-ring-s: 2px;
  --thumb: 52px;
  --invite-w: 400px;
  --route-w: 236px;
  --dash-w: 1.5px;
  --leg-w: 2px;

  /* devices: липкий лист и два плоских устройства. Всё от --dev-k (масштаб устройств по брейкпоинтам и высоте экрана) */
  --sheet-inset: 16px;
  --sheet-inset-mobile: 8px;
  --wave-w: 180px;
  --wave-w-mobile: 90px;
  --devices-track: 200svh;
  --dev-k: 1;
  --dev-scale-from: 0.02;
  --screen-w: calc(640px * var(--dev-k));
  --device-frame: calc(12px * var(--dev-k));
  --screen-radius: calc(28px * var(--dev-k));
  --screen-inner-radius: calc(16px * var(--dev-k));
  --screen-ui-w: 816px;
  --screen-ui-h: 510px;
  --screen-k: calc(0.755 * var(--dev-k));
  --phone-w: calc(180px * var(--dev-k));
  --phone-frame: calc(8px * var(--dev-k));
  --phone-radius: calc(36px * var(--dev-k));
  --phone-inner-radius: calc(28px * var(--dev-k));
  --phone-ui-w: 245px;
  --phone-ui-h: 515px;
  --phone-k: calc(0.669 * var(--dev-k));
  /* телефон выступает за правый и нижний край экрана */
  --phone-x-out: calc(var(--screen-w) * 0.12);
  --phone-y-out: calc(var(--screen-w) * 0.1);
  --side-text-w: 236px;
  --side-text-y: 48px;
  --store-icon: 24px;
  /* community: находки из рилсов и мини-доски типов поездок */
  --reel-ratio: 9 / 14;
  --reel-pad: 16px;
  --reel-shade: linear-gradient(to top, rgba(22, 23, 27, 0.78), rgba(22, 23, 27, 0.2) 45%, transparent 65%);
  --reel-w-mobile: 72%;
  --reels-w: 1120px;
  --trip-board-h: 62px;
  --trip-day-gap: 3px;
  --drop-w: 80px;
  --drop-h: 54px;
  --flyer-r: 12px;
  /* faq: окно чата и форма */
  --faq-w: 760px;
  --faq-input-h: 52px;
  --typing-y: -4px;
  /* подвал и меню */
  --footer-logo-w: min(560px, 40vw);
  --logo-white: brightness(0) invert(1);
  --social: 48px;
  --roll-y: 1.3em;
  --roll-step: 18ms;
  --qform-stack-w: 420px;
  --me-cursor-w: 30px;
  --preloader-line: 9%;
  --preloader-logo-w: min(320px, 50vw);
  /* final: лист раскрывается из карточки, коллаж слетается */
  --final-track: 320svh;
  --fly-w: 100vw;
  --fly-h: 100vh;
  --final-clip-x: 30%;
  --final-clip-y: 26%;
  --final-title-w: 980px;
  --fin-stamp: 180px;
  --fin-stamp-pad: 12px;
  /* reviews: лента марок, едет по горизонтали, пока лист стоит */
  --reviews-track: 420svh;
  --review-persp: 1600px;
  --postmark-w: 92px;
  --postmark-w-mobile: 64px;
  --postcard-lines: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(22, 23, 27, 0.1) 39px 40px);
  --sheet-w: calc(100vw - var(--sheet-inset) * 2);
  --review-w: 460px;
  --review-gap: 40px;
  --stamp-pad: 22px;
  --stamp-r: 9px;
  --stamp-step: 26px;
  --stamp-ratio: 4 / 3;
  --stamp-mask:
    radial-gradient(circle var(--stamp-r) at var(--stamp-r) var(--stamp-r), #0000 97%, #000) calc(var(--stamp-r) * -1) calc(var(--stamp-r) * -1) / var(--stamp-step) var(--stamp-step) round,
    linear-gradient(#000 0 0) var(--stamp-r) var(--stamp-r) / calc(100% - var(--stamp-r) * 2) calc(100% - var(--stamp-r) * 2) no-repeat;
  --arrow-w: 110px;

  /* Движение: см. 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-250: 250ms;
  --dur-300: 300ms;
  --dur-350: 350ms;
  --dur-600: 600ms;
  --dur-900: 900ms;
  --reveal-y: 24px;
  --lift-y: -2px;
  /* Покачивание карточек и маршрут курсоров (ambient, только при включённом движении) */
  --drift-x: 5px;
  --drift-x-back: -5px;
  --drift-y: -12px;
  --wander-a: -46px -22px;
  --wander-b: -14px -58px;
  --wander-c: 26px -18px;
  --wander-sm-a: -14px 6px;
  --wander-sm-b: 8px 10px;

  /* Слои */
  --z-scene: 0;
  --z-content: 1;
  --z-grid: 2;
  --z-section: 3;
  --z-hero: 4;
  --z-header: 30;
  --z-footer: 1;
  --z-preloader: 100;
  --z-cursor: 200;
}

/* Устройства devices меньше на узком и невысоком экране */
@media (max-width: 1279px), (max-height: 940px) {
  :root { --dev-k: 0.95; }
}
/* Ноутбук (≈ 1200 и низкий экран, решение Насти 2026-10-30): устройства и марки отзывов мельче, подписи к устройствам уже –
   текст не наезжает на экран, марки не залезают на заголовок «Отзывы» */
@media (max-width: 1365px), (max-height: 820px) {
  :root { --dev-k: 0.78; --side-text-w: 200px; --review-w: min(400px, 30vw, calc(100svh - 330px)); --review-gap: 32px; }
}
@media (max-width: 1279px) {
  :root { --dev-k: 0.7; --side-text-w: 190px; }
}
@media (max-width: 768px) {
  :root { --grid-cell: 50vw; --gutter: var(--gutter-mobile); --fin-stamp: 96px; --fin-stamp-pad: 7px; --final-clip-x: 16%; --final-clip-y: 22%; --review-w: 270px; --review-gap: 20px; --stamp-pad: 14px; --stamp-r: 7px; --stamp-step: 20px; --dev-k: 0.5; --wave-w: var(--wave-w-mobile); --sheet-inset: var(--sheet-inset-mobile); }
}
@media (max-width: 374px) {
  :root { --dev-k: 0.38; }
}