/* ==========================================================================
   ZZD BRAND — дизайн-токены, шрифты, базовые утилиты
   --------------------------------------------------------------------------
   Единый фирменный слой сети «Зубы за один день» (ЗЗД).
   Источник истины: ZZD_Guideline.pdf (палитра стр. 14, типографика стр. 18)
   + живой эталон https://razvitie.zzd23.ru
   Версия: 1.0.0

   Что внутри: @font-face (Leksa Sans + Merriweather), CSS-переменные
   (палитра, типографика, радиусы, тени, отступы, анимация) и небольшой
   набор типографических утилит. ВЁРСТКА КОМПОНЕНТОВ — в components.css.

   Пути к шрифтам — относительные к этому файлу: ./fonts/...
   Если кладёте brand.css не в assets/ — поправьте пути в @font-face.
   ========================================================================== */

/* ============================== ШРИФТЫ ================================== */

/* Leksa Sans — заголовки, цифры, микро-лейблы (heading). Начертания .otf. */
@font-face {
  font-family: "Leksa Sans";
  src: url("./fonts/LeksaSans.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Leksa Sans";
  src: url("./fonts/LeksaSans-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Leksa Sans";
  src: url("./fonts/LeksaSans-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Leksa Sans";
  src: url("./fonts/LeksaSans-DemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Leksa Sans";
  src: url("./fonts/LeksaSans-DemiboldItalic.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Leksa Sans";
  src: url("./fonts/LeksaSans-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Leksa Sans";
  src: url("./fonts/LeksaSans-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Leksa Sans";
  src: url("./fonts/LeksaSans-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* Merriweather — основной текст (body). .woff2 (приоритет) + .ttf запас. */
@font-face {
  font-family: "Merriweather";
  src: url("./fonts/Merriweather-Regular.woff2") format("woff2"),
       url("./fonts/Merriweather-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("./fonts/Merriweather-Italic.woff2") format("woff2"),
       url("./fonts/Merriweather-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("./fonts/Merriweather-Light.woff2") format("woff2"),
       url("./fonts/Merriweather-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("./fonts/Merriweather-Bold.woff2") format("woff2"),
       url("./fonts/Merriweather-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("./fonts/Merriweather-BoldItalic.woff2") format("woff2"),
       url("./fonts/Merriweather-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("./fonts/Merriweather-Black.woff2") format("woff2"),
       url("./fonts/Merriweather-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ============================== ТОКЕНЫ ================================== */

:root {
  /* ---- Палитра ЗЗД (канон, ZZD_Guideline.pdf стр. 14) ---- */
  --zzd-navy:        #062247;  /* основной: текст, фон тёмных секций, лого   */
  --zzd-navy-alt:    #00235B;  /* альтернативный тёмно-синий                  */
  --zzd-navy-deep:   #041827;  /* самый тёмный: фон футера                    */
  --zzd-light-blue:  #dce9f6;  /* светло-голубой: подложки метрик, плашки     */
  --zzd-gold:        #d19e68;  /* акцент: цифры, кнопки, буллеты, ::selection */
  --zzd-gold-hover:  #e0b47f;  /* акцент при наведении                        */
  --zzd-slate-blue:  #738DB6;  /* приглушённый сине-серый                     */
  --zzd-bg-light:    #F8F8F8;  /* фон страницы (светлая тема)                 */
  --zzd-white:       #FFFFFF;

  /* ---- Семантические алиасы ---- */
  --zzd-bg:            var(--zzd-bg-light);
  --zzd-fg:            var(--zzd-navy);
  --zzd-accent:        var(--zzd-gold);
  --zzd-ink:           #26374f; /* основной текст на светлом фоне             */
  --zzd-muted:         #5b6f8c; /* вторичный текст на светлом                 */
  --zzd-muted-2:       #7f97bd; /* третичный текст / подписи                  */
  --zzd-line:          #e3e9f1; /* тонкие границы, разделители                */
  --zzd-on-dark:       #c1d0e6; /* основной текст на тёмно-синем фоне         */
  --zzd-on-dark-muted: #8ea6ca; /* вторичный текст на тёмном                  */

  /* ---- Статусы (тёплые, приглушённые — НЕ кислотные и НЕ розовые) ---- */
  --zzd-danger:        #c0483a; /* ошибка/блокер (тёплый кирпичный)           */
  --zzd-danger-ink:    #9d3a2b; /* текст ошибки на светлом                    */
  --zzd-danger-bg:     #f6eeea; /* тёплая подложка (не розовая)               */
  --zzd-success:       #0f7a4f; /* успех/согласовано                          */
  --zzd-warning:       #c98a2e; /* предупреждение (тёплый янтарь)             */

  /* ---- Типографика ---- */
  --zzd-font-heading:   "Leksa Sans", "Segoe UI", Arial, sans-serif;
  --zzd-font-body:      "Merriweather", Georgia, "Times New Roman", serif;
  --zzd-heading-weight: 600;   /* DemiBold — вес заголовков по умолчанию      */
  --zzd-body-weight:    400;   /* Regular                                     */
  --zzd-tracking-head:  -0.01em; /* трекинг заголовков (плотный)              */
  --zzd-tracking-hero:  -0.02em; /* трекинг крупного hero                     */
  --zzd-tracking-eyebrow: 0.18em; /* трекинг микро-лейблов UPPERCASE          */
  --zzd-leading-body:   1.6;    /* межстрочный для текста                     */

  /* ---- Радиусы ---- */
  --zzd-r-xs:   6px;   /* пункты навигации, мелкие плашки                     */
  --zzd-r-sm:   8px;   /* инпуты, малые кнопки                                */
  --zzd-r-md:   10px;  /* метрики, вложенные блоки                            */
  --zzd-r-lg:   14px;  /* карточки, KPI                                       */
  --zzd-r-xl:   18px;  /* модалки, крупные панели                            */
  --zzd-r-pill: 100px; /* чипы, бейджи, «таблетки»                            */

  /* ---- Тени (сине-тонированные — фирменная «подпись») ---- */
  --zzd-shadow-card:       0 20px 44px -26px rgba(6, 34, 71, .40);
  --zzd-shadow-card-hover: 0 26px 60px -30px rgba(6, 34, 71, .45);
  --zzd-shadow-modal:      0 40px 100px -30px rgba(0, 0, 0, .60);
  --zzd-hairline-top:      0 1px 0 rgba(255, 255, 255, .08); /* на тёмном навбаре */

  /* ---- Раскладка и ритм ---- */
  --zzd-maxw:      1320px;                    /* макс. ширина контента        */
  --zzd-gutter:    clamp(18px, 4vw, 40px);    /* боковые поля                 */
  --zzd-section-y: clamp(78px, 11vh, 140px);  /* вертикальный ритм секций     */

  /* ---- Анимация ---- */
  --zzd-ease:      cubic-bezier(.2, .7, .2, 1); /* единая кривая              */
  --zzd-dur:       .3s;                         /* базовая длительность       */

  /* ---- Короткие алиасы (совместимость с версткой razvitie.zzd23.ru) ---- */
  --navy: var(--zzd-navy);
  --gold: var(--zzd-gold);
  --ink:  var(--zzd-ink);
  --line: var(--zzd-line);
  --ease: var(--zzd-ease);
  --maxw: var(--zzd-maxw);
}

/* ======================= БАЗОВЫЕ УТИЛИТЫ =============================== */
/* Только типографические примитивы. Полные компоненты — в components.css. */

.zzd-h1 {
  font-family: var(--zzd-font-heading);
  font-weight: var(--zzd-heading-weight);
  color: var(--zzd-navy);
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--zzd-tracking-head);
  margin: 0;
}
.zzd-h2 {
  font-family: var(--zzd-font-heading);
  font-weight: var(--zzd-heading-weight);
  color: var(--zzd-navy);
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: var(--zzd-tracking-head);
  margin: 0;
}
.zzd-body {
  font-family: var(--zzd-font-body);
  font-weight: var(--zzd-body-weight);
  color: var(--zzd-ink);
  font-size: 1rem;
  line-height: var(--zzd-leading-body);
}
.zzd-eyebrow {
  font-family: var(--zzd-font-heading);
  font-weight: 600;
  color: var(--zzd-gold);
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: var(--zzd-tracking-eyebrow);
  text-transform: uppercase;
}
.zzd-accent { color: var(--zzd-gold); }
.zzd-muted  { color: var(--zzd-muted); }