/* ============================================================
   Sheker.Agency — Design System (global)
   Джерело: Дизайн-система BUREAU v1.0 (цей проєкт)
   Чорний + білий як рівноправні основи, #FF3F1C — єдиний акцент.
   Радіус 0 · лінії 1px · без тіней і градієнтів.
   ============================================================ */

:root {
  /* Кольори — основи */
  --c-black: #000000;
  --c-white: #FFFFFF;
  /* Акцент (≤5% площі екрана) */
  --c-red: #FF3F1C;
  --c-red-hover: #D93214;
  /* Тональні ступені (не третій колір) */
  --c-text-2: #666666;        /* вторинний текст на білому */
  --c-text-2-inv: #999999;    /* вторинний текст на чорному */
  --c-line: #E6E6E6;          /* межі/шви на білому */
  --c-line-inv: #262626;      /* межі/шви на чорному */
  --c-disabled: #B3B3B3;
  --c-disabled-inv: #4D4D4D;
  --c-surface: #F5F5F5;
  --c-surface-inv: #111111;

  /* Типографіка */
  --f-display: 'Inter Tight', system-ui, sans-serif;
  --f-body: 'Onest', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Display: Inter Tight, вага 500–600 — впевнено, але не агресивно.
     600 — лише лого; заголовки 500. */
  --fs-display: clamp(44px, 5.8vw, 92px); /* 500 / 1.0 / -0.02em */
  --fs-h2: clamp(30px, 3.6vw, 50px);       /* 500 / 1.06 / -0.02em */
  --fs-h3: clamp(22px, 2.4vw, 30px);       /* 600 / 1.15 / -0.015em */
  --fs-h4: 20px;
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-label: 11px;
  --measure: 640px;

  /* Відступи — база 4px */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px;
  --s-section: clamp(96px, 11vw, 160px);
  --card-pad: clamp(24px, 2.5vw, 32px);

  /* Сітка */
  --container: 1360px;
  --gutter: 24px;
  --page-margin: clamp(20px, 4.5vw, 64px);

  /* Контроли */
  --btn-h: 56px;
  --btn-h-s: 48px;
  --input-h: 56px;
  --tap-min: 44px;
  --header-h: 80px;
  --header-h-m: 64px;

  /* Motion */
  --t-fast: 150ms ease;
  --t-med: 250ms ease;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { width: 100%; max-width: 100%; }
body {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-black);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
::selection { background: var(--c-red); color: var(--c-white); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-red); }
:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-red); color: var(--c-white);
  padding: 12px 24px; font-weight: 500;
}
.skip-link:focus { left: 0; color: var(--c-white); }

/* Інверсна секція */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.theme-dark { background: var(--c-black); color: var(--c-white); }
.theme-dark ::selection { background: var(--c-white); color: var(--c-black); }

/* ---------- Типографіка ---------- */
.t-display {
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.02em;
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em;
}
.t-h4 { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h4); line-height: 1.3; }
.t-lead { font-size: var(--fs-lead); line-height: 1.55; max-width: var(--measure); text-wrap: pretty; }
.t-body-2 { color: var(--c-text-2); }
.theme-dark .t-body-2 { color: var(--c-text-2-inv); }
.t-small { font-size: var(--fs-small); line-height: 1.5; }

/* Моно-ярлик секції */
.label {
  font-family: var(--f-mono); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-2);
  display: inline-flex; align-items: center; gap: 16px;
}
.label::before { content: ""; width: 24px; height: 1px; background: var(--c-red); }
.theme-dark .label { color: var(--c-text-2-inv); }
.mono { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; }

/* Заголовок секції: label + h2 + вступ */
.section-head { display: grid; gap: var(--s-4); margin-bottom: clamp(40px, 5vw, 64px); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--btn-h); padding: 0 32px;
  font-family: var(--f-body); font-size: 15px; font-weight: 500;
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer; text-align: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn--primary { background: var(--c-red); color: var(--c-white); }
.btn--primary:hover { background: var(--c-red-hover); color: var(--c-white); }
.btn--primary:active { background: var(--c-black); }
.btn--primary:disabled { background: var(--c-disabled); cursor: not-allowed; }

.btn--secondary { background: transparent; color: var(--c-black); border-color: var(--c-black); }
.btn--secondary:hover { background: var(--c-black); color: var(--c-white); }
.theme-dark .btn--secondary { color: var(--c-white); border-color: var(--c-white); }
.theme-dark .btn--secondary:hover { background: var(--c-white); color: var(--c-black); }

.btn--small { height: var(--btn-h-s); padding: 0 24px; font-size: 14px; }

/* Текстова кнопка-стрілка */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: inherit;
  min-height: var(--tap-min);
}
.link-arrow .arrow { font-family: var(--f-mono); color: var(--c-red); transition: transform var(--t-fast); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* Ссилки в тексті */
.link-inline {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px; text-decoration-color: var(--c-disabled);
}
.link-inline:hover { color: var(--c-red); text-decoration-color: var(--c-red); }

/* ---------- Форми ---------- */
.input, .textarea {
  font-family: var(--f-body); font-size: 16px; color: var(--c-black);
  width: 100%; border: 1px solid var(--c-line); background: var(--c-white);
  border-radius: 0; padding: 0 20px; height: var(--input-h);
}
.textarea { height: auto; min-height: 120px; padding: 16px 20px; resize: vertical; }
.input:focus, .textarea:focus { border-color: var(--c-black); outline: 2px solid var(--c-red); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--c-red); }
.input:disabled { background: var(--c-surface); color: var(--c-disabled); }

/* ---------- Теги ---------- */
.tag {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px;
  font-size: 13px; border: 1px solid var(--c-line); white-space: nowrap;
}
.theme-dark .tag { border-color: var(--c-line-inv); color: var(--c-text-2-inv); }
/* Теги на вузьких екранах переносяться */
@media (max-width: 599px) { .tag { white-space: normal; height: auto; min-height: 32px; padding: 6px 12px; max-width: 100%; } }

.tag--link { text-decoration: none; color: inherit; transition: background-color .15s linear, color .15s linear, border-color .15s linear; }
.tag--link:hover, .tag--link:focus-visible { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); }

/* ---------- Картки і шви ---------- */
/* Сітка зі швами 1px: gap 1px поверх фонового кольору лінії */
.seam-grid { display: grid; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.seam-grid > * { background: var(--c-white); min-width: 0; }
.theme-dark .seam-grid { background: var(--c-line-inv); border-color: var(--c-line-inv); }
.theme-dark .seam-grid > * { background: var(--c-black); }

.card { padding: var(--card-pad); }

/* Плейсхолдер зображення (замінюється реальним <img>) */
.media-ph {
  background: repeating-linear-gradient(-45deg, var(--c-surface) 0 10px, var(--c-white) 10px 20px);
  border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-2);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 16px;
}
.theme-dark .media-ph {
  background: repeating-linear-gradient(-45deg, var(--c-surface-inv) 0 12px, var(--c-black) 12px 24px);
  border-color: var(--c-line-inv); color: var(--c-text-2-inv);
}

/* Generated page visuals replace non-case media placeholders. */
.generated-media {
  display: block;
  margin: 0;
  overflow: hidden;
}
.generated-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 767px) {
  .generated-media {
    aspect-ratio: 4 / 3 !important;
  }
}

/* ---------- Розділювачі ---------- */
.rule { border: 0; border-top: 1px solid var(--c-line); margin: 0; }
.rule--strong { border-top-color: var(--c-black); }
.theme-dark .rule { border-top-color: var(--c-line-inv); }