/**
 * Siarem brand tokens — канон (согласовано: A · Ledger, 2026-09-12)
 *
 * Wordmark: Siarem
 * UI: IBM Plex Sans (SIL OFL)
 * Mono: IBM Plex Mono (SIL OFL)
 * Brand: #0B3A6E · CTA/signal: #C2410C
 */

:root {
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --bg: #f3f4f6;
  --bg-elev: #ffffff;
  --ink: #12141a;
  --ink-muted: #5c6370;
  --line: #d8dce3;

  --brand: #0b3a6e;
  --brand-press: #082a52;
  --signal: #c2410c;
  --signal-press: #9a3412;
  --ok: #1b7f4e;
  --danger: #b42318;

  --radius: 2px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --logo-weight: 600;
  --logo-tracking: -0.02em;

  /* Form tips / validation (RU layer — see ru-form-hints.js). Canon tokens. */
  --tip-bg: #0a1628;
  --tip-ink: #f3f4f6;
  --tip-danger: #b42318;
  --tip-ok: #1b7f4e;
  --tip-radius: 2px;
  --tip-shadow: 0 8px 24px color-mix(in srgb, #0a1628 28%, transparent);
  --tip-font: var(--font-sans);
  --tip-size: 0.8125rem;
  --tip-pad-y: 0.5rem;
  --tip-pad-x: 0.7rem;
  --tip-max: 18rem;
  --tip-z: 70;
  --tip-gap: 0.5rem;
  --tip-edge: 0.625rem;
  --tip-arrow-x: 50%;
}

.field-hint {
  display: block;
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.35;
}
.field-error {
  display: none;
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--tip-danger);
  line-height: 1.35;
}
.field-error.is-on { display: block; }
.form-row.is-invalid input,
.form-row.is-invalid textarea,
.form-row.is-invalid select,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--tip-danger) !important;
}
.siarem-tip {
  position: fixed;
  z-index: calc(var(--tip-z) + 10);
  box-sizing: border-box;
  width: max-content;
  max-width: min(var(--tip-max), calc(100vw - 1.25rem));
  padding: var(--tip-pad-y) var(--tip-pad-x);
  background: var(--tip-bg);
  color: var(--tip-ink);
  font: 500 var(--tip-size) / 1.4 var(--tip-font);
  border-radius: var(--tip-radius);
  box-shadow: var(--tip-shadow);
  pointer-events: none;
  letter-spacing: 0.01em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.2rem);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}
.siarem-tip.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.siarem-tip.is-ok {
  background: var(--tip-ok);
  color: #fff;
}
.siarem-tip::after {
  content: "";
  position: absolute;
  left: var(--tip-arrow-x);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: inherit;
  transform: rotate(45deg);
}
.siarem-tip.is-above::after { bottom: -4px; top: auto; }
.siarem-tip.is-below::after { top: -4px; bottom: auto; }
[data-tip] { position: relative; }
html.js-tips [data-tip]:hover::after,
html.js-tips [data-tip]:focus-visible::after,
html.js-tips [data-tip].is-tip-on::after,
html.js-tips [data-tip].is-copied::after {
  content: none !important;
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .siarem-tip { transition: none; }
}

/* Google Fonts (подключать в HTML):
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
*/