/* ─────────────────────────────────────────────────────────────
   Дом офицеров ЦВО — дизайн-система (токены + утилиты)
   Направление «Афиша»: тёплая слоновая кость + бордо + золото.
   Портировано из дизайн-хэндоффа; шрифты зафиксированы.
   ───────────────────────────────────────────────────────────── */

:root{
  /* поверхности */
  --bg:        #f4eee2;   /* тёплая слоновая кость */
  --surface:   #fbf7ee;   /* карточки/панели */
  --surface-2: #ece3d2;   /* плейсхолдеры/вставки */
  --ink:       #221d17;   /* тёплый почти-чёрный */
  --ink-soft:  #6f665a;   /* вторичный текст */
  --line:      #ddd2bf;   /* тонкие линии */

  /* акценты */
  --accent:    #7a1f2b;   /* бордо */
  --gold:      #b0824a;   /* золото/латунь */

  /* производные */
  --accent-ink:  color-mix(in oklab, var(--accent) 88%, #000 12%);
  --accent-tint: color-mix(in oklab, var(--accent) 7%,  var(--bg));
  --accent-line: color-mix(in oklab, var(--accent) 22%, var(--line));
  --gold-tint:   color-mix(in oklab, var(--gold) 16%, var(--bg));
  --on-accent:   #f7efe2;

  /* типографика (зафиксировано: Playfair Display + PT Sans) */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'PT Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 64px);

  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#15110d; --surface:#1e1813; --surface-2:#271f17;
  --ink:#f2ebdd; --ink-soft:#ab9f8d; --line:#342a20;
  --accent-tint: color-mix(in oklab, var(--accent) 26%, var(--bg));
  --accent-line: color-mix(in oklab, var(--accent) 40%, var(--line));
  --gold-tint:   color-mix(in oklab, var(--gold) 22%, var(--bg));
  --on-accent:#f7efe2; color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--accent); color:var(--on-accent); }

/* типографика */
.display{ font-family:var(--font-display); font-weight:400; line-height:1.02; letter-spacing:-0.01em; text-wrap:balance; }
.serif{ font-family:var(--font-display); }
.kicker{ font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.muted{ color:var(--ink-soft); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.55; color:var(--ink-soft); }

/* контейнер */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,9vw,128px); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px); }
.sec-head h2{ margin:0; font-size:clamp(2rem,4.5vw,3.4rem); }
.sec-head .kicker{ display:block; margin-bottom:14px; }

/* кнопки */
.btn{ display:inline-flex; align-items:center; gap:.6em; padding:.85em 1.5em; border-radius:999px;
  font-weight:700; font-size:.95rem; letter-spacing:.01em; white-space:nowrap; border:1px solid transparent; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:0 6px 22px -10px var(--accent); }
.btn-primary:hover{ background:var(--accent-ink); transform:translateY(-2px); box-shadow:0 14px 30px -12px var(--accent); }
.btn-ghost{ border-color:var(--accent-line); color:var(--ink); }
.btn-ghost:hover{ background:var(--accent-tint); border-color:var(--accent); }
.btn-gold{ background:var(--gold); color:#1c150c; }
.btn-gold:hover{ background:color-mix(in oklab,var(--gold) 86%, #fff); transform:translateY(-2px); }
.btn-text{ padding:0; color:var(--accent); font-weight:700; background:none; border:0; }
.btn-text .arr{ transition:transform .25s; display:inline-block; }
.btn-text:hover .arr{ transform:translateX(5px); }

/* появление при прокрутке */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* хелперы */
.hr{ height:1px; background:var(--line); border:0; }
.tag-pill{ display:inline-flex; align-items:center; gap:.5em; font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.4em .85em; border-radius:999px; }
.tag-accent{ background:var(--accent-tint); color:var(--accent); }
.tag-gold{ background:var(--gold-tint); color:color-mix(in oklab,var(--gold) 70%, var(--ink)); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }