/* ==========================================================================
   Альтернативные направления дизайна.
   Подключается после site.css и переопределяет только токены —
   разметка и структура страниц не меняются.

   Переключение: /?theme=blueprint | industrial | heavy
   Без параметра работает базовая тема (графит + янтарь).
   ========================================================================== */

/* ==========================================================================
   BLUEPRINT — Swiss Modernism 2.0
   Строгая сетка, нулевые радиусы, вместо теней волосяные линии,
   чёрный текст на белом, единственный акцент — чертёжный синий.
   Подходит там, где решает точность и характеристики, а не эмоция.
   ========================================================================== */

:root[data-theme="blueprint"] {
  --ink-900: #0a0a0a;
  --ink-850: #101010;
  --ink-800: #161616;
  --ink-750: #1c1c1c;
  --ink-700: #262626;

  --paper: #ffffff;
  --paper-2: #f5f5f5;
  --paper-3: #ebebeb;
  --paper-4: #d6d6d6;

  --fg: #000000;
  --fg-2: #3a3a3a;
  --fg-3: #5e5e5e;
  --on-dark: #f5f5f5;
  --on-dark-2: #a8a8a8;
  --on-dark-3: #787878;

  --hair: color-mix(in srgb, #000 16%, transparent);
  --hair-2: color-mix(in srgb, #000 11%, transparent);
  --hair-dark: color-mix(in srgb, #fff 18%, transparent);
  --hair-dark-2: color-mix(in srgb, #fff 9%, transparent);

  /* Единственный акцент. Синий читается как чертёжный, а не «корпоративный». */
  --amber: #1d4ed8;
  --amber-600: #1740b4;
  --amber-300: #7ba0f5;
  --amber-wash: color-mix(in srgb, #1d4ed8 7%, transparent);
  --steel: #475569;

  /* Прямые углы: сетка важнее мягкости. */
  --r-sm: 0px;
  --r: 0px;
  --r-lg: 0px;
  --r-xl: 0px;

  /* Тени убраны. Иерархию держат линии и расстояния. */
  --lift-1: none;
  --lift-2: none;
  --lift-3: 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
  --lift-4: 0 0 0 1px color-mix(in srgb, #000 16%, transparent);
  --glow-amber: 0 0 0 3px color-mix(in srgb, #1d4ed8 22%, transparent);
}

/* Технические подписи набираются моноширинным — как в документации. */
:root[data-theme="blueprint"] .kicker { letter-spacing: .22em; }
:root[data-theme="blueprint"] .metric__k,
:root[data-theme="blueprint"] .trust__item b,
:root[data-theme="blueprint"] .step h3 {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .01em;
}
:root[data-theme="blueprint"] .display { letter-spacing: -.035em; font-weight: 650; }
:root[data-theme="blueprint"] .formcard,
:root[data-theme="blueprint"] .card,
:root[data-theme="blueprint"] .lot,
:root[data-theme="blueprint"] .tablewrap,
:root[data-theme="blueprint"] .versus {
  border: 1px solid var(--hair);
}
:root[data-theme="blueprint"] .card--hover:hover { transform: none; border-color: var(--fg); }
:root[data-theme="blueprint"] .lot:hover { transform: none; border-color: var(--fg); }
:root[data-theme="blueprint"] .btn:hover { transform: none; }
/* Угловые метки на фото убираем: со строгой сеткой они лишний шум. */
:root[data-theme="blueprint"] .frame::before,
:root[data-theme="blueprint"] .frame::after { display: none; }
:root[data-theme="blueprint"] .trust__ico { border-radius: 0; background: rgb(255 255 255 / .08); }
:root[data-theme="blueprint"] .logo__glyph { border-radius: 0; }

/* ==========================================================================
   INDUSTRIAL — сталь и сигнальный оранжевый
   Палитра из базы навыка для категории «строительство и техника»:
   серый сталь как основа, оранжевый только на действии.
   Оттенок оранжевого выбран с запасом по контрасту.
   ========================================================================== */

:root[data-theme="industrial"] {
  --ink-900: #0f172a;
  --ink-850: #16203a;
  --ink-800: #1c2947;
  --ink-750: #243354;
  --ink-700: #334155;
  --ink-600: #475569;

  --paper: #ffffff;
  --paper-2: #f8fafc;
  --paper-3: #ebf0f5;
  --paper-4: #dbe2ea;

  --fg: #0f172a;
  --fg-2: #334155;
  --fg-3: #64748b;
  --on-dark: #f1f5f9;
  --on-dark-2: #b6c2d1;
  --on-dark-3: #8494a8;

  --hair: color-mix(in srgb, #0f172a 12%, transparent);
  --hair-2: color-mix(in srgb, #0f172a 7%, transparent);

  --amber: #ea580c;
  --amber-600: #c2410c;
  --amber-300: #fb923c;
  --amber-wash: color-mix(in srgb, #ea580c 8%, transparent);
  --steel: #64748b;

  --r-sm: 3px;
  --r: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
}

/* Разметочная штриховка по верхнему краю тёмных полос — как на техпаспорте. */
:root[data-theme="industrial"] .band--dark::after,
:root[data-theme="industrial"] .trust::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: repeating-linear-gradient(
    90deg, var(--amber) 0 14px, transparent 14px 28px);
  opacity: .55;
}
:root[data-theme="industrial"] .trust { position: relative; }
:root[data-theme="industrial"] .metric__v,
:root[data-theme="industrial"] .crm-kpi b { font-weight: 750; }

/* ==========================================================================
   HEAVY — Exaggerated Minimalism, тёмная
   Огромная типографика, чистый чёрный, сигнальный жёлтый.
   Фотография работает на весь экран. Читается как бренд тяжёлой техники.
   ========================================================================== */

:root[data-theme="heavy"] {
  --ink-900: #000000;
  --ink-850: #060606;
  --ink-800: #0c0c0c;
  --ink-750: #131313;
  --ink-700: #1e1e1e;
  --ink-600: #2b2b2b;

  --paper: #ffffff;
  --paper-2: #f2f2f2;
  --paper-3: #e6e6e6;
  --paper-4: #cfcfcf;

  --fg: #000000;
  --fg-2: #333333;
  --fg-3: #595959;
  --on-dark: #ffffff;
  --on-dark-2: #b0b0b0;
  --on-dark-3: #7d7d7d;

  --hair: color-mix(in srgb, #000 14%, transparent);
  --hair-2: color-mix(in srgb, #000 8%, transparent);
  --hair-dark: color-mix(in srgb, #fff 16%, transparent);
  --hair-dark-2: color-mix(in srgb, #fff 8%, transparent);

  /* Сигнальный жёлтый с чёрным текстом: контраст 12:1, читается как техника. */
  --amber: #facc15;
  --amber-600: #eab308;
  --amber-300: #fde047;
  --amber-wash: color-mix(in srgb, #facc15 14%, transparent);
  --steel: #737373;

  --r-sm: 0px;
  --r: 0px;
  --r-lg: 0px;
  --r-xl: 0px;

  --lift-3: none;
  --lift-4: none;
  --glow-amber: 0 0 0 3px color-mix(in srgb, #facc15 35%, transparent);
}

/* На жёлтом текст обязан быть чёрным. */
:root[data-theme="heavy"] .btn { --fg-btn: #000; font-weight: 700; }
:root[data-theme="heavy"] .btn--line { --fg-btn: var(--fg); }
:root[data-theme="heavy"] .btn--line-dark { --fg-btn: var(--on-dark); }
:root[data-theme="heavy"] .btn--wa { --fg-btn: #fff; }
:root[data-theme="heavy"] .formcard__badge { color: #000; background: var(--amber); border-color: var(--amber); }

/* Типографика на максимум: заголовок как графический элемент. */
:root[data-theme="heavy"] .display {
  font-size: clamp(2.6rem, 9vw, 7.5rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .92;
  text-transform: uppercase;
}
:root[data-theme="heavy"] .h-xl {
  font-size: clamp(2rem, 5.2vw, 4rem);
  font-weight: 900;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
:root[data-theme="heavy"] .metric__v {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.05em;
}
:root[data-theme="heavy"] .secnum { -webkit-text-stroke-width: 2px; }
:root[data-theme="heavy"] .kicker { font-weight: 700; letter-spacing: .24em; }
:root[data-theme="heavy"] .band { padding-block: clamp(4.5rem, 12vw, 10rem); }
:root[data-theme="heavy"] .frame::before,
:root[data-theme="heavy"] .frame::after { border-width: 3px; border-radius: 0; }
:root[data-theme="heavy"] .logo__glyph { border-radius: 0; }
:root[data-theme="heavy"] .logo__word { text-transform: uppercase; font-weight: 900; letter-spacing: -.04em; }
:root[data-theme="heavy"] .vs-row--head { background: var(--amber); color: #000; }
:root[data-theme="heavy"] .vs-row--head .vs-us { color: #000; }

/* ==========================================================================
   Панель выбора темы. Показывается только при ?preview=1.
   ========================================================================== */

.themebar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .9rem;
  background: color-mix(in srgb, #0a0a0a 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgb(255 255 255 / .14);
  font-size: .82rem; color: #d4d4d4;
}
.themebar b { color: #fff; font-weight: 600; margin-right: .3rem; }
.themebar a {
  padding: .38rem .8rem; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .2); color: #e5e5e5;
  transition: all .18s ease;
}
.themebar a:hover { border-color: #fff; color: #fff; }
.themebar a[aria-current="true"] { background: #fff; border-color: #fff; color: #000; font-weight: 620; }
.themebar span { margin-left: auto; color: #8a8a8a; font-size: .76rem; }
@media (max-width: 780px) {
  .themebar { bottom: 4.6rem; }
  .themebar span { display: none; }
}