/* Дизайн-система по подходу Макса Ширко (@maxshirko), адаптирована 22.10.2026.
   Полное описание системы для агентов (цвет, типографика, компоненты, запреты, проверки): /root/design-system/DESIGN.md
   Применять по умолчанию на макетах, сайтах и дашбордах. Цвета бренда клиента подставлять в --accent / --bg / --fg.
   Эталон: https://dimafedorov.ru/files/mebel-pro-yar-dizayn/ (исходник /root/mebel-pro-yar/work/design_v4/page.html) */
:root{
  --s1:10px;--s2:20px;--s3:40px;--s4:80px;--s5:160px;--s6:320px;   /* отступы: каждый следующий вдвое больше, других не использовать */
  --edge:40px;--gap:20px;--max:1920px;                               /* поле страницы, межколонник, предел ширины */
  --bg:#f6f3ee;--fg:#2f2b26;--bg-inv:#3a352f;--fg-inv:#f6f3ee;      /* тёплый графит, НЕ чистый чёрный */
  --card:#fffdf9;--line:rgba(47,43,38,.14);--accent:#ffd83a;         /* один акцент: кнопка действия и выбранное состояние */
  --font:"Inter Tight",system-ui,sans-serif;                         /* один шрифт на всё */
  --ease:cubic-bezier(.16,1,.3,1);
  --o-text:.9;--o-desc:.72;--o-label:.55;--o-num:.35;                 /* иерархия прозрачностью, а не цветами */
}
@media(max-width:640px){:root{--edge:20px;--gap:16px;--s2:12px;--s3:24px;--s4:40px;--s5:60px}}
body{background:var(--bg);color:var(--fg);font:600 16px/1.45 var(--font);letter-spacing:-.18px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:600;text-wrap:balance}
h1{font-size:clamp(40px,4.6vw,72px);line-height:.98;letter-spacing:-.025em}
h2{font-size:40px;line-height:.96;letter-spacing:-.4px}
h3{font-size:24px;line-height:1.15;letter-spacing:-.24px}
h4{font-size:20px;line-height:1.15;letter-spacing:-.2px}
.t-body{opacity:var(--o-text);max-width:350px}
.t-desc{opacity:var(--o-desc);max-width:350px}
.t-label{font-size:14px;line-height:1.4;opacity:var(--o-label)}
.t-num{opacity:var(--o-num)}
.t-price{font-size:52px;line-height:.9;letter-spacing:-.52px}
.t-link{padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.t-link:hover{background-size:100% 1px}
@media(max-width:640px){h2{font-size:28px;line-height:1}h3{font-size:18px}h4{font-size:16px}body,.t-body,.t-desc{font-size:14px}.t-label{font-size:12px}.t-price{font-size:36px}.t-body,.t-desc{max-width:100%}}
.section{max-width:var(--max);margin:0 auto;padding-inline:var(--edge)}
.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
.c1{grid-column:1/2}.c2{grid-column:2/3}.c12{grid-column:1/3}.c3{grid-column:3/4}.c4{grid-column:4/5}.c34{grid-column:3/5}.c24{grid-column:2/5}.c14{grid-column:1/5}
.inv{background:var(--bg-inv);color:var(--fg-inv)}
@media(max-width:1024px){.row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s3)}.row>[class*="c"]{grid-column:1/-1}}
@media(max-width:640px){.row{grid-template-columns:minmax(0,1fr)}}