/* ============================================
   НАДЯ НОВИКОВА · Design Tokens · v1
   Единственный источник правды для стилей сайта.
   Подключается первым, до всех остальных стилей.
   ============================================ */

:root{
  /* Цвета */
  --nn-ivory:      #F2EDE3;  /* основной фон */
  --nn-porcelain:  #FAF7F0;  /* карточки на светлом */
  --nn-noir:       #15110B;  /* текст, тёмные секции */
  --nn-mocha:      #372E22;  /* основной текст на светлом, тёмные карточки */
  --nn-card-dark:  #1D1812;  /* карточки на нуаре */
  --nn-gold:       #A8853B;  /* акцент: кнопки, линии, номера */
  --nn-gold-light: #C9A961;  /* hover, детали на тёмном */
  --nn-taupe:      #8B8071;  /* подписи, второстепенный текст */

  /* Прозрачности золота */
  --nn-line:       rgba(168,133,59,.45); /* основная линия 1px */
  --nn-line-soft:  rgba(168,133,59,.20); /* внутренние разделители */
  --nn-line-dark:  rgba(168,133,59,.30); /* линии на нуаре */

  /* Шрифты */
  --nn-display: 'Jost', sans-serif;   /* заголовки, только caps */
  --nn-body:    'Inter', sans-serif;  /* текст */

  /* Трекинг */
  --nn-track-logo:    .38em;
  --nn-track-h1:      .04em;
  --nn-track-h2:      .06em;
  --nn-track-eyebrow: .32em;
  --nn-track-btn:     .26em;
  --nn-track-nav:     .22em;

  /* Размеры шрифта */
  --nn-h1:      clamp(52px, 7.4vw, 104px);
  --nn-h2:      clamp(30px, 4.2vw, 52px);
  --nn-h3:      clamp(18px, 2vw, 22px);
  --nn-body-lg: 18px;
  --nn-body-md: 16px;
  --nn-body-sm: 14px;
  --nn-caption: 12px;

  /* Отступы */
  --nn-section:     110px;  /* вертикальный паддинг секций, моб. 72px */
  --nn-gap:         32px;   /* сетка карточек */
  --nn-card-pad:    40px;

  /* Геометрия. Скругления запрещены */
  --nn-radius: 0;
  --nn-hairline: 1px;
  --nn-container: 1160px;
  --nn-gutter: 48px;        /* моб. 22px */

  /* Движение */
  --nn-ease: cubic-bezier(.4,0,.2,1);
  --nn-dur:  .25s;          /* hover */
  --nn-reveal: .7s;         /* появление при скролле */
}

/* Базовые правила */
body{
  background:var(--nn-ivory);
  color:var(--nn-noir);
  font-family:var(--nn-body);
  font-size:var(--nn-body-md);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.nn-display{
  font-family:var(--nn-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:1.14;
}

.nn-eyebrow{
  font-family:var(--nn-display);
  font-weight:500;
  font-size:var(--nn-caption);
  letter-spacing:var(--nn-track-eyebrow);
  text-transform:uppercase;
  color:var(--nn-gold);
}

/* Кнопки: одна золотая на экран */
.nn-btn{
  display:inline-block;
  font-family:var(--nn-display);
  font-weight:500;
  font-size:13px;
  letter-spacing:var(--nn-track-btn);
  text-transform:uppercase;
  padding:20px 42px;
  text-decoration:none;
  text-align:center;
  border-radius:var(--nn-radius);
  transition:var(--nn-dur) var(--nn-ease);
}
.nn-btn--gold{background:var(--nn-gold);color:var(--nn-noir)}
.nn-btn--gold:hover{background:var(--nn-gold-light)}
.nn-btn--outline{border:var(--nn-hairline) solid var(--nn-noir);color:var(--nn-noir)}
.nn-btn--outline:hover{background:var(--nn-noir);color:var(--nn-ivory)}
.nn-btn--ghost{border:var(--nn-hairline) solid var(--nn-gold);color:var(--nn-ivory)}
.nn-btn--ghost:hover{background:rgba(168,133,59,.15)}

/* Тёмная секция */
.nn-dark{background:var(--nn-noir);color:var(--nn-ivory)}
.nn-dark .nn-eyebrow{color:var(--nn-gold-light)}

/* Появление при скролле */
.nn-rv{opacity:0;transform:translateY(18px);transition:opacity var(--nn-reveal) ease,transform var(--nn-reveal) ease}
.nn-rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .nn-rv{opacity:1;transform:none;transition:none}
}