/* ═══════════════════════════════════════════════════════════════
   VIT LOGISTICS · core.css — общее для главной и личного кабинета
   Токены → база → кнопки и поля → техработы → золотой курсор → reduced motion.
   Подключается ПЕРВЫМ; стили страниц (home.css, cabinet.css) идут после.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Токены ─────────────────────────────────────────────── */
:root {
  /* Матовый «мягкий чёрный» — на самой грани серого, с едва холодным нейтральным отливом.
     Ступени: фон → угольные панели → графит (поля, активное) → светлый графит → блик. */
  --ink: #0c0c0d;             /* матовый чёрный — фон страницы (с зерном читается как #0f0f10) */
  --ink-0: #0a0a0b;           /* «колодец» — утопленные карманы внутри панелей (цена, подсказки) */
  --ink-2: #151516;           /* угольный — панели, карточки */
  --ink-3: #1c1c1e;           /* графит — поля, верх панелей, активные состояния */
  --ink-4: #262628;           /* светлый графит — верх хрома */
  --ink-5: #353538;           /* только блики, не под текст */
  --chrome-hi: rgba(255, 255, 255, .10);
  --chrome-lo: rgba(0, 0, 0, .55);
  --edge-chrome: linear-gradient(145deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 32%, rgba(201, 168, 76, .34) 62%, rgba(255, 255, 255, .06));
  --line: rgba(255, 255, 255, .09);
  --line-gold: rgba(201, 168, 76, .28);

  --gold: #c9a84c;
  --gold-l: #e8c96a;
  --gold-d: #a8801f;
  /* Металлическое золото: блик → светлое → основное → тень → отражённый свет снизу.
     Градиенты вертикальные, как у настоящей полированной пластины. */
  --gold-hi: #fff1c1;
  --gold-2: #f3d27a;
  --gold-3: #d4a93c;
  --gold-4: #9c7424;
  --gold-5: #e7c56b;
  --gold-grad: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-2) 22%, var(--gold-3) 58%, #b8892c 82%, var(--gold-5) 100%);   /* кнопка */
  --gold-foil: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-2) 32%, var(--gold-3) 68%, #b8892c 100%);   /* текст и цифры */
  /* Золотая кромка 1px для ключевых панелей: ярче в верхнем левом углу, к низу уходит в хром */
  --edge-gold: linear-gradient(145deg, rgba(243, 210, 122, .6), rgba(212, 169, 60, .18) 32%, rgba(255, 255, 255, .05) 62%, rgba(156, 116, 36, .3));

  /* Золото с жёлтым отливом: от глубокой бронзы (тень) через античное золото к медовому и шампанскому свету.
     Золото — это свет и сигнал; крупных плоских золотых заливок нет. */
  --amber: #b8892c;           /* янтарь — только концы золотых нитей и тень золотой кнопки */
  --honey: #f1d98a;           /* мёд — только центр нитей, не как тон поверхности */
  --champagne: #f6e7b4;       /* шампанское — самый светлый блик, только точечно */
  /* «Швы» между секциями: низ одной секции = верх следующей, поэтому переходов не видно */
  /* Швов больше нет: все секции стоят на одном чёрном, глубина — от панелей и точечного света */
  /* Один «прожектор» на секцию: едва тёплое пятно света, никогда не тон всей поверхности */
  --spot: rgba(232, 201, 106, .045);
  /* Матовая чёрная поверхность: едва заметный верхний свет, без цветного отлива */
  --velvet: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .025) 0%, transparent 60%);
  --gold-thread: linear-gradient(90deg, transparent, var(--gold-4) 20%, var(--gold-2) 50%, var(--gold-4) 80%, transparent);
  /* Карбон: саржа 2×2 — каждая прядь перекрывает две клетки со сдвигом, отсюда диагональ.
     Используется только как едва заметное зерно в подвале: материалов на странице
     и так четыре (фото, бархат, хром, золото). */
  --carbon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3ClinearGradient id='h' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230d0e10'/%3E%3Cstop offset='.45' stop-color='%232e3036'/%3E%3Cstop offset='1' stop-color='%230d0e10'/%3E%3C/linearGradient%3E%3ClinearGradient id='v'%3E%3Cstop offset='0' stop-color='%2309090b'/%3E%3Cstop offset='.5' stop-color='%231b1c20'/%3E%3Cstop offset='1' stop-color='%2309090b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23h)'%3E%3Crect width='8' height='4'/%3E%3Crect x='4' y='4' width='8' height='4'/%3E%3Crect x='8' y='8' width='8' height='4'/%3E%3Crect x='12' y='12' width='4' height='4'/%3E%3Crect y='12' width='4' height='4'/%3E%3C/g%3E%3Cg fill='url(%23v)'%3E%3Crect y='4' width='4' height='8'/%3E%3Crect x='4' y='8' width='4' height='8'/%3E%3Crect x='8' y='12' width='4' height='4'/%3E%3Crect x='8' width='4' height='4'/%3E%3Crect x='12' width='4' height='8'/%3E%3C/g%3E%3C/svg%3E");
  /* Блик по плетению: широкая диагональная полоса */
  --carbon-sheen: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .07) 42%, rgba(255, 255, 255, .015) 55%, transparent 70%);
  /* Плёночное зерно для hero: нейтральный шум с альфой ~5%, статичный — склеивает фото и типографику */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Матовая фактура фона: очень мелкое статичное зерно ~2–3% — гасит полосы в градиентах «прожекторов»
     и даёт ощущение матовой бумаги. На текст не ложится: это фон секций, а не слой поверх. */
  --matte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --ground: var(--matte), var(--ink);   /* фон секций: зерно поверх матового чёрного */

  --text: #f3ede2;   /* тёплый off-white — без «белой наклейки» поверх фото */
  --text-2: rgba(242, 238, 230, .72);
  --text-3: rgba(242, 238, 230, .62);

  --ok: #2fcf7a;
  --warn: #e0a347;
  --danger: #ff7b6b;

  --f-body: "Golos Text", "Noto Sans Georgian", system-ui, sans-serif;
  /* Onest — кириллический гротеск той же школы, что Golos: заголовки читаются как титры фильма, а не наклейка.
     Цифры — тонкий Onest с моноширинными цифрами, как циферблат. */
  --f-head: "Onest", "Noto Sans Georgian", "Golos Text", sans-serif;
  --f-num: "Onest", "Golos Text", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Шкала кегля: спокойнее и мельче, чем было, — премиальность через воздух и разрядку, а не через размер.
     Каждый заголовок и крупная цифра на странице берут размер отсюда. */
  --fs-h1: clamp(32px, 3.5vw, 50px);
  --fs-h2: clamp(25px, 2.5vw, 36px);
  --fs-h3: clamp(18px, 1.5vw, 21px);    /* заголовки панелей */
  --fs-h4: 16px;                        /* заголовки карточек */
  --fs-lead: 16px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-xs: 13.5px;
  --fs-cap: 11.5px;                     /* eyebrow, подписи прописными */
  --fs-num-xl: clamp(46px, 4.6vw, 64px);  /* цена в калькуляторе */
  --fs-num-l: clamp(30px, 2.8vw, 40px);   /* статистика */
  --fs-num-m: 28px;                       /* тариф в hero */
  --fs-num-s: 18px;                       /* сроки, цены в списках */
  --lh-tight: 1.08;
  --lh-head: 1.18;
  --lh-body: 1.62;
  --measure: 62ch;                       /* длина строки основного текста */

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --hdr-h: 72px;
  --hdr-hc: 60px;             /* шапка после прокрутки — компактнее */
  --sec-pad: clamp(56px, 7vw, 92px);

  --z-hdr: 100;
  --z-drawer: 90;
  --z-float: 80;
}

html[lang="ka"] { --f-head: "Noto Sans Georgian", "Onest", sans-serif; }

/* ── 2. База ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 1.5px solid var(--gold-l); outline-offset: 3px; }
.field__input:focus-visible { outline: none; }  /* у полей свой фокус — золотая кромка и мягкое кольцо */
::selection { background: rgba(201, 168, 76, .35); color: var(--text); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ico--gold { color: var(--gold-l); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--gold); color: var(--ink); font-weight: 600;
  transform: translateY(calc(-100% - 24px)); transition: transform .2s;
}
.skip-link:not(:focus) { opacity: 0; pointer-events: none; }
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.accent { color: var(--gold-l); }

/* ── 3. Кнопки и поля ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: 600 var(--fs-sm)/1 var(--f-body); letter-spacing: .015em;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
/* Золотая кнопка — полированная пластина: фаска сверху, тень снизу, тонкий тёмный кант */
.btn--gold {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--gold-grad); color: #17130a; text-shadow: 0 1px 0 rgba(255, 241, 193, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(90, 60, 10, .55),
    inset 0 0 0 1px rgba(120, 85, 20, .35),
    0 12px 24px -14px rgba(0, 0, 0, .95);
}
/* Блик проходит по металлу один раз при наведении (только transform) */
.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn--gold:hover::after { transform: translateX(120%); }
.btn--gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(90, 60, 10, .55), inset 0 0 0 1px rgba(120, 85, 20, .35), 0 14px 28px -12px rgba(0, 0, 0, .95), 0 0 0 1px rgba(232, 201, 106, .18); }
.btn--gold:active { filter: brightness(.94); box-shadow: inset 0 2px 4px rgba(90, 60, 10, .45), inset 0 0 0 1px rgba(120, 85, 20, .4); }
.btn--ghost { border-color: rgba(255, 255, 255, .28); background: rgba(12, 12, 13, .35); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(201, 168, 76, .06); color: var(--gold-l); }
.btn--outline { border-color: var(--gold); color: var(--gold-l); background: transparent; }
.btn--outline:hover { background: rgba(201, 168, 76, .08); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: var(--fs-xs); }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

.field { display: grid; gap: 6px; min-width: 0; }
.field__label { font-size: 13px; color: var(--text-3); }
.field__input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--ink); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.field__input::placeholder { color: rgba(242, 238, 230, .35); }
.field__input:hover { border-color: rgba(255, 255, 255, .2); }
.field__input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, .18); }
.field__input[readonly] { color: var(--text-2); background: var(--ink-3); }
.select { position: relative; }
.select select { appearance: none; padding-right: 40px; cursor: pointer; }
.select select option { background: var(--ink-2); }
.select__chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }

/* ── 4. Блокировка прокрутки и экран «Технические работы» ──
   Показывает js/maint.js (главная — через home-live.js, кабинет — через cabinet.js). */
html.is-locked, html.is-locked body { overflow: hidden; }
/* Технические работы: матовый чёрный экран поверх всего, золотой орнамент, логотип */
.maint {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px var(--gutter);
  background: radial-gradient(50% 45% at 50% 42%, rgba(232, 201, 106, .06), transparent 70%), var(--ground);
  opacity: 0; transition: opacity .5s var(--ease); overflow-y: auto;
}
.maint[hidden] { display: none; }
.maint.is-on { opacity: 1; }
.maint:focus { outline: none; }
.maint__card { display: grid; justify-items: center; text-align: center; max-width: 560px; }
.maint__logo { width: auto; height: 72px; }
.maint__orn {
  position: relative; display: block; width: min(320px, 70vw); height: 9px; margin: 28px 0 26px;
  background: linear-gradient(90deg, transparent, rgba(212, 169, 60, .6) 40%, transparent 47%, transparent 53%, rgba(212, 169, 60, .6) 60%, transparent) center / 100% 1px no-repeat;
}
.maint__orn::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-3) 55%, var(--gold-4));
}
.maint__title { font: 500 var(--fs-h2)/var(--lh-head) var(--f-head); letter-spacing: -.02em; text-wrap: balance; }
.maint__msg { margin-top: 16px; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-2); max-width: 44ch; text-wrap: pretty; }
.maint__cap { margin-top: 36px; font: 500 var(--fs-cap)/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-l); }
.maint__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
html[lang="ka"] .maint__cap { text-transform: none; letter-spacing: .02em; }
html[lang="ka"] .maint__title { letter-spacing: 0; }


/* ── 5. Золотой курсор (только десктоп) ─────────────────────
   Сам курсор — нативный (cursor: url(svg)), без задержки и без JS.
   Стрелка — по умолчанию, рука — на ссылках и кнопках; в полях ввода остаётся обычный I-beam.
   Шлейф из золотых искр рисует js/sparks.js на одном <canvas class="spark-trail">. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  html { cursor: url("../img/home/cursor-arrow.svg") 5 3, auto; }
  a, button, summary, label[for], select, .select select, [role="tab"] {
    cursor: url("../img/home/cursor-pointer.svg") 12 4, pointer;
  }
  input:not([type="checkbox"], [type="radio"]):not([readonly]), textarea { cursor: text; }
}
.spark-trail { position: fixed; inset: 0; z-index: 150; width: 100%; height: 100%; pointer-events: none; }

summary { cursor: pointer; }

/* ── 6. Меньше движения ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .btn--gold::after { display: none; }
  .maint { transition: none; }
}