/* ============================================================
   OSIYO Landing — дизайн-токены, reset, база, утилиты
   Цвета бренда взяты из src/components/ui/OsiyoLogo.tsx
   ============================================================ */

:root {
  /* Бренд — закреплённая четвёрка + служебные производные */
  --brown-900: #33180C;   /* тёмные секции (опт, футер) */
  --brown-800: #472517;   /* основной текст */
  --brown-600: #6E4A33;   /* вторичный текст */
  --brown-300: #CBB49A;   /* линии-разделители */
  --orange:    #F25A1C;   /* единственный интерфейсный акцент */
  --orange-dk: #D84A12;
  --red:       #BE3A2B;   /* только предупреждение/акция */
  --green:     #2E6B4E;   /* только халяль/натуральность */
  --cream:     #F5ECDD;   /* фон страницы */
  --cream-2:   #EBDFC9;   /* альтернативный фон секций */
  --paper:     #FFF9EF;   /* карточки */
  --ill-meat:  #E1946C;   /* «мясная» заливка SVG-иллюстраций */

  /* Два шрифта (оба с кириллицей + узбекской латиницей):
     Playfair Display — заголовки, ближе всего к серифу логотипа;
     Golos Text — текст, кнопки и капс-лейблы (переменная --font-mono
     оставлена по имени, но указывает на Golos) */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono:  "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:  "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Типографика (fluid) */
  --fs-hero:      clamp(2.2rem, 4.6vw, 3.6rem);
  --fs-h2:        clamp(1.9rem, 4.2vw, 3.1rem);
  --fs-manifesto: clamp(1.6rem, 3.8vw, 2.8rem);
  --fs-h3:        clamp(1.4rem, 2vw, 1.85rem);
  --fs-body:      1.0625rem;
  --fs-small:     .875rem;
  --fs-label:     .8125rem;

  /* Форма и тени — «наклеечный» ретро-стиль */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-hard: 4px 4px 0 var(--brown-800);
  --shadow-soft: 0 14px 36px rgba(75, 42, 27, .16);
  --line: 2px solid var(--brown-800);
  --line-soft: 1.5px solid var(--brown-300);

  /* Сетка */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --sp-section: clamp(3rem, 6.5vw, 4.75rem);
  --nav-h: 64px;

  /* Движение */
  --dur: 250ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --z-nav: 50;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--brown-800);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  /* clip (не hidden!) — страховка от горизонтального скролла, не ломает sticky */
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.01em;
}

::selection { background: var(--orange); color: var(--cream); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
}

section, #quality { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- Утилиты ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-section); }

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--orange);
  margin-bottom: 1rem;
}
.kicker::before {
  content: "";
  width: 2.2em;
  height: 2px;
  background: currentColor;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.no-scroll { overflow: hidden; }

/* Акцент (оранжевый — единственный интерфейсный акцент;
   зелёный зарезервирован только под халяль/натуральность) */
.a-orange { color: var(--orange); font-style: normal; }
.a-green  { color: var(--green);  font-style: normal; }

/* Появление секций при скролле */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  padding: .6em 1em;
  background: var(--brown-800);
  color: var(--cream);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  transform: translateY(-200%);
  transition: transform .2s;
}
/* :focus-visible — плашка не залипает после тапа на iOS, клавиатура работает */
.skip-link:focus-visible { transform: none; }

/* Режим для скриншотов/превью: index.html?shot (хелпер в main.js) */
html.shot .reveal { opacity: 1; transform: none; transition: none; }
html.shot .hero { min-height: 0; height: 940px; }
html.shot .hero__frame { height: 100%; }

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