/* ============================================================
   BORDEX — дизайн-токены и общие паттерны (лендинг + ЛК)
   Источник: design_handoff_bordex/README.md
   Радиусов нет — все углы прямые. Теней почти нет.
   ============================================================ */

:root {
  --bg: #0B0C0F;            /* фон страницы */
  --bg-footer: #08090B;     /* футер, глубже фона */
  --panel: #12141A;         /* карточки/панели ЛК */
  --surface: #15171B;       /* тёмная поверхность: селекты, панели лендинга */
  --text: #E7E5E0;          /* основной текст */
  --text-2: #C9CACD;        /* вторичный текст */
  --text-3: #B9BABC;        /* вторичный текст */
  --muted: #9B9CA0;         /* подписи, моноширинные ярлыки */
  --faint: #77787D;         /* метаданные таблиц */
  --accent: #FF4D00;        /* оранжевый акцент */
  --eu-bg: #EFEEE9;         /* светлая тема секции «Европа» */
  --eu-text: #15171B;

  --line-07: rgba(231, 229, 224, .07);
  --line-08: rgba(231, 229, 224, .08);
  --line-10: rgba(231, 229, 224, .1);
  --line-14: rgba(231, 229, 224, .14);
  --line-22: rgba(231, 229, 224, .22);
  --line-28: rgba(231, 229, 224, .28);
  --line-30: rgba(231, 229, 224, .3);

  --font-display: "Inter Tight", "Arial", sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease-btn: cubic-bezier(.16, 1, .3, 1);
  --ease-rise: cubic-bezier(.2, .7, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Фон html = цвет футера: убирает светлую полосу под футером при овер-скролле на мобильных */
html { scroll-behavior: smooth; background: #08090B; }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: var(--accent); color: var(--bg); }

a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
select option { background: #15171B; color: #E7E5E0; }

img, svg { display: block; }

/* ---- Зерно: fixed-оверлей на весь вьюпорт ---- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}

/* ---- Контейнер ---- */
.container {
  max-width: 1460px;
  margin: 0 auto;
  padding-left: clamp(20px, 3vw, 60px);
  padding-right: clamp(20px, 3vw, 60px);
}

/* ---- Моноширинный ярлык секции: «— НАЗВАНИЕ» ---- */
.mono-label {
  font: 500 11px var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   Фирменная кнопка: заливка слева направо при ховере.
   Покой — виден правый край градиента, ховер — левый.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 700 11px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 1px solid transparent;
  background-size: 201% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  transition:
    background-position 1.4s var(--ease-btn),
    color .35s,
    border-color .35s;
  user-select: none;
  white-space: nowrap;
}
.btn:hover { background-position: 0 0; }

/* Светлая CTA: покой — оранжевая, ховер — светлая. Текст всегда тёмный. */
.btn--cta {
  background-image: linear-gradient(90deg, #E7E5E0 50%, #FF4D00 50%);
  color: #0B0C0F;
}

/* Контурная: покой — прозрачная с границей, ховер — оранжевая заливка. */
.btn--ghost {
  background-image: linear-gradient(90deg, #FF4D00 50%, transparent 50%);
  border-color: var(--line-28);
  color: var(--text);
}
.btn--ghost:hover {
  color: #0B0C0F;
  border-color: var(--accent);
}

/* ============================================================
   Чипы статусов (ЛК)
   ============================================================ */
.chip {
  display: inline-block;
  font: 700 9.5px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 8px;
  white-space: nowrap;
}
.chip--transit  { color: var(--accent); border: 1px solid rgba(255, 77, 0, .6); }
.chip--due      { background: var(--accent); color: #0B0C0F; }
.chip--done     { background: var(--line-14); color: var(--text); }
.chip--quiet    { color: var(--muted); border: 1px solid var(--line-30); }

/* ---- Формы ---- */
.field {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-14);
  color: var(--text);
  padding: 13px 14px;
  font: 400 14px var(--font-body);
  outline: none;
  transition: border-color .2s;
}
.field:focus { border-color: var(--accent); }
.field::placeholder { color: rgba(231, 229, 224, .32); }

/* ---- Появление блоков ---- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}