/* ============================================================
   scalvex.ai — Harbor tokens (design system 2.1.0), one source.

   Заведён 12.09.2026. До этого блок :root жил копией в каждой из
   двенадцати страниц и уже разошёлся (три версии на 12 файлов). Здесь —
   токены системы в том виде, в каком их ждёт новый макет главной, плюс
   семантические алиасы, на которые опираются существующие страницы
   (--strong, --muted, --line, --accent…), чтобы ничего не слетело.

   Правило: цвет, радиус, тень, длительность — только через var(--*).
   Хардкод hex вне этого файла — дефект (чеклист системы, п. 3).

   Что изменилось против прежнего :root на страницах:
   · --critical  #C0392B → #B8341F   (2.1.0: AA на critical-soft)
   · --faint объявлен декоративным (3.3:1) — не для читаемого текста;
     читаемая «серая» роль — --muted (slate-500, 5.6:1)
   · добавлены --control-border/-fill, --on-navy-*, --focus-*, --shadow-xs/-lg,
     --dur-fast/base/slow, --ease, --rhythm, --azure-50/100/200, --navy-soft, --line-medium
   ============================================================ */
:root {
  /* core */
  --ink: #0E1C30; --paper: #FBFCFE; --paper-pure: #FFFFFF; --paper-tint: #EEF3FA;
  --navy: #17407A; --navy-deep: #0F2A4E; --navy-700: #0B2240; --navy-900: #061730; --navy-soft: #E6EDF6;
  --azure: #2D6FB8; --azure-deep: #235C9E; --azure-bright: #5B97DD;
  --azure-50: #F0F5FC; --azure-100: #DCE8F7; --azure-200: #C6DAF2;
  --slate-50: #F2F5F9; --slate-100: #E4E9F1; --slate-200: #CDD5E1; --slate-300: #AAB4C4; --slate-400: #8590A3;
  --slate-500: #646E80; --slate-600: #4C5666; --slate-700: #38414F; --slate-800: #262D38; --slate-900: #161B23;

  /* state — state only, never decoration */
  --positive: #1F7A4D; --positive-soft: #E0F0E8; --positive-line: #BFE0CC;
  --warning: #B27A1E;  --warning-deep: #8A5E12; --warning-soft: #FBF1DF; --warning-line: #EBD5A6;
  --critical: #B8341F; --critical-soft: #F8E7E3; --critical-line: #EFC6C0;

  /* type */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* geometry */
  --radius-sm: 4px; --radius: 7px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(14,28,48,.06);
  --shadow-card: 0 1px 3px rgba(14,28,48,.08), 0 10px 26px -16px rgba(14,28,48,.22);
  --shadow-lg: 0 20px 50px -22px rgba(14,28,48,.30);
  --shadow-brand: 0 10px 24px -10px rgba(45,111,184,.45);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --ease: cubic-bezier(.22,.61,.36,1);
  --rhythm: 112px;

  /* controls & focus (2.1.0) */
  --control-border: #7F8BA0;            /* 3.4:1 on white — a control's only edge */
  --control-border-strong: var(--slate-500);
  --control-fill: var(--paper-pure);
  --focus-ring: var(--azure); --focus-halo: rgba(45,111,184,.22); --focus-offset: 3px;
  --azure-halo-bright: rgba(91,151,221,.28);

  /* on navy (2.1.0 ramp: every readable role ≥ 4.5:1 on navy-700) */
  --on-navy-text: #FBFCFE;
  --on-navy-muted: rgba(251,252,254,.74);
  --on-navy-faint: rgba(251,252,254,.58);
  --on-navy-line: rgba(251,252,254,.14);
  --on-navy-control-fill: rgba(251,252,254,.06);
  --on-navy-control-border: rgba(251,252,254,.42);
  --surface-glass: rgba(251,252,254,.86);
  --scrim: rgba(6,23,48,.55);
  --critical-on-navy: #F3A08F;            /* 2.1.0 --critical-text on navy, ≥ 7:1 */

  /* semantic aliases — what the existing pages already use */
  --bg: var(--paper); --surface: var(--paper-pure); --tint: var(--paper-tint);
  --strong: var(--ink); --heading: var(--navy); --body: var(--slate-800);
  --muted: var(--slate-500);
  --faint: var(--slate-400);            /* DECORATIVE ONLY: dividers-as-text, ghosted counts */
  --line: var(--slate-200); --line-soft: var(--slate-100); --line-medium: var(--slate-300);
  --ph: var(--slate-500);               /* placeholders are read: muted, not faint */
  --accent: var(--azure); --accent-press: var(--azure-deep);
  --on-accent: var(--paper-pure);
  --text-link: var(--azure); --text-link-hover: var(--azure-deep);
}
@media (max-width: 899.98px) { :root { --rhythm: 72px; } }
@media (max-width: 639.98px) { :root { --rhythm: 48px; } }

/* Focus — one ring for the whole site */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--focus-offset); box-shadow: 0 0 0 5px var(--focus-halo); }

/* ============================================================
   Components shared by every page. Class names are the site's own
   (.btn, .input) so no markup changes; the rules are the system's.
   ============================================================ */

/* Button — display face 600, min-height + padding (a two-line label grows the
   button, never truncates), radius-sm, shadow-xs. No hover lift (2.1.0: lifts
   only on elements that declare one). Sizes: sm 13/34 · md 15/44 · lg 17/52. */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.005em; line-height: 1.25;
  border: 1px solid transparent; border-radius: var(--radius-sm); padding: 11px 20px; min-height: 44px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  text-align: center; text-wrap: balance; box-shadow: var(--shadow-xs); -webkit-appearance: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn.btn--sm { padding: 7px 14px; font-size: 13px; min-height: 34px; }
.btn.btn--lg { padding: 13px 26px; font-size: 17px; min-height: 52px; }
/* primary = the accent action of the page (azure + brand glow) */
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-brand); }
.btn--primary:hover { background: var(--accent-press); border-color: var(--accent-press); }
/* navy = structural primary: header, interludes, anything that is not THE accent */
.btn--navy { background: var(--navy); color: var(--paper-pure); border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--control-border); box-shadow: none; }
.btn--outline:hover { border-color: var(--navy); background: var(--navy-soft); }
.btn--ghost { background: transparent; color: var(--muted); border-color: transparent; padding-inline: 6px; box-shadow: none; }
.btn--ghost:hover { color: var(--strong); }
/* in the sticky header the glow smears on the chrome edge */
.controls .btn--primary, .navdropdown .btn--primary { box-shadow: var(--shadow-xs); }

/* Field — a control's only edge reads ≥ 3:1 (--control-border), radius-sm,
   focus ring + halo. On navy the dark section re-maps --control-* itself. */
.input {
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--strong);
  background: var(--control-fill); border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  padding: 11px 14px; width: 100%; min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--ph); }
.input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-halo); }
textarea.input { resize: vertical; min-height: 92px; }
.field-label { font-family: var(--font-mono); font-size: 12px; text-transform: lowercase; letter-spacing: 0.06em; color: var(--muted); }