/* Токены PDA Architecture, направление «След» (концепция 3, выбрано 2026-10-06).
   Единственное место в проекте, где допустимы сырые значения. Имена = имена в docs/design-system.md → Токены.
   Новое значение – сначала сюда и в базу, потом в правило. */
:root {
  /* Цвет. Серый чертёжный лист, бумага на нём, тушь. Красный – условность чертежа «новое вмешательство»:
     линии, активные состояния, шов; текстом – только крупно (≥ 22 px) или на тёмном */
  --color-bg-page: #e6e6e2;
  --color-bg-sheet: #f4f4f0;
  --color-bg-dark: #151514;
  --color-bg-elevated: #22221f;
  --color-fg: #161616;
  --color-fg-soft: #5d5d59;            /* 6.0:1 на листе, 5.4:1 на сером – только display и title (≥ 22 px) */
  --color-fg-on-dark: #eeede8;
  --color-fg-soft-on-dark: #a3a39d;    /* 7.1:1 на туши – только ≥ 18 px */
  --color-red: #c4402a;
  --color-red-deep: #a8331f;           /* hover и мелкий красный текст: 5.9:1 на листе */
  --color-line: #a5a5a0;
  --color-line-soft: rgba(22, 22, 22, 0.14);
  --color-line-on-dark: rgba(238, 237, 232, 0.2);
  --color-construct: rgba(22, 22, 22, 0.28);
  --color-scrim: rgba(21, 21, 20, 0.55);
  --color-scrim-strong: rgba(21, 21, 20, 0.82);
  --color-accent: var(--color-red);

  /* Типографика. Red Hat Display (300 – крупное, 400–500 – заголовки) + Red Hat Text.
     Poppins 900 – только логотип pda.archi, как на текущем сайте клиента */
  --font-display: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Red Hat Text", "Helvetica Neue", Arial, sans-serif;
  --font-logo: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --fs-display-xl: clamp(3rem, 6.6vw, 7rem);       /* один H1 */
  --fs-display-l: clamp(2.5rem, 4.6vw, 4.5rem);
  --fs-display-m: clamp(1.875rem, 2.9vw, 2.75rem);
  --fs-statement: clamp(1.75rem, 3.7vw, 3.5rem);   /* абзац-утверждение со словами по прокрутке */
  --fs-logo-giant: 23.4vw;                          /* логотип в футере на всю ширину */
  --fs-logo: 1.75rem;                               /* «pda.» в шапке; «archi» – 0.7 от него, как у клиента */
  --fs-logo-tail: 0.7em;
  --fs-title-m: 1.375rem;
  --fs-title-xxs: 1rem;
  --fs-body-l: 1.25rem;
  --fs-body-m: 1.0625rem;
  --fs-body-s: 0.9375rem;

  --lh-display: 0.95;
  --lh-statement: 1.08;
  --lh-logo: 0.8;
  --lh-title: 1.2;
  --lh-body: 1.5;
  --ls-display: -0.035em;
  --ls-statement: -0.025em;
  --ls-logo: -0.02em;
  --ls-body: 0;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-logo: 900;

  /* Сетка: 1440 – контейнер 1440 с полями 40, 12 колонок по 95, gutter 20 */
  --container: 1440px;
  --columns: 12;
  --gutter: 20px;
  --page-margin: 40px;
  --page-margin-mobile: 16px;
  --gutter-mobile: 12px;

  /* Отступы */
  --space-2: 2px;
  --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-160: 160px;
  --space-section: var(--space-160);
  --space-section-mobile: var(--space-96);

  /* Размеры элементов */
  --h-screen: 100svh;
  --header-h: 72px;
  --mark: 14px;                 /* метка обреза листа */
  --seam-w: 2px;                /* красная линия шва */
  --seam-knob: 48px;
  --seam-min-h: 640px;
  --ex-chrome: 104px;
  --ex-stack-max: 860px;
  --ex-inset: 56px;             /* поле вокруг иллюстрации экспертизы внутри листа */
  --strip-h: 440px;             /* высота ленты фото «на стройке» */
  --gallery-h: 52svh;           /* высота кадров в панели проекта */           /* поля пина, поля листа и подпись – всё, что в экране экспертизы не картинка */          /* шов на весь экран не ниже этого на низких окнах */            /* хват шва – не меньше пальца */
  --progress-h: 2px;
  --step-h: 2px;
  --cursor-dot: 8px;
  --cursor-ring: 40px;
  --cursor-ring-hover: 88px;
  --lens: 300px;
  --lens-mobile: 180px;
  --preview-w: 320px;
  --drawer-w: min(760px, 100vw);
  --field-h: 56px;
  --axis-w: 1px;
  --line-w: 1px;
  --line-gap: 16px;             /* линии чертежа отстоят от края текста и картинок */
  --tilt: 4deg;                 /* наклон листа к курсору */
  --reveal-y: 24px;
  --nudge: 4px;                 /* сдвиг стрелки в кнопке при наведении */
  --lift: -6px;                 /* подъём листа при наведении */
  --drift-1: 0px;
  --drift-2: -120px;
  --drift-3: -40px;
  --drift-4: -200px;
  --measure: 44ch;              /* длина строки абзаца */
  --measure-wide: 60ch;
  --cell-min: 11rem;            /* минимальная ячейка штампа чертежа */

  /* Радиусы: чертёжный лист – прямые углы везде. Круг – только курсор, линза и точки на схемах */
  --radius-0: 0;
  --radius-round: 50%;

  /* Движение: см. docs/motion.md */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sharp: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-150: 150ms;
  --dur-300: 300ms;
  --dur-400: 400ms;
  --dur-600: 600ms;
  --dur-900: 900ms;

  /* Слои */
  --z-content: 1;
  --z-raised: 2;
  --z-header: 20;
  --z-menu: 30;
  --z-drawer: 40;
  --z-cursor: 50;
}

@media (max-width: 768px) {
  :root {
    --gutter: var(--gutter-mobile);
    --page-margin: var(--page-margin-mobile);
    --space-section: var(--space-section-mobile);
    --header-h: 60px;
    --fs-logo: 1.5rem;
    --fs-body-l: 1.125rem;
    --lens: var(--lens-mobile);
    --strip-h: 300px;
    --ex-inset: 24px;
    --gallery-h: 40svh;
  }
}

/* Анимируемая длина уголков листа (.marks): без @property custom property не переходит плавно */
@property --mark-live { syntax: '<length>'; inherits: false; initial-value: 14px; }