/* primitives.css — примитивы Maximus DS, извлечённые ИЗ канона (Maximus DS — 12.06).
 * Скопировано 1:1 из design-system/primitives/primitives.css; изменён только путь @import.
 * Цвета/шрифты/радиусы/тени — только токены var(--…). v2.0 · 2026-06-13. */
@import url("tokens.css");

/* — Контейнер и секции — */
.container       { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.container--wide { max-width: 1440px; }
.section         { padding-block: 96px; }
.section--alt    { background: var(--bg-2); }
.divider         { border: 0; border-top: var(--bw-hair) solid var(--line); margin: 0; }

/* — Eyebrow (моно-надподпись) — */
.eyebrow { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  font-size: 12px; color: var(--t3); }

/* — Кнопки (канон: .btn-primary жёлтый, .btn-dark графит, .btn-ghost белый) — */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-ui); font-weight: 600; font-size: 15px; line-height: 1.2;
  padding: 11px 20px; border-radius: var(--r-md); border: var(--bw-strong) solid transparent;
  cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.btn:focus-visible { outline: var(--bw-strong) solid var(--ink); outline-offset: 2px; }
.btn[disabled]     { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--yellow); color: var(--ink); box-shadow: var(--sh-md); }
.btn-primary:hover { background: var(--yellow-deep); }
.btn-dark    { background: var(--ink); color: var(--card); }
.btn-dark:hover    { background: var(--graph); }
.btn-ghost   { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover   { border-color: var(--ink); }

/* — Карточки (канон: белый, 1px line, r-lg, padding 24-26) — */
.card        { background: var(--card); border: var(--bw-hair) solid var(--line); border-radius: var(--r-lg);
  padding: 24px; position: relative; overflow: hidden; transition: box-shadow var(--t) var(--ease); }
.card--hover:hover { box-shadow: var(--sh-md); }
.card__metric { font-family: var(--f-mega); font-weight: 400; font-size: 48px; line-height: 1; color: var(--ink); }

/* — Теги (канон: жёлтый/моно, r-sm или pill) — */
.tag { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-ui); font-weight: 600; font-size: 15px; padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--yellow); color: var(--ink); }
.tag--mono    { font-family: var(--f-mono); }
.tag--pill    { border-radius: 999px; }
.tag--outline { background: var(--card); color: var(--t2); border: var(--bw-hair) solid var(--line); }
.tag--ok      { background: var(--ok-bg);  color: var(--ok); }
.tag--bad     { background: var(--bad-bg); color: var(--bad); }

/* — Чип-свотч цвета (канон: высота 84, моно-подпись) — */
.chip { height: 84px; display: flex; align-items: flex-end; padding: 12px; border-radius: var(--r-md);
  font-family: var(--f-mono); font-size: 14px; font-weight: 600; }

/* — Сетки — */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

/* — Формы — */
.label { display: block; font-family: var(--f-ui); font-weight: 500; font-size: 13px; color: var(--t2); margin-bottom: 4px; }
.input { width: 100%; font-family: var(--f-ui); font-size: 16px; color: var(--t1);
  background: var(--card); border: var(--bw-hair) solid var(--line); border-radius: var(--r-md); padding: 12px 16px;
  transition: border-color var(--t) var(--ease); }
.input::placeholder        { color: var(--t3); }
.input:focus               { outline: none; border-color: var(--ink); }
.input[aria-invalid="true"]{ border-color: var(--bad); }

/* — Blueprint-подложка (сетка ≤15%) — */
.blueprint         { position: relative; }
.blueprint > *     { position: relative; z-index: 1; }
.blueprint::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; z-index: 0;
  background-image:
    linear-gradient(to right,  var(--grid) var(--bw-hair), transparent var(--bw-hair)),
    linear-gradient(to bottom, var(--grid) var(--bw-hair), transparent var(--bw-hair));
  background-size: 24px 24px; }