/* Единая визуальная система v1.0, 2026-09-21.
   Working recommendations; no mandatory wordmark. Values match brand.tokens.json.
   Install Inter separately; font files are not distributed in this kit. */
:root {
  --vs-primary: #0096AF;
  --vs-accent: #FED047;
  --vs-white: #FFFFFF;
  --vs-text: #17373F;
  --vs-muted: #5E5F5E;
  --vs-primary-strong: #007A8F;
  --vs-primary-hover: #006477;
  --vs-surface: #F5F8F8;
  --vs-primary-tint: #E6F5F7;
  --vs-accent-tint: #FFF6D8;
  --vs-border: #D6E5E8;
  --vs-input-border: #6A8C93;
  --vs-accent-hover: #F1BE25;
  --vs-font: 'Inter', 'Arial', sans-serif;
  --vs-font-mono: 'Consolas', 'Courier New', monospace;
  --vs-space-1: 4px; --vs-space-2: 8px; --vs-space-3: 16px;
  --vs-space-4: 24px; --vs-space-5: 32px; --vs-space-6: 48px;
  --vs-space-7: 64px; --vs-space-8: 96px;
  --vs-radius-button: 12px; --vs-radius-card: 16px; --vs-radius-panel: 24px;
  --vs-container: 1200px;
  color-scheme: light;
}
/* Apply .vs-page to opt in; importing tokens alone does not restyle unrelated pages. */
.vs-page, .vs-page * { box-sizing: border-box; }
.vs-page { margin:0; font-family:var(--vs-font); font-size:18px; line-height:1.55;
  color:var(--vs-text); background:var(--vs-white); font-variant-numeric:tabular-nums; }
.vs-page img { max-width:100%; height:auto; }
.vs-container { width:min(var(--vs-container), calc(100% - 48px)); margin-inline:auto; }
.vs-section { padding-block:var(--vs-space-8); }
.vs-grid { display:grid; gap:24px; }
.vs-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vs-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vs-page h1,.vs-page h2,.vs-page h3 { margin:0 0 24px; font-weight:700; line-height:1.14; color:var(--vs-text); }
.vs-page h1 { font-size:clamp(36px,4.8vw,56px); letter-spacing:-.035em; }
.vs-page h2 { font-size:clamp(28px,3.4vw,40px); letter-spacing:-.025em; }
.vs-page h3 { font-size:clamp(22px,2.4vw,28px); }
.vs-page p { margin:0 0 24px; max-width:68ch; }
.vs-eyebrow { display:block; font-size:14px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--vs-primary-strong); margin-bottom:16px; }
.vs-muted { color:var(--vs-muted); }
.vs-caption { font-size:14px; line-height:1.5; }
.vs-page a { color:var(--vs-primary-strong); text-underline-offset:3px; }
.vs-page :focus-visible { outline:3px solid var(--vs-text); outline-offset:4px; }
.vs-brand { display:flex; align-items:center; gap:16px; color:var(--vs-text); text-decoration:none; }
.vs-brand img { height:48px; width:auto; flex:none; }
.vs-brand-name { font-size:22px; font-weight:700; line-height:1.15; }
.vs-header { padding-block:20px; border-bottom:1px solid var(--vs-border); }
.vs-header .vs-container { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.vs-nav { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.vs-nav a { min-height:48px; display:inline-flex; align-items:center; font-size:16px; }
.vs-button { appearance:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; min-width:48px; padding:12px 24px; border:2px solid transparent;
  border-radius:var(--vs-radius-button); font-family:inherit; font-size:18px;
  font-weight:600; line-height:1.2; text-align:center; text-decoration:none!important;
  background:var(--vs-primary-strong); color:var(--vs-white)!important; cursor:pointer; }
.vs-button:hover { background:var(--vs-primary-hover); }
.vs-button--accent { background:var(--vs-accent); color:var(--vs-text)!important; }
.vs-button--accent:hover { background:var(--vs-accent-hover); }
.vs-button--secondary { background:var(--vs-white); border-color:var(--vs-primary-strong); color:var(--vs-primary-strong)!important; }
.vs-button--secondary:hover { background:var(--vs-primary-tint); }
.vs-button:disabled { cursor:not-allowed; background:var(--vs-surface); color:var(--vs-muted)!important; border-color:var(--vs-border); }
.vs-card { padding:32px; border:1px solid var(--vs-border); border-radius:var(--vs-radius-card); background:var(--vs-white); }
.vs-panel { padding:40px; border-radius:var(--vs-radius-panel); background:var(--vs-primary-tint); }
.vs-callout { padding:24px; background:var(--vs-accent-tint); border-left:4px solid var(--vs-accent); border-radius:0 12px 12px 0; }
.vs-field { display:grid; gap:8px; }
.vs-field label { font-size:16px; font-weight:600; }
.vs-field input,.vs-field select,.vs-field textarea { width:100%; min-height:48px; padding:12px 16px;
  border:1px solid var(--vs-input-border); border-radius:12px; color:var(--vs-text); background:var(--vs-white); font:inherit; }
.vs-field input::placeholder,.vs-field textarea::placeholder { color:var(--vs-muted); opacity:1; }
.vs-field small { font-size:14px; color:var(--vs-muted); }
.vs-table-wrap { overflow-x:auto; }
.vs-table { border-collapse:collapse; width:100%; text-align:left; }
.vs-table th { background:var(--vs-primary-tint); font-weight:600; }
.vs-table th,.vs-table td { padding:16px; border-bottom:1px solid var(--vs-border); }
.vs-table tr[data-highlight] { background:var(--vs-accent-tint); }
.vs-footer { padding:32px 0; border-top:1px solid var(--vs-border); color:var(--vs-muted); font-size:14px; }
@media (max-width:760px) {
  .vs-section { padding-block:56px; }
  .vs-grid-2,.vs-grid-3 { grid-template-columns:1fr; }
  .vs-card,.vs-panel { padding:24px; }
  .vs-header .vs-container { align-items:flex-start; flex-direction:column; gap:12px; }
  .vs-nav { gap:16px; }
}
@media (max-width:360px) { .vs-container { width:calc(100% - 32px); } }
@media (prefers-reduced-motion:reduce) { .vs-page *, .vs-page *::before, .vs-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media print { .vs-page { background:white; color:#17373F; } .vs-section { padding-block:24px; } .vs-nav { display:none; } }