/* Метаплан — токены применения. Дополняет metaplan-colors.css, не заменяет его.
   Разделы 06 (функциональный цвет) и 07 (сетка, отступы, линии). Август 2026. */

:root {
  /* ── состояния: два новых цвета, оба только служебные ─────────────── */
  --mp-brick:        #9E3B28;  /* Кирпич — ошибка. Только интерфейс, не печать */
  --mp-brick-tint:   #EDDFDA;
  --mp-moss:         #4A6B4F;  /* Мох — успех, «є в наявності» */
  --mp-moss-text:    #3B5540;
  --mp-moss-tint:    #E3E5DE;
  --mp-brass-tint:   #F1E7D9;  /* «під замовлення», предупреждение */
  --mp-scrim:        rgba(22, 24, 26, 0.45);

  /* ── роли ─────────────────────────────────────────────────────────── */
  --mp-link:         var(--mp-brass-dark);
  --mp-link-hover:   var(--mp-graphite);
  --mp-link-rule:    var(--mp-edge);
  --mp-focus:        var(--mp-brass-dark);
  --mp-disabled:     var(--mp-haze);
  --mp-row-hover:    var(--mp-sand);
  --mp-table-head:   var(--mp-coal);

  /* на Графите те же роли инвертируются */
  --mp-link-on-dark:     var(--mp-brass);
  --mp-focus-on-dark:    var(--mp-brass);
  --mp-disabled-on-dark: var(--mp-steel);

  /* ── отступы: шаг 4, значений вне шкалы не существует ─────────────── */
  --mp-1:  4px;
  --mp-2:  8px;
  --mp-3:  12px;
  --mp-4:  16px;
  --mp-6:  24px;
  --mp-8:  32px;
  --mp-12: 48px;
  --mp-16: 64px;
  --mp-24: 96px;
  --mp-32: 128px;

  /* ── сетка ────────────────────────────────────────────────────────── */
  --mp-container: 1280px;
  --mp-gutter:    24px;
  --mp-margin:    32px;
  --mp-columns:   12;
  --mp-measure:   72ch;   /* лид — 60ch */

  /* ── линии и плоскость ────────────────────────────────────────────── */
  --mp-rule-hair:   1px;  /* Кромка — строки таблицы, границы карточек */
  --mp-rule:        2px;  /* Графит — границы секций, линейка под H2 */
  --mp-rule-accent: 4px;  /* Латунь — засечка длиной 64px, не на всю ширину */
  --mp-radius:      0;
  --mp-shadow:      none;

  /* ── уголки ───────────────────────────────────────────────────────── */
  /* плечо всегда берётся со шкалы отступов: --mp-8 на карточке и в вебе,
     --mp-16 на титуле A4, --mp-32 на обложке презентации */
  --mp-corner-arm:    32px;  /* = --mp-8 */
  --mp-corner-weight: 2px;
  --mp-corner-inset:  16px;

  /* ── интерактивные элементы ───────────────────────────────────────── */
  --mp-control-h: 48px;
  --mp-hit-min:   44px;
}

@media (max-width: 640px) {
  :root {
    --mp-margin: 20px;
    --mp-gutter: 16px;
    --mp-columns: 4;
    /* две верхние ступени опускаются на одну: секциям на телефоне нужно меньше воздуха.
       Побочный эффект: --mp-24 совпадает с --mp-16 (64px), а --mp-32 — с десктопным --mp-24.
       Это осознанно. Для секционных отступов брать --mp-24 и --mp-32 — они и «съезжают». */
    --mp-24: 64px;
    --mp-32: 96px;
  }
}

/* ── базовые состояния ──────────────────────────────────────────────── */

a {
  color: var(--mp-link);
  text-decoration: underline;
  text-decoration-color: var(--mp-link-rule);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--mp-link-hover);
  text-decoration-color: var(--mp-brass);
  text-decoration-thickness: 2px;
}
:focus { outline: none; }
:focus-visible {
  outline: var(--mp-rule) solid var(--mp-focus);
  outline-offset: 2px;
}
[disabled], .is-disabled {
  color: var(--mp-disabled);
  text-decoration: none;
  cursor: default;
}