/* =========================================================================
   ЮрГид — Design Tokens · v2 «SberPravo-стиль»
   Источник: design/DS-SBERPRAVO.md (реконструкция публичного интерфейса).
   Два слоя:
   1) КАНОНИЧЕСКИЕ токены ДС (--color-*, --space-*, --radius-*, .text-*) —
      контракт для новой вёрстки, имена из DS-SBERPRAVO.md §3.
   2) LEGACY-мост (--c-*, --fs-*, --sp-*, --r-*, --sh-*) — прежние имена,
      перенаправленные на новые значения: вся собранная вёрстка переодевается
      без правки разметки. Новые страницы пишутся на канонических именах.
   ========================================================================= */
:root {
  /* ---------- 1. КАНОН (DS-SBERPRAVO §3) ---------- */
  /* Typography (без лицензии SB Sans — Inter fallback по правилу ДС §4) */
  --font-ui: Inter, Roboto, "San Francisco", Arial, sans-serif;
  --font-display: Inter, Roboto, Arial, sans-serif;

  /* Core text */
  --color-text-primary: #11111b;
  --color-text-strong: #000000;
  --color-text-secondary: #353638;
  --color-text-muted: #5c5c67;
  --color-text-subtle: #a2a8b1;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.8);

  /* Brand and actions */
  --color-action-primary: #14a7a0;
  --color-action-primary-hover: #128f89;
  --color-link: #187adf;
  --color-cyan: #18eff2;
  --color-blue: #2d9ce6;
  --color-mint: #42e3b4;
  --color-rating: #fadb14;

  /* Light surfaces */
  --color-surface-canvas: #ffffff;
  --color-surface-header: #fafbfc;
  --color-surface-soft: #f8fafd;
  --color-surface-muted: #f5f7fa;
  --color-surface-subtle: #f2f5f7;
  --color-surface-chip: #f4f7f9;
  --color-surface-control: #f1f3f6;
  --color-surface-input: #e4eaf0;
  --color-border-soft: #d0d7dd;
  --color-border-card: #e9e9e9;

  /* Dark surfaces */
  --color-dark-navy: #001336;
  --color-dark-green: #03201c;
  --color-dark-blue-green: #153a49;
  --color-dark-teal: #21515a;
  --color-dark-slate: #333f49;

  /* Transparent surfaces */
  --color-glass: rgba(255, 255, 255, 0.10);
  --color-overlay-card: rgba(12, 49, 44, 0.40);
  --color-backdrop: rgba(0, 0, 0, 0.40);

  /* Gradients */
  --gradient-action: linear-gradient(90deg, #147595 0%, #13aaa1 51.31%, #147595 100%);
  --gradient-marketing: linear-gradient(270deg, #42e3b4 -17.86%, #2d9ce6 100%);
  --gradient-dark-panel: linear-gradient(223.74deg, #0d1320 0%, #3da9c5 105.413%);
  --gradient-image-overlay: linear-gradient(0deg, rgba(14,48,42,.80) 13.04%, rgba(14,48,42,.10) 82.27%);

  /* Spacing: 4px base */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px;
  --space-23: 92px; --space-30: 120px;

  /* Radius */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 100px;

  /* Shadows */
  --shadow-button: 0 2px 0 rgba(0, 0, 0, 0.02);
  --shadow-input: 0 4px 10px rgba(94, 172, 243, 0.15);
  --shadow-card-soft: 0 4px 20px rgba(65, 94, 250, 0.12);
  --shadow-card: 0 4px 40px rgba(65, 94, 250, 0.15);

  /* Layout */
  --container-max: 1200px;
  --container-pad-desktop: 32px;
  --container-pad-tablet: 24px;
  --container-pad-mobile: 16px;
  --content-max: 1136px;
  --article-column: 846px;
  --header-height: 52px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --ease-standard: ease-in-out;

  /* Warning (расширение ДС по правилу §25: вариант отсутствовал — расширяем систему) */
  --color-warning: #8a6d1a;
  --color-warning-soft: #fdf6e3;

  /* Error (DS §22) */
  --color-error: #d92d20;
  --color-error-soft: #fef3f2;

  /* ---------- 2. LEGACY-МОСТ (прежние имена → новые значения) ---------- */
  --c-primary:        var(--color-action-primary);
  --c-primary-hover:  var(--color-action-primary-hover);
  --c-primary-press:  #0f7a75;
  --c-primary-soft:   rgba(20, 167, 160, 0.08);
  --c-on-primary:     #ffffff;

  --c-accent:         var(--color-action-primary); /* акцент сведён к бирюзе: «бирюзовый как действие» */
  --c-accent-soft:    rgba(20, 167, 160, 0.10);

  --c-dark:           var(--color-dark-navy);
  --c-dark-2:         var(--color-dark-blue-green);
  --c-on-dark:        var(--color-text-on-dark);
  --c-on-dark-muted:  var(--color-text-on-dark-muted);
  --grad-dark:        linear-gradient(135deg, var(--color-dark-navy) 0%, var(--color-dark-blue-green) 100%);

  --c-ink:            var(--color-text-primary);
  --c-body:           var(--color-text-secondary);
  --c-muted:          var(--color-text-muted);
  --c-faint:          var(--color-text-subtle);
  --c-line:           var(--color-border-card);
  --c-line-strong:    var(--color-border-soft);
  --c-bg:             var(--color-surface-canvas);
  --c-surface:        var(--color-surface-muted);
  --c-surface-2:      var(--color-surface-control);
  --c-card:           #ffffff;

  --c-star:           var(--color-rating);
  --c-danger:         #d92d20; /* литерал: app.css алиасит --color-error на --c-danger, var() дал бы цикл */
  --c-danger-soft:    #fef3f2;
  --c-success:        var(--color-action-primary);

  --font-sans: var(--font-ui);
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --fs-eyebrow: 0.75rem;
  --fs-caption: 0.8125rem;             /* 13/16.9 caption */
  --fs-sm:      0.875rem;              /* 14/22 body-sm */
  --fs-base:    1rem;                  /* 16/24 body-md */
  --fs-lg:      1.125rem;              /* 18/26 body-lg */
  --fs-h3:      1.25rem;               /* 20/26 title-lg */
  --fs-h2:      clamp(1.75rem, 4vw, 2rem);   /* 28/34 → 32/41.6 section H2 */
  --fs-h1:      clamp(2rem, 5vw, 2.25rem);   /* 32/38 → 36/46.8 heading-xl */
  --lh-tight: 1.3; --lh-snug: 1.4; --lh-normal: 1.57; /* 22/14 ≈ 1.57 */
  --tracking-eyebrow: 0.06em;

  --r-sm: var(--radius-sm); --r-md: var(--radius-md);
  --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); --r-pill: var(--radius-pill);

  --sh-sm:   var(--shadow-button);
  --sh-card: var(--shadow-card-soft);
  --sh-pop:  var(--shadow-card);
  --ring:    0 0 0 2px rgba(20, 167, 160, 0.35);

  --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;

  --container: var(--container-max);
  --section-y: clamp(40px, 6vw, 64px); /* стандартная секция 48/64 (ДС §6) */
  --gutter: var(--container-pad-mobile);

  --ease: var(--ease-standard);
  --dur: var(--duration-fast);
}

@media (min-width: 768px)  { :root { --gutter: var(--container-pad-tablet); } }
@media (min-width: 992px)  { :root { --gutter: var(--container-pad-desktop); } }

/* ---------- Типографические роли ДС §5 (для новой вёрстки) ---------- */
.text-display-md { font: 600 40px/48px var(--font-ui); }
.text-heading-xl { font: 700 36px/46.8px var(--font-ui); }
.text-heading-lg { font: 600 32px/41.6px var(--font-ui); }
.text-heading-md { font: 600 28px/34px var(--font-ui); }
.text-heading-sm { font: 600 24px/31.2px var(--font-ui); }
.text-title-lg   { font: 600 20px/26px var(--font-ui); }
.text-title-md   { font: 600 18px/23.4px var(--font-ui); }
.text-body-lg    { font: 400 18px/26px var(--font-ui); }
.text-body-md    { font: 400 16px/24px var(--font-ui); }
.text-body-sm    { font: 400 14px/22px var(--font-ui); }
.text-label      { font: 600 14px/20px var(--font-ui); }
.text-caption    { font: 400 13px/16.9px var(--font-ui); }

/* ---- Базовые помощники (имена прежние, метрики ДС) ---- */
.yg-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.yg-section   { padding-block: var(--section-y); }
.yg-section--surface { background: var(--color-surface-muted); }
.yg-section--dark { background: var(--color-dark-navy); color: var(--color-text-on-dark); }

/* надзаголовок секции */
.yg-eyebrow {
  display: block; text-align: center;
  color: var(--color-action-primary);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.yg-section--dark .yg-eyebrow { color: var(--color-text-on-dark-muted); }

.yg-h2 { text-align: center; font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-text-primary); margin: 0 0 var(--sp-8); }
.yg-section--dark .yg-h2 { color: var(--color-text-on-dark); }

/* prefers-reduced-motion (ДС §21) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}