/* ============================================================
   LOOOK DEKOR — дизайн-токены
   Палитра №5 (утверждена авансом, оценка на макете — менять
   значения ТОЛЬКО здесь, роли не переименовывать).
   ============================================================ */

:root {
  /* --- сырьё палитры №5 --- */
  --raw-ink:      #1A1A1A;
  --raw-graphite: #4A4844;
  --raw-terra:    #B5652D;
  --raw-sand:     #E8E1D3;
  --raw-cream:    #F5F2EC;
  --raw-white:    #FFFFFF;

  /* --- роли: фон --- */
  --bg-page:      var(--raw-white);   /* основной фон страницы — «чистый белый», за него палитру и выбрали */
  --bg-section:   var(--raw-cream);   /* тёплая секция; от белого почти неотличим — разделять линией/отступом */
  --bg-inset:     var(--raw-sand);    /* подложка карточек, полосы, разделители */
  --bg-dark:      var(--raw-ink);     /* шапка (по ТЗ — чёрная), тёмные секции, бегущая строка */

  /* --- роли: текст --- */
  --text-primary:   var(--raw-ink);
  --text-secondary: var(--raw-graphite); /* подписи, вторичный текст — НЕ терракота (AA) */
  --text-inverse:   var(--raw-cream);    /* текст на тёмном: тёплый белый, не #FFF в лоб */
  --text-accent:    var(--raw-terra);    /* только крупный текст ≥18px/24px bold — 4.4:1 на белом */

  /* --- роли: акцент --- */
  --accent:        var(--raw-terra);  /* единственный акцент: кнопки, активные состояния, ховеры */
  --accent-hover:  #9C5322;           /* терракота −12% светлоты */
  --border:        #DDD5C6;           /* линии на светлом (чуть темнее sand) */
  --border-dark:   #33312E;           /* линии на тёмном */

  /* --- типографика --- */
  --font-display: 'Playfair Display', Georgia, serif;  /* заголовки, курсивные акценты */
  --font-text:    'Manrope', Arial, sans-serif;         /* текст, UI, подписи */

  --fs-hero:    clamp(2.2rem, 5.5vw, 4.5rem);   /* H1 главной */
  --fs-h1:      clamp(2rem, 4vw, 3.25rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:      1.375rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.1;
  --lh-text:  1.6;

  --ls-caps: 0.14em;  /* капитель вразрядку — фирменный приём из прототипа и мудборда */

  /* --- сетка и отступы --- */
  --container:     1280px;
  --container-pad: clamp(16px, 4vw, 48px);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 104px;   /* межсекционный воздух — мудборд требует много */

  /* --- движение («сайт не должен быть статичным») --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   200ms;
  --dur-reveal: 700ms;  /* появление блоков при скролле */

  --radius: 0px; /* прямые углы: премиум-издательская подача, как в мудборде */
}

/* --- база --- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); margin: 0; }
img { max-width: 100%; display: block; }

/* --- утилиты, повторяющие фирменные приёмы --- */
.u-caps {
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.u-italic-accent { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* появление блока при скролле: состояние «до» и «после» (требование ТЗ 1.5) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }