/* ============================================================
   Центрметиз — design tokens
   Источник: TSM/styles.css (handoff из Claude Design).
   В этом файле только токены (CSS custom properties) и подключение шрифтов.
   Раскладка/компоненты переезжают в bamd постранично, при перевёрстке.
   Бренд: зелёный #82b355, охра #e4a223. Контраст подтянут до WCAG AA.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Brand palette ------------------------------------------- */
  --brand-green: #82b355;          /* исходный бренд-зелёный */
  --brand-green-aa: #4f8131;       /* AA-passing для текста на белом */
  --brand-green-deep: #3d6a23;     /* hover / тёмный вариант */
  --brand-green-soft: #e7f1d6;     /* тонированная подложка */
  --brand-ochre: #e4a223;
  --brand-ochre-deep: #b87b07;
  --brand-ochre-soft: #fff1d6;
  --brand-dark: #1c1f2a;
  --brand-dark-2: #2b2e3c;
  --brand-muted: #47505f;

  /* Semantic surfaces --------------------------------------- */
  --surface: #ffffff;
  --surface-1: #fafaf9;
  --surface-2: #f4f4f2;
  --surface-3: #e9e8e5;
  --outline: #d8d6d2;
  --outline-soft: #e9e7e3;
  --on-surface: #1c1f2a;
  --on-surface-muted: #47505f;
  --on-surface-faded: #7a7e88;

  --danger: #c83a45;
  --danger-soft: #fbe6e8;
  --success: #2f7d31;
  --success-soft: #e1f0d8;
  --info: #1e5fbf;
  --info-soft: #e2ecfb;

  /* Type scale (M3 Expressive-leaning) ---------------------- */
  --font-sans: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --fs-display-l: 64px; --lh-display-l: 1.02;
  --fs-display-m: 48px; --lh-display-m: 1.05;
  --fs-headline-l: 36px; --lh-headline-l: 1.1;
  --fs-headline-m: 28px; --lh-headline-m: 1.15;
  --fs-title-l: 22px; --lh-title-l: 1.25;
  --fs-title-m: 17px; --lh-title-m: 1.3;
  --fs-body-l: 16px; --lh-body-l: 1.5;
  --fs-body-m: 14px; --lh-body-m: 1.45;
  --fs-label-l: 14px; --lh-label-l: 1.2;
  --fs-label-m: 12px; --lh-label-m: 1.2;

  /* Shape ---------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Spacing -------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Elevation ----------------------------------------------- */
  --el-1: 0 1px 0 rgba(28,31,42,.04), 0 1px 2px rgba(28,31,42,.04);
  --el-2: 0 2px 4px rgba(28,31,42,.06), 0 4px 12px rgba(28,31,42,.06);
  --el-3: 0 8px 24px rgba(28,31,42,.08), 0 2px 4px rgba(28,31,42,.04);

  --container: 1320px;
  --header-h: 132px;
}

/* Mobile adjustments via .vp-mobile (если будем использовать) */
.vp-mobile {
  --header-h: 112px;
  --fs-display-l: 40px;
  --fs-display-m: 32px;
  --fs-headline-l: 26px;
  --fs-headline-m: 22px;
}