/* ============================================================
   tokens.css — дизайн-система сайта «Мастерская М.А.М»
   ЕДИНСТВЕННОЕ место, где живут цвета, шрифты и размеры.
   Стадия 3: значения подставлены из CLIENT.md (раздел 8),
   палитра выведена из маскота Мая.
   Менять тему = менять только этот файл.
   ============================================================ */

/* Kornilow — платная антиква для заголовков (брендбук v3).
   Файлы шрифта пока не предоставлены — поэтому @font-face ОТКЛЮЧЁН,
   чтобы не дёргать несуществующие файлы (иначе 404 на каждой странице).
   Сейчас заголовки используют фолбэк Playfair Display.
   Когда появится файл: положите Kornilow.woff2/.woff в /assets/fonts/,
   РАСКОММЕНТИРУЙТЕ блок ниже и поднимите ?v= у tokens.css — заголовки переключатся. */
/*
@font-face {
  font-family: "Kornilow";
  src: url("/assets/fonts/Kornilow.woff2") format("woff2"),
       url("/assets/fonts/Kornilow.woff") format("woff");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
*/

:root {
  /* --- Цвета (брендбук v4: отбелённая тёплая палитра) --- */
  --color-bg:        #fbf5e6;   /* отбелённый тёплый крем (фон)      */
  --color-surface:   #f2e9d4;   /* мягкая песочная панель            */
  --color-surface-2: #f3e8c8;   /* жёлто-бежевый, отбелён            */
  --color-ink:       #322c24;   /* графит, не чёрный                 */
  --color-ink-soft:  #5e5648;   /* приглушённый текст                */
  --color-accent:    #d85f2e;   /* рыжий — главный акцент (не фон)   */
  --color-accent-btn:#bc4a1c;   /* тёмный рыжий для кнопок (AA)      */
  --color-accent-ink:#a8431b;   /* рыжий для текста/ссылок (AA)      */
  --color-accent-2:  #3e7e8c;   /* петроль — холодный акцент         */
  --color-accent-2-ink:#2e6473; /* тёмный петроль для текста         */
  --color-marigold:  #f2b23a;   /* маригольд — тёплый жёлтый         */
  --color-rose:      #e89788;   /* коралл-роза (тег «игра»)         */
  --color-olive:     #93a05a;   /* олива (тег «тепло»)              */
  --color-cream:     #f3e8c8;   /* кремовый (текст в тёмном подвале) */
  --color-border:    #e7dec8;   /* мягкая тёплая граница             */
  --color-line:      rgba(50, 44, 36, .18);  /* «чернильная» линия    */
  --color-white:     #fffdf8;   /* near-white (карточки, текст на акценте) */

  /* --- Семантика (минимум, для форм) --- */
  --color-error:     #b3261e;
  --color-success:   #1d7d52;

  /* --- Типографика (официальный брендбук §09) ---
     Заголовки и имена: Cormorant Garamond — антиква (Light), акцент — курсив.
     Текст и UI: Manrope — гуманистический гротеск. Все с кириллицей. */
  --font-display: "Kornilow", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mark:    var(--font-display);

  --fs-h1:  clamp(2.25rem, 5.5vw, 4rem);
  --fs-h2:  clamp(1.6rem, 3.6vw, 2.5rem);
  --fs-h3:  1.5rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --lh-tight: 1.15;
  --lh-body:  1.7;

  /* --- Шкала отступов (8/16/24/48/96 — стандарт конвейера) --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 3rem;
  --sp-5: 6rem;

  /* --- Прочее --- */
  --maxw: 72rem;          /* ширина контента   */
  --radius: 18px;         /* мягкие углы                         */
  --radius-sm: 12px;
  --shadow: 0 14px 36px rgba(47, 42, 32, .12);   /* мягкая премиальная тень */
  --shadow-soft: 0 6px 18px rgba(47, 42, 32, .08);
  --transition: 200ms ease;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);  /* «панчевый» ease-out для трансформаций (Emil) */
}

/* ---- Reset (минимальный) ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; height: auto; }

body {
  background: var(--color-bg);
  background-image: radial-gradient(rgba(47, 42, 32, .04) 1px, transparent 1px);
  background-size: 6px 6px;          /* лёгкое «зерно бумаги» */
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Типографика ---- */
h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-tight); font-weight: 600; color: var(--color-ink); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { max-width: 65ch; text-wrap: pretty; }   /* комфортная длина строки + без «сирот» */
a  { color: var(--color-accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Раскладка ---- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-2); }
.section   { padding-block: var(--sp-4); }
@media (min-width: 768px) { .section { padding-block: var(--sp-5); } }

.section--surface { background: var(--color-surface); }
.section--cream   { background: var(--color-cream); }

/* ---- Кнопка (один паттерн, два вида) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  min-height: 48px;                 /* удобный тап-таргет */
  background: var(--color-accent-btn);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), box-shadow var(--transition);
}
.btn:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}
.btn:active { transform: scale(0.97); box-shadow: var(--shadow-soft); }
.btn--ghost  { background: transparent; color: var(--color-accent-ink); border: 1.5px solid var(--color-accent-ink); box-shadow: none; }
.btn--accent2 { background: var(--color-accent-2); color: var(--color-white); }
.btn--block  { display: flex; width: 100%; justify-content: center; }

/* ---- Карточка (общий паттерн) ---- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  box-shadow: var(--shadow-soft);
}

/* ---- Доступность ---- */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* ---- Форма (точка сбора ПДн — стиль; разметка/логика на стадии 4/6) ---- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-block-end: var(--sp-2); }
.field label { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-small); color: var(--color-ink); }
.field input, .field textarea, .field select {
  font: inherit; padding: 0.75rem var(--sp-2);
  background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  color: var(--color-ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-accent); }
.consent { display: flex; gap: var(--sp-1); align-items: flex-start; font-size: var(--fs-small); color: var(--color-ink-soft); }
.consent input { margin-top: 0.2em; }

/* ---- Cookie-баннер (стиль; логика в main.js) ---- */
.cookie-banner {
  position: fixed; inset-inline: var(--sp-2); bottom: var(--sp-2);
  max-width: var(--maxw); margin-inline: auto;
  background: var(--color-white); color: var(--color-ink);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: var(--sp-2); box-shadow: var(--shadow);
  display: none; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  z-index: 1000;
}
.cookie-banner[data-show="true"] { display: flex; }

/* Пока баннер виден — добавляем отступ снизу к странице, чтобы не перекрывал контент */
body:has(.cookie-banner[data-show="true"]) { padding-bottom: 140px; }
@media (min-width: 720px) {
  body:has(.cookie-banner[data-show="true"]) { padding-bottom: 100px; }
}
.cookie-banner__actions { display: flex; gap: var(--sp-1); margin-inline-start: auto; }

/* ---- Маскот Май (декоративный акцент) ---- */
.mascot { width: clamp(140px, 28vw, 320px); filter: drop-shadow(var(--shadow)); }
.mascot--watermark { opacity: .06; pointer-events: none; user-select: none; }