/* Токены PDA Architecture, концепт A «Экспозиция». Единственное место в проекте, где допустимы сырые значения.
   Имена = имена в docs/design-system.md → Токены. Новое значение – сначала сюда и в базу, потом в правило. */
:root {
  /* Цвет: тёплый серый лист, чернила, одна тёмная поверхность; акцент-лазер только в сцене и линзе */
  --color-bg-page: #e4e2dd;
  --color-bg-sheet: #ecebe7;
  --color-bg-dark: #141413;
  --color-bg-elevated: #1f1f1d;
  --color-fg: #1a1a18;
  --color-fg-muted: #5f5e59;
  --color-fg-inverse: #f4f2ee;
  --color-fg-on-dark: #ecebe7;
  --color-fg-muted-on-dark: #a8a6a0;
  --color-accent: #ff5a2a;
  --color-line: rgba(26, 26, 24, 0.16);
  --color-line-on-dark: rgba(236, 235, 231, 0.18);
  --color-veil: rgba(20, 20, 19, 0.55);
  --color-veil-strong: rgba(20, 20, 19, 0.82);
  --color-veil-soft: rgba(20, 20, 19, 0.22);
  --color-veil-none: rgba(20, 20, 19, 0);

  /* Типографика: DM Sans для крупного, Archivo для текста и фактов */
  --font-display: "DM Sans", sans-serif;
  --font-text: "Archivo", sans-serif;
  --fw-display: 400;
  --fw-hero: 400;
  --fw-title: 500;
  --fw-text: 400;
  --stretch-label: 108%;

  /* Знак клиента «pda.archi» – как на pda.archi: Poppins 900, «archi» = 0.7 от «pda.», общая базовая линия */
  --font-logo: "Poppins", sans-serif;
  --fw-logo: 900;
  --fs-logo: 1.75rem;
  --logo-sub-ratio: 0.7;
  --fs-logo-mobile: 1.5rem;
  --fs-logo-footer: 3rem;

  --fs-display-xl: clamp(2.6rem, 10.4vw, 12rem);
  --fs-display-l: clamp(2.5rem, 5.6vw, 5.75rem);
  --fs-display-m: clamp(2.25rem, 3.6vw, 3.9rem);
  --fs-display-s: clamp(1.75rem, 2.7vw, 2.6rem);
  --fs-title-m: 1.3125rem;
  --fs-title-xxs: 0.9375rem;
  --fs-body-l: 1.25rem;
  --fs-body-m: 1.0625rem;
  --fs-body-s: 0.9375rem;

  --lh-hero: 0.86;
  --lh-display: 0.92;
  --lh-display-s: 1;
  --lh-title: 1.2;
  --lh-body: 1.45;
  --ls-hero: -0.05em;
  --ls-display: -0.04em;
  --ls-display-s: -0.03em;
  --ls-title: -0.01em;
  --ls-body: 0;

  /* Сетка: 12 колонок, поля и межколонник 20 – как у референса */
  --container: 1680px;
  --columns: 12;
  --gutter: 20px;
  --gutter-mobile: 12px;
  --page-margin: 20px;
  --page-margin-mobile: 16px;
  --header-h: 64px;
  --anchor-offset: 64px;

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

  /* Радиусы: прямые углы, как на чертеже */
  --radius-none: 0;
  --radius-round: 50%;

  /* Кадры */
  --aspect-tall: 4 / 5;
  --aspect-portrait: 3 / 4;
  --aspect-wide: 3 / 2;
  --aspect-pano: 16 / 10;
  --aspect-full: 16 / 9;
  --hover-zoom: 1.04;
  --lens-size: 280px;
  --lens-size-mobile: 180px;
  --float-range: 18px;
  --peek-w: 300px;
  --peek-h: 380px;
  --drawer-w: 820px;
  --arrow-size: 64px;
  --arrow-size-mobile: 48px;
  --arrow-disabled-opacity: 0.4;
  --stage-h: 100svh;
  --hero-h: 100svh;
  --line-strong: 2px;
  --field-h: 56px;
  --grow-from: 33%;
  --steps-w: 34rem;

  /* Движение: см. docs/motion.md */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.86, 0, 0.07, 1);
  --dur-150: 150ms;
  --dur-300: 300ms;
  --dur-600: 600ms;
  --dur-900: 900ms;
  --reveal-y: 24px;

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