/* ================================================================
   На обед в буфет - база фирменного стиля.
   Токены отсюда переезжают на сайт как есть: цвет, тип, шаг, радиус.
   Никаких внешних подключений: шрифты лежат рядом в fonts/.
   ================================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- фирменные константы, от темы не зависят ---- */
  --brand-tomato:      #C8462C;
  --brand-tomato-dark: #A8371F;
  --brand-tomato-lite: #F0714F;
  --brand-amber:       #E9A13B;
  --brand-amber-dark:  #B87418;
  --brand-cocoa:       #2A211C;
  --brand-cream:       #FCF6EC;
  --brand-herb:        #4F7A3A;

  /* ---- шрифт ---- */
  --font-head: "Montserrat", system-ui, -apple-system, Arial, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, Arial, sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.25rem);

  /* ---- шаг 4px ---- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-24: 6rem;

  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem;  --radius-xl: 1rem;
  --radius-full: 9999px;

  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- светлая тема ---- */
  --color-bg:            var(--brand-cream);
  --color-surface:       #FFFBF4;
  --color-surface-2:     #FFFFFF;
  --color-surface-offset: #F4EADB;
  --color-border:        #E2D4C0;
  --color-divider:       #EDE2D2;
  --color-text:          var(--brand-cocoa);
  --color-text-muted:    #7A6A5E;
  --color-text-faint:    #A2907F;
  --color-primary:       var(--brand-tomato);
  --color-primary-text:  var(--brand-tomato-dark);
  --color-primary-hover: var(--brand-tomato-dark);
  --color-on-primary:    #FFF7F0;
  --color-accent:        var(--brand-amber);
  --color-success:       var(--brand-herb);

  --shadow-sm: 0 1px 2px rgba(42, 33, 28, 0.07);
  --shadow-md: 0 6px 18px rgba(42, 33, 28, 0.09);
  --shadow-lg: 0 16px 40px rgba(42, 33, 28, 0.14);
}

[data-theme="dark"] {
  --color-bg:            #1E1815;
  --color-surface:       #262019;
  --color-surface-2:     #2E2620;
  --color-surface-offset: #332A22;
  --color-border:        #46392F;
  --color-divider:       #33291F;
  --color-text:          #F2E8DC;
  --color-text-muted:    #B3A093;
  --color-text-faint:    #8A7768;
  --color-primary:       var(--brand-tomato-lite);
  --color-primary-text:  var(--brand-tomato-lite);
  --color-primary-hover: #FF8B6B;
  --color-on-primary:    #23140F;
  --color-accent:        var(--brand-amber);
  --color-success:       #7FB05C;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* PRAVKI-3: тему включает атрибут data-theme на <html> - его ставит короткий
   скрипт в голове документа (авто по системе, ручной выбор в localStorage).
   color-scheme рядом обязателен: без него системные части - скроллбар, поля,
   автозаполнение, выпадашки - остаются светлыми поверх тёмной страницы. */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* ================================================================ база */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

a { color: var(--color-primary-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }

.wrap { width: min(1180px, 100% - 2 * var(--space-4)); margin-inline: auto; }

/* ================================================================ шапка */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.top__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-block: var(--space-3);
}
.theme {
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-sm);
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text);
  cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.theme:hover { background: var(--color-surface-offset); border-color: var(--color-primary); }
.theme:active { transform: translateY(1px); }

/* ================================================================ логотип */
.lock__logo { display: flex; align-items: center; gap: var(--space-3); }
.lock__mark { flex: none; display: block; }
.lock__txt {
  display: flex; flex-direction: column; line-height: 1.02;
  font-family: var(--font-head); letter-spacing: -0.02em;
}
.lock__txt b { font-weight: 800; font-size: 1.32em; color: var(--color-text); }
.lock__txt i { font-weight: 800; font-size: 1.32em; font-style: normal; color: var(--color-primary-text); }
.lock__logo--top .lock__txt { font-size: 0.82rem; }

/* ================================================================ секции */
.intro { padding-block: var(--space-12) var(--space-8); max-width: 62ch; }
.lead { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); }
.block { padding-block: var(--space-8); border-top: 1px solid var(--color-divider); }
.note { max-width: 70ch; color: var(--color-text-muted); margin-top: 0; }

/* ---- палитра ---- */
.sw-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.sw { /* PREV-2 */
  display: grid; grid-template-columns: 44px 1fr; gap: var(--space-1) var(--space-3);
  align-items: start; align-content: start;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-3);
}
.sw__chip {
  grid-row: span 3; width: 44px; height: 44px; border-radius: var(--radius-md);
  border: 1px solid rgba(42, 33, 28, 0.15);
}
.sw__name { font-family: var(--font-head); font-weight: 700; font-size: var(--text-sm); }
.sw__hex { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; }
.sw__use { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }

/* ---- шрифты ---- */
.type-demo { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.type-demo__col {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.type-demo__tag {
  display: block; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-faint); margin-bottom: var(--space-2);
}
.spec { margin: 0 0 var(--space-6); }
.spec:last-child { margin-bottom: 0; }
.spec--h1 { font-family: var(--font-head); font-weight: 800; font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.02em; }
.spec--h2 { font-family: var(--font-head); font-weight: 600; font-size: var(--text-lg); line-height: 1.2; }
.spec--body { font-size: var(--text-base); }
.spec--small { font-size: 0.875rem; color: var(--color-text-muted); }

/* ================================================================ концепты */
.concept {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  margin-bottom: var(--space-8); box-shadow: var(--shadow-sm);
}
.concept__head { display: flex; align-items: baseline; gap: var(--space-3); }
.concept__num {
  font-family: var(--font-head); font-weight: 800; font-size: var(--text-lg);
  color: var(--color-accent);
}
.concept__name { margin-bottom: var(--space-3); }
.concept__idea { margin-top: 0; max-width: 68ch; }
.concept__why {
  background: var(--color-surface-offset); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm); max-width: 74ch;
}
.concept__why b { font-family: var(--font-head); }

.stage-row {
  display: grid; gap: var(--space-3); margin: var(--space-6) 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-6) var(--space-3);
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  min-height: 220px;
}
.stage--light { background: var(--brand-cream); }
.stage--dark { background: #1E1815; border-color: #46392F; }
.stage__cap { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.stage--light .stage__cap { color: #7A6A5E; }
.stage--dark .stage__cap { color: #B3A093; }
.mono-dark { color: var(--brand-cocoa); }
.mono-light { color: var(--brand-cream); }
.mark { display: block; }

/* ---- фавикон ---- */
.favi {
  display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-end;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6);
}
.favi__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.favi__item span { font-size: var(--text-xs); color: var(--color-text-muted); }
.favi__item img { border-radius: var(--radius-sm); }
.favi__item--zoom .zoom { image-rendering: pixelated; border: 1px solid var(--color-border); }
.favi__note {
  flex: 1 1 260px; margin: 0; align-self: center;
  font-size: var(--text-sm); color: var(--color-text-muted); max-width: 46ch;
}

/* ---- локапы ---- */
.lock-row {
  display: grid; gap: var(--space-3); margin: var(--space-6) 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.lock {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.lock--light { background: var(--brand-cream); }
.lock--light .lock__txt b { color: var(--brand-cocoa); }
.lock--light .lock__txt i { color: var(--brand-tomato-dark); }
.lock--dark { background: #1E1815; border-color: #46392F; }
.lock--dark .lock__txt b { color: var(--brand-cream); }
.lock--dark .lock__txt i { color: var(--brand-amber); }
.lock .stage__cap { text-align: left; }
.lock--light .stage__cap { color: #7A6A5E; }
.lock--dark .stage__cap { color: #B3A093; }

.files { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); margin-bottom: 0; }

/* ================================================================ демо сайта */
.demo {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  overflow: hidden; background: var(--color-surface);
}
.demo__head {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface-2);
}
.demo__head .lock__txt { font-size: 0.75rem; }
.demo__nav { display: flex; gap: var(--space-4); margin-left: auto; font-size: var(--text-sm); }
.demo__nav a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.demo__nav a:hover { color: var(--color-primary-text); }
.demo__hero { padding: var(--space-8) var(--space-6) var(--space-6); max-width: 60ch; }
.demo__hero h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.demo__hero p { margin-top: 0; color: var(--color-text-muted); }
.demo__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.demo__cards {
  display: grid; gap: var(--space-3); padding: 0 var(--space-6) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.card {
  background: var(--color-surface-offset); border-radius: var(--radius-lg);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1);
}
.card__k { font-family: var(--font-head); font-weight: 800; font-size: var(--text-lg); color: var(--color-primary-text); }
.card__v { font-size: var(--text-sm); color: var(--color-text-muted); }

.btn {
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-sm);
  min-height: 48px; padding: 0 var(--space-6); border: 1px solid transparent;
  border-radius: var(--radius-full); background: var(--color-primary);
  color: var(--color-on-primary); cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.btn:hover { background: var(--color-primary-hover); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 0 var(--space-4); }
.btn--ghost {
  background: transparent; color: var(--color-primary-text);
  border-color: var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface-offset); }

.foot {
  padding-block: var(--space-8) var(--space-16);
  color: var(--color-text-faint); font-size: var(--text-sm);
}

@media (max-width: 560px) {
  .concept { padding: var(--space-4); }
  .stage { min-height: 180px; padding: var(--space-4) var(--space-2); }
  .demo__nav { display: none; }
  .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}