/* Industrial Brutalist — токены и базовые примитивы.
   Спецификация: .specify/memory/design-system.md
   Подключать первым, до любых стилей компонентов. */

:root {
  /* --- Бетон --- */
  --ib-plaster:       #F2F0EC;
  --ib-concrete-100:  #E4E1DB;
  --ib-concrete-200:  #CBC7BF;
  --ib-concrete-400:  #8F8B83;
  --ib-steel:         #5A6066;
  --ib-ink:           #14130F;

  /* --- Сигналы (одинаковы в обеих темах) --- */
  --ib-hazard:        #FF5C00;
  --ib-caution:       #FFD400;
  --ib-alarm:         #C81400;
  --ib-signal:        #2F7A3E;

  /* --- Семантика --- */
  --ib-bg:            var(--ib-plaster);
  --ib-surface:       var(--ib-concrete-100);
  --ib-surface-alt:   var(--ib-concrete-200);
  --ib-text:          var(--ib-ink);
  --ib-text-muted:    var(--ib-steel);
  --ib-line:          var(--ib-ink);
  --ib-line-hair:     var(--ib-concrete-400);
  --ib-on-hazard:     var(--ib-ink);

  /* --- Шрифты --- */
  --ib-font-display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --ib-font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --ib-font-mono:    "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;

  /* --- Шкала кегля --- */
  --ib-size-3xs: 12px;
  --ib-size-2xs: 14px;
  --ib-size-xs:  16px;
  --ib-size-s:   20px;
  --ib-size-m:   28px;
  --ib-size-l:   40px;
  --ib-size-xl:  64px;
  --ib-size-2xl: 96px;

  /* --- Ритм 8px --- */
  --ib-space-1: 4px;
  --ib-space-2: 8px;
  --ib-space-3: 16px;
  --ib-space-4: 24px;
  --ib-space-5: 48px;
  --ib-space-6: 96px;

  /* --- Линии --- */
  --ib-rule-hair:   1px;
  --ib-rule:        2px;
  --ib-rule-heavy:  4px;
  --ib-rule-bearing: 8px;

  /* --- Плита (единственная разрешённая тень) --- */
  --ib-slab: 6px 6px 0 var(--ib-ink);

  /* --- Движение --- */
  --ib-motion: 100ms linear;
}

:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ib-bg:          #0E0E0C;
    --ib-surface:     #1A1A17;
    --ib-surface-alt: #26261F;
    --ib-text:        #EAE7E0;
    --ib-text-muted:  #9A968D;
    --ib-line:        #EAE7E0;
    --ib-line-hair:   #3A3A36;
    --ib-on-hazard:   #14130F;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ib-bg:          #0E0E0C;
  --ib-surface:     #1A1A17;
  --ib-surface-alt: #26261F;
  --ib-text:        #EAE7E0;
  --ib-text-muted:  #9A968D;
  --ib-line:        #EAE7E0;
  --ib-line-hair:   #3A3A36;
  --ib-on-hazard:   #14130F;
}

/* ============ База ============ */

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

body {
  margin: 0;
  background: var(--ib-bg);
  color: var(--ib-text);
  font: var(--ib-size-xs)/1.5 var(--ib-font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ib-font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin: 0 0 var(--ib-space-3);
}
h1 { font-size: var(--ib-size-xl); }
h2 { font-size: var(--ib-size-l); }
h3 { font-size: var(--ib-size-m); }
h4 { font-size: var(--ib-size-s); }

p { max-width: 68ch; margin: 0 0 var(--ib-space-3); }

/* ============ Примитивы ============ */

/* Штампованная метка: 01 / ДИАГНОСТИКА */
.ib-stamp {
  display: inline-block;
  padding: var(--ib-space-1) var(--ib-space-2);
  background: var(--ib-ink);
  color: var(--ib-plaster);
  font: var(--ib-size-3xs)/1 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ib-stamp--hazard { background: var(--ib-hazard); color: var(--ib-on-hazard); }

.ib-block {
  border: var(--ib-rule) solid var(--ib-line);
  background: var(--ib-surface);
  padding: var(--ib-space-4);
}
.ib-block + .ib-block { border-top-width: 0; }

.ib-btn {
  display: inline-block;
  padding: var(--ib-space-2) var(--ib-space-4);
  border: var(--ib-rule) solid var(--ib-line);
  background: transparent;
  color: var(--ib-text);
  font: var(--ib-size-2xs)/1.2 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--ib-motion), color var(--ib-motion);
}
.ib-btn:hover { background: var(--ib-ink); color: var(--ib-plaster); }
.ib-btn--primary {
  background: var(--ib-hazard);
  color: var(--ib-on-hazard);
  border-color: var(--ib-ink);
}
.ib-btn--primary:hover { background: var(--ib-ink); color: var(--ib-hazard); }
.ib-btn:active { transform: translate(2px, 2px); }
.ib-btn:focus-visible { outline: var(--ib-rule-heavy) solid var(--ib-hazard); outline-offset: 2px; }

.ib-field {
  width: 100%;
  padding: var(--ib-space-2);
  border: var(--ib-rule) solid var(--ib-line);
  background: transparent;
  color: var(--ib-text);
  font: var(--ib-size-xs)/1.4 var(--ib-font-body);
}
.ib-field:focus { outline: none; border-color: var(--ib-hazard); }
.ib-label {
  display: block;
  margin-bottom: var(--ib-space-1);
  font: var(--ib-size-3xs)/1 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ib-text-muted);
}

.ib-table { width: 100%; border-collapse: collapse; font-family: var(--ib-font-mono); font-size: var(--ib-size-2xs); }
.ib-table th {
  background: var(--ib-ink);
  color: var(--ib-plaster);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
}
.ib-table th, .ib-table td {
  border: var(--ib-rule-hair) solid var(--ib-line-hair);
  padding: var(--ib-space-2);
}
.ib-table tbody tr:nth-child(even) { background: var(--ib-surface-alt); }

/* Сегментированный прогресс */
.ib-progress { display: flex; gap: var(--ib-space-1); }
.ib-progress span {
  flex: 1;
  height: var(--ib-space-3);
  border: var(--ib-rule) solid var(--ib-line);
}
.ib-progress span[data-state="done"]    { background: var(--ib-ink); }
.ib-progress span[data-state="current"] { background: var(--ib-hazard); }

/* Полосы опасности по левому краю блока */
.ib-warn {
  border-left: var(--ib-space-3) solid transparent;
  border-image: repeating-linear-gradient(45deg,
    var(--ib-caution) 0 8px, var(--ib-ink) 8px 16px) 16;
  padding-left: var(--ib-space-3);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .ib-btn:active { transform: none; }
}