/* ============================================================
   ЦЕХ 360 — Дизайн-система · CSS-токены и компоненты
   Версия 1.0 · июль 2026
   Подключение: <link rel="stylesheet" href="tsekh360.css">
   Шрифт: Inter (Google Fonts) — подключите отдельно:
   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700
   ============================================================ */

/* ---------- 1. ТОКЕНЫ (:root) ---------- */
:root {
  /* --- Акцент (константа #FC4000) --- */
  --accent:            #FC4000;
  --accent-hover:      #E03600;
  --accent-active:     #C42F00;
  --accent-soft:       #FFEDE6;   /* tint-фон */
  --accent-border:     #FFD4C4;
  --accent-disabled:   #F3C3B0;
  --on-accent:         #FFFFFF;

  /* --- Нейтральная шкала (тёплый серый) --- */
  --bg:                #FCFBFA;   /* фон страницы */
  --surface:           #FFFFFF;   /* карточки */
  --surface-2:         #F7F5F3;   /* вложенные поверхности */
  --border:            #ECE8E4;   /* стандартная граница */
  --border-strong:     #DDD8D2;   /* контраст / hover */
  --border-subtle:     #F1EEEA;   /* разделители внутри карточек */
  --text-primary:      #1A1715;
  --text-secondary:    #57514C;
  --text-muted:        #8A837D;
  --text-faint:        #C4BEB7;   /* нумерация, отключённое */

  /* --- Тёмная поверхность (графит) --- */
  --graphite:          #201D1B;
  --graphite-2:        #2A2724;   /* карточка на графите */
  --graphite-border:   #3A3532;
  --on-graphite:       #F5F2EF;
  --on-graphite-muted: #B8B0A8;
  --accent-on-dark:    #FF7A4D;   /* акцент на тёмном фоне */

  /* --- Семантика (статусы) --- */
  --success:      #1E9E5A;  --success-soft:  #E5F5EC;  --success-border:  #C9EAD6;
  --warning:      #E8A21A;  --warning-soft:  #FDF3DE;  --warning-border:  #F5E4BE;
  --error:        #D42D2D;  --error-soft:    #FBE9E7;  --error-border:    #F3CDC9;
  --info:         #2563C9;  --info-soft:     #E9EFFB;  --info-border:     #CCDCF5;
  /* Примечание: --error (#D42D2D) НАМЕРЕННО отличается от --accent.
     Акцент никогда не означает «ошибку». */

  /* --- Пастельные заливки bento-карточек --- */
  --fill-peach:  linear-gradient(135deg, #FFF0E8, #FFE3D3);
  --fill-mint:   linear-gradient(135deg, #EAF7EF, #DCF0E4);
  --fill-sky:    linear-gradient(135deg, #EAF1FB, #DCE9F7);
  --fill-lilac:  linear-gradient(135deg, #F0ECFA, #E6DEF5);
  --fill-sand:   linear-gradient(135deg, #F8F6F3, #EFEBE6);
  /* границы под заливки */
  --fill-peach-border: #F4E2D6;
  --fill-mint-border:  #D2E9DB;
  --fill-sky-border:   #CFDFF2;
  --fill-lilac-border: #DBCFF0;
  --fill-sand-border:  #E4DFD9;

  /* --- AI-язык (иридесцент) --- */
  --ai-gradient:      linear-gradient(120deg, #7B4DD6, #C44DB8 45%, #FC4000);
  --ai-gradient-soft: linear-gradient(120deg, #F3ECFC, #FCEFEA);
  --ai-surface:       #1B1626;
  --ai-violet:        #7B4DD6;
  --ai-violet-light:  #E4B3FF;
  --ai-text:          #EBDDFF;
  --ai-glow:          0 20px 48px -16px rgba(123,77,214,.4);

  /* --- Типографика --- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: 56px;  --lh-display: 1.05;  --ls-display: -0.03em;
  --fs-h1:      48px;  --lh-h1:      1.1;   --ls-h1:      -0.02em;
  --fs-h2:      36px;  --lh-h2:      1.15;  --ls-h2:      -0.02em;
  --fs-h3:      24px;  --lh-h3:      1.3;   --ls-h3:      -0.01em;
  --fs-body-lg: 20px;  --lh-body-lg: 1.55;
  --fs-body:    16px;  --lh-body:    1.6;
  --fs-small:   14px;  --lh-small:   1.5;
  --fs-caption: 13px;  --lh-caption: 1.4;
  --fs-metric:  60px;  --lh-metric:  0.95;  --ls-metric:  -0.03em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;   /* заголовки — semibold, НЕ bold */

  /* --- Спейсинг (база 4px) --- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* --- Радиусы --- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 999px;

  /* --- Тени --- */
  --shadow-xs:    0 1px 2px rgba(26,23,21,.06);
  --shadow-sm:    0 2px 8px rgba(26,23,21,.07);
  --shadow-md:    0 8px 24px -6px rgba(26,23,21,.12);
  --shadow-lg:    0 20px 48px -14px rgba(26,23,21,.18);   /* «парящая» */
  --shadow-float: 0 24px 56px -18px rgba(26,23,21,.24);   /* фрагмент над фоном */
  --shadow-accent: 0 10px 26px -8px rgba(252,64,0,.5);    /* accent glow */
}

/* ---------- 2. БАЗА ---------- */
.tsekh {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.tsekh ::selection { background: var(--accent-border); }

/* ---------- 3. ТИПОГРАФИКА ---------- */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.t-h1      { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-semibold); }
.t-h2      { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-semibold); }
.t-h3      { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-regular); }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.t-small   { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.t-eyebrow { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.t-muted     { color: var(--text-muted); }
.t-secondary { color: var(--text-secondary); }

/* ---------- 4. КНОПКИ ---------- */
.btn {
  font-family: inherit; font-weight: var(--fw-semibold); font-size: 15px;
  border-radius: var(--radius-md); padding: 11px 20px; cursor: pointer;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, box-shadow .15s, transform .05s; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--sm { font-size: 13px; padding: 7px 14px; border-radius: var(--radius-sm); }
.btn--lg { font-size: 17px; padding: 15px 28px; border-radius: 12px; }
.btn--icon { padding: 0; width: 44px; height: 44px; justify-content: center; }

.btn--primary { color: var(--on-accent); background: var(--accent); box-shadow: var(--shadow-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); }
.btn--primary:disabled { background: var(--accent-disabled); box-shadow: none; cursor: not-allowed; }

.btn--secondary { color: var(--text-primary); background: var(--surface); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn--secondary:active { background: #EFEBE6; }
.btn--secondary:disabled { color: var(--text-faint); border-color: var(--border); cursor: not-allowed; }

.btn--ghost { color: var(--text-secondary); background: transparent; padding: 10px 16px; }
.btn--ghost:hover { color: var(--text-primary); background: var(--surface-2); }
.btn--ghost:active { background: #EFEBE6; }
.btn--ghost:disabled { color: var(--text-faint); cursor: not-allowed; }

/* AI-кнопка */
.btn--ai { color: #fff; background: linear-gradient(120deg,#8B5CF6,#FC4000); border: none; box-shadow: 0 12px 30px -10px rgba(139,92,246,.5); }

/* ---------- 5. КАРТОЧКИ ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
}

/* Bento-карточка с пастельной заливкой */
.bento {
  border-radius: var(--radius-xl); padding: var(--space-8);
  border: 1px solid var(--fill-sand-border);
}
.bento--peach { background: var(--fill-peach); border-color: var(--fill-peach-border); }
.bento--mint  { background: var(--fill-mint);  border-color: var(--fill-mint-border); }
.bento--sky   { background: var(--fill-sky);   border-color: var(--fill-sky-border); }
.bento--lilac { background: var(--fill-lilac); border-color: var(--fill-lilac-border); }
.bento--sand  { background: var(--fill-sand);  border-color: var(--fill-sand-border); }
.bento--wide { grid-column: span 2; }

/* ---------- 6. РАМКА ДЛЯ UI-ФРАГМЕНТА (главный компонент) ---------- */
/* Контейнер для ВЫРЕЗАННОГО куска интерфейса — не полного экрана. */
.frame {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
  overflow: hidden;
}
.frame__bar {           /* лёгкий top-bar (по желанию) */
  display: flex; gap: 6px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--border-subtle);
  background: var(--bg); font-size: 11px; color: var(--text-muted);
}
.frame__dot { width: 9px; height: 9px; border-radius: 50%; background: #E4DFD9; }
.frame__body { padding: 18px; }
.frame--bare { }        /* без top-bar — просто убрать .frame__bar */

/* Стопка из двух фрагментов внахлёст */
.frame-stack { position: relative; }
.frame-stack .frame { position: absolute; }

/* ---------- 7. ПЛАВАЮЩИЕ МИНИ-ЭЛЕМЕНТЫ (обрамление hero) ---------- */
.float-badge {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 14px 32px -10px rgba(26,23,21,.22);
  padding: 10px 14px; display: inline-flex; align-items: center; gap: 9px;
}
.float-badge__metric { font-family: var(--font-mono); font-size: 22px; font-weight: var(--fw-semibold); color: var(--accent); line-height: 1.1; }

/* ---------- 8. БЕЙДЖИ / ЧИПЫ ---------- */
.badge {
  font-size: 13px; font-weight: var(--fw-semibold); border-radius: var(--radius-full);
  padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent;
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--work     { color: var(--info);    background: var(--info-soft);    border-color: var(--info-border); }
.badge--done     { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.badge--overdue  { color: var(--error);   background: var(--error-soft);   border-color: var(--error-border); }
.badge--waiting  { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }
.badge--new      { color: var(--text-muted); background: var(--surface-2); border-color: var(--border-strong); }
.badge--attention{ color: var(--accent-active); background: var(--accent-soft); border-color: var(--accent-border); } /* акцент = «требует внимания» */

.chip {
  font-size: 13px; font-weight: var(--fw-medium); color: var(--text-primary);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-full); padding: 6px 14px;
}
.chip--active { color: #fff; background: var(--text-primary); border-color: var(--text-primary); }
.tag {
  font-size: 12px; color: var(--text-secondary); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px;
}
.tag--popular { color: var(--accent-active); background: var(--accent-soft); border-color: var(--accent-border); font-weight: var(--fw-semibold); }

/* ---------- 9. КРУПНАЯ МЕТРИКА ---------- */
.metric__value {
  font-family: var(--font-mono); font-size: var(--fs-metric);
  line-height: var(--lh-metric); letter-spacing: var(--ls-metric);
  font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.metric__value--accent { color: var(--accent); }
.metric__label { font-size: 14px; color: var(--text-secondary); margin-top: 12px; line-height: 1.4; }
/* на графите: обернуть в .on-graphite и использовать --accent-on-dark для %-суффикса */

/* ---------- 10. ПОЛЯ ВВОДА ---------- */
.field-label { font-size: 13px; font-weight: var(--fw-medium); color: var(--text-secondary); display: block; margin-bottom: 6px; }
.input {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--text-primary);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 11px 14px; outline: none; transition: border .15s, box-shadow .15s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(252,64,0,.14); }
.input:disabled { color: var(--text-muted); background: var(--surface-2); border-color: var(--border); }

/* ---------- 11. НАВИГАЦИЯ ---------- */
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 9px; color: var(--text-secondary); font-size: 14px; font-weight: var(--fw-medium); text-decoration: none;
}
.nav__item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav__item--active { background: var(--accent-soft); color: var(--accent-active); font-weight: var(--fw-semibold); }

.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.segmented__item { font-size: 13px; font-weight: var(--fw-medium); color: var(--text-muted); padding: 6px 14px; border-radius: 7px; cursor: pointer; }
.segmented__item--active { color: var(--text-primary); background: var(--surface); box-shadow: var(--shadow-xs); font-weight: var(--fw-semibold); }

/* ---------- 12. ТАБЛИЦА ---------- */
.table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.table__head { background: var(--bg); border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.table__row { border-top: 1px solid var(--border-subtle); align-items: center; font-size: 14px; }
.table__row:nth-child(even) { background: var(--bg); }
.table__cell { padding: 14px 18px; }

/* ---------- 13. АККОРДЕОН ---------- */
.accordion { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.accordion__item { padding: 18px 20px; border-bottom: 1px solid var(--border-subtle); }
.accordion__item:last-child { border-bottom: none; }
.accordion__head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: var(--fw-semibold); cursor: pointer; }
.accordion__item--open { background: var(--bg); }
.accordion__body { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin-top: 12px; }

/* ---------- 14. AI-КОМПОНЕНТЫ ---------- */
/* Блок: градиентная рамка + графитовая подложка + свечение */
.ai-block { border-radius: var(--radius-xl); padding: 2px; background: var(--ai-gradient); box-shadow: var(--ai-glow); }
.ai-block__inner { background: var(--ai-surface); border-radius: 22px; padding: 32px; position: relative; overflow: hidden; color: #fff; }
.ai-block__glow { position: absolute; top: -80px; right: -40px; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(196,77,184,.35), transparent 70%); pointer-events: none; }

/* Бейдж на тёмном */
.ai-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(196,77,184,.4);
  border-radius: var(--radius-full); padding: 6px 14px;
  font-size: 12px; font-weight: var(--fw-semibold); color: var(--ai-text); letter-spacing: 0.05em;
}
/* Бейдж на светлом */
.ai-badge--light {
  color: var(--ai-violet); background: var(--ai-gradient-soft);
  border-color: #E4D4F5;
}
.ai-mark { /* значок ✦ с градиентной заливкой на светлом фоне */
  background: linear-gradient(120deg,#7B4DD6,#FC4000);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ai-mark--glow { color: var(--ai-violet-light); filter: drop-shadow(0 0 6px rgba(196,77,184,.9)); }

/* Инлайн-подсказка на светлом */
.ai-hint {
  display: flex; gap: 10px; align-items: center;
  background: var(--ai-gradient-soft); border-radius: var(--radius-md); padding: 12px 14px;
  font-size: 13px; color: #4A3B5C;
}

/* ---------- 15. ТЁМНАЯ СЕКЦИЯ ---------- */
.section-dark { background: var(--graphite); border-radius: var(--radius-xl); padding: 56px; color: var(--on-graphite); }
.section-dark .t-eyebrow { color: var(--accent-on-dark); }
.card-on-dark { background: var(--graphite-2); border: 1px solid var(--graphite-border); border-radius: 14px; padding: 22px; }

/* ---------- 16. УТИЛИТЫ ---------- */
.mono { font-family: var(--font-mono); }
.container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.section-gap { margin-top: var(--space-24); }   /* 96px между секциями */

/* ============================================================
   ПРАВИЛА ИСПОЛЬЗОВАНИЯ (кратко)

   ЦВЕТ
   • Акцент (--accent) — ТОЛЬКО: первичный CTA (один на секцию),
     одна ключевая метрика, статус «требует внимания», активный пункт нав.
   • Нельзя: заливать фоны секций, красить обычный текст/иконки/границы,
     ставить несколько равных CTA.
   • «Просрочен»/ошибка = --error (#D42D2D), НЕ акцент.

   ТЕНИ
   • xs/sm — мелкие элементы; md — карточки при наведении;
   • lg/float — «парящие» UI-фрагменты и плавающие бейджи;
   • accent — только под primary-кнопкой.

   РАДИУСЫ
   • sm(6) чипы/теги · md(10) кнопки/поля · lg(16) карточки/фреймы ·
     xl(24) секции/bento · full бейджи-пилюли.

   МОКАПЫ
   • Только ВЫРЕЗАННЫЕ фрагменты (.frame) — одна карточка/виджет/колонка.
     Никогда не вставляем полный скриншот экрана. Рамка светлая, тень float.

   ВОЗДУХ
   • Между секциями 96px (.section-gap), паддинг карточки 24px,
     крупной карточки 32px, поля контейнера 40px.

   AI
   • Отдельный язык: --ai-gradient + свечение + значок ✦.
     Никогда не смешивать с семантикой статусов или акцентом-CTA.
   ============================================================ */