/* ЮНИВЕРИЯ · Design Tokens v2.0 · Light Air
 * Утверждено: 2026-04-21 (Mikl)
 * Замена v1 "Deep Space". Светлая воздушная палитра
 * на основе логотипа (рыжий кот) и брифа "легко, светло, воздушно".
 *
 * Единый источник правды для всех фронтенд-проектов бренда.
 * Запрещено использовать хардкод цветов в макетах — только через токены. */

:root {
  /* =======================================================
   * ЦВЕТА · v2 LIGHT AIR
   * ======================================================= */

  /* --- Фон (воздух) --- */
  --yun-paper:       #FFFFFF;   /* основной фон */
  --yun-cream:       #FFF8EF;   /* тёплая подложка, hero */
  --yun-sky:         #EEF5FC;   /* холодная подложка секций */
  --yun-fog:         #F5F8FC;   /* зоны, карточки */
  --yun-mist:        #E8EEF7;   /* border, разделители */

  /* --- Тёмные (только текст и "щит" лого!) --- */
  --yun-navy-ink:    #152449;   /* заголовки, лого */
  --yun-navy:        #1E3464;   /* основной тёмный (из "щита" лого) */
  --yun-slate:       #5A6A87;   /* вторичный текст */
  --yun-smoke:       #8192AD;   /* подписи, caption */

  /* --- Тёплые акценты (рыжий кот) --- */
  --yun-ginger:      #F08A3C;   /* главный тёплый акцент, CTA */
  --yun-ginger-soft: #FFB97A;   /* hover, подсветка */
  --yun-ginger-ink:  #C96B1E;   /* текст на светлом фоне */
  --yun-peach:       #FFE4C9;   /* мягкая подложка */

  /* --- Поддержка (золото и небо) --- */
  --yun-gold:        #FFC93C;   /* блик, "кисточка" */
  --yun-gold-soft:   #FFE49A;   /* нежный блик */
  --yun-sky-blue:    #5AA9E6;   /* "π", ссылки */
  --yun-sky-ink:     #2F7FC4;   /* тёмный голубой для текста */

  /* --- Сигнальные (только UI-статусы) --- */
  --yun-success:     #1FB56A;
  --yun-warning:     #E8A43A;
  --yun-error:       #E5484D;

  /* --- Градиенты бренда --- */
  --yun-grad-warm:   linear-gradient(135deg, #FFC93C 0%, #F08A3C 100%);
  --yun-grad-hero:   linear-gradient(160deg, #FFF8EF 0%, #EEF5FC 100%);
  --yun-grad-sky:    linear-gradient(135deg, #EEF5FC 0%, #FFE4C9 100%);
  --yun-grad-dual:   linear-gradient(135deg, #FFB97A 0%, #5AA9E6 100%);

  /* --- Алиасы для удобства (совместимость со старым кодом) --- */
  --yun-bg:          var(--yun-paper);
  --yun-bg-warm:     var(--yun-cream);
  --yun-bg-cold:     var(--yun-sky);
  --yun-text:        var(--yun-navy-ink);
  --yun-text-muted:  var(--yun-slate);
  --yun-accent:      var(--yun-ginger);
  --yun-accent-2:    var(--yun-gold);
  --yun-link:        var(--yun-sky-ink);

  /* =======================================================
   * ТИПОГРАФИКА
   * ======================================================= */
  --yun-font-display: 'Unbounded', 'Manrope', 'Inter', system-ui, sans-serif;
  --yun-font-body:    'Inter', 'Golos Text', system-ui, sans-serif;
  --yun-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Размеры (desktop) */
  --yun-fs-h1:    64px;
  --yun-fs-h2:    40px;
  --yun-fs-h3:    28px;
  --yun-fs-h4:    20px;
  --yun-fs-lead:  20px;
  --yun-fs-body:  16px;
  --yun-fs-small: 14px;
  --yun-fs-micro: 12px;

  /* Межстрочные */
  --yun-lh-tight: 1.15;
  --yun-lh-body:  1.55;
  --yun-lh-loose: 1.75;

  /* Веса */
  --yun-fw-regular:  400;
  --yun-fw-medium:   500;
  --yun-fw-semibold: 600;
  --yun-fw-bold:     700;
  --yun-fw-black:    800;

  /* Letter-spacing */
  --yun-ls-tight:  -0.02em;
  --yun-ls-normal: 0;
  --yun-ls-wide:   0.08em;
  --yun-ls-caps:   0.18em;

  /* =======================================================
   * СЕТКА и ОТСТУПЫ
   * ======================================================= */
  --yun-space-1:  4px;
  --yun-space-2:  8px;
  --yun-space-3:  12px;
  --yun-space-4:  16px;
  --yun-space-5:  20px;
  --yun-space-6:  24px;
  --yun-space-8:  32px;
  --yun-space-10: 40px;
  --yun-space-12: 48px;
  --yun-space-16: 64px;
  --yun-space-20: 80px;
  --yun-space-24: 96px;

  --yun-container: 1200px;
  --yun-gutter:    24px;

  /* =======================================================
   * РАДИУСЫ
   * ======================================================= */
  --yun-radius-sm:   10px;
  --yun-radius-md:   18px;
  --yun-radius-lg:   28px;
  --yun-radius-xl:   40px;
  --yun-radius-pill: 999px;

  /* =======================================================
   * ТЕНИ · воздушные, мягкие (navy rgba — из "щита" лого)
   * ======================================================= */
  --yun-shadow-xs:   0 1px 2px  rgba(30, 52, 100, 0.04);
  --yun-shadow-sm:   0 4px 14px rgba(30, 52, 100, 0.06);
  --yun-shadow-md:   0 10px 30px rgba(30, 52, 100, 0.08);
  --yun-shadow-lg:   0 24px 60px rgba(30, 52, 100, 0.10);
  --yun-shadow-xl:   0 40px 100px rgba(30, 52, 100, 0.14);
  --yun-shadow-glow: 0 0 40px rgba(240, 138, 60, 0.25);
  --yun-shadow-ring: 0 0 0 3px rgba(240, 138, 60, 0.18);

  /* =======================================================
   * ДВИЖЕНИЕ
   * ======================================================= */
  --yun-ease:      cubic-bezier(.2, .8, .2, 1);
  --yun-ease-out:  cubic-bezier(0, 0, .2, 1);
  --yun-ease-in:   cubic-bezier(.4, 0, 1, 1);
  --yun-dur-fast:  150ms;
  --yun-dur-base:  250ms;
  --yun-dur-slow:  450ms;

  /* =======================================================
   * Z-INDEX
   * ======================================================= */
  --yun-z-base:    0;
  --yun-z-raised:  1;
  --yun-z-sticky:  50;
  --yun-z-overlay: 100;
  --yun-z-modal:   200;
  --yun-z-toast:   300;
}

/* =======================================================
 * АДАПТИВ · мобильные размеры
 * ======================================================= */
@media (max-width: 768px) {
  :root {
    --yun-fs-h1:   40px;
    --yun-fs-h2:   28px;
    --yun-fs-h3:   22px;
    --yun-fs-lead: 18px;
    --yun-fs-body: 16px;
  }
}

/* =======================================================
 * БАЗОВЫЕ ТИПОГРАФИЧЕСКИЕ КЛАССЫ
 * ======================================================= */
.yun-h1 {
  font-family: var(--yun-font-display);
  font-size: var(--yun-fs-h1);
  line-height: var(--yun-lh-tight);
  font-weight: var(--yun-fw-black);
  color: var(--yun-navy-ink);
  letter-spacing: var(--yun-ls-tight);
}
.yun-h2 {
  font-family: var(--yun-font-display);
  font-size: var(--yun-fs-h2);
  line-height: var(--yun-lh-tight);
  font-weight: var(--yun-fw-bold);
  color: var(--yun-navy-ink);
  letter-spacing: var(--yun-ls-tight);
}
.yun-h3 {
  font-family: var(--yun-font-display);
  font-size: var(--yun-fs-h3);
  line-height: var(--yun-lh-tight);
  font-weight: var(--yun-fw-semibold);
  color: var(--yun-navy-ink);
}
.yun-h4 {
  font-family: var(--yun-font-display);
  font-size: var(--yun-fs-h4);
  line-height: var(--yun-lh-tight);
  font-weight: var(--yun-fw-semibold);
  color: var(--yun-navy-ink);
}
.yun-lead {
  font-family: var(--yun-font-body);
  font-size: var(--yun-fs-lead);
  line-height: var(--yun-lh-body);
  font-weight: var(--yun-fw-medium);
  color: var(--yun-slate);
}
.yun-body {
  font-family: var(--yun-font-body);
  font-size: var(--yun-fs-body);
  line-height: var(--yun-lh-body);
  color: var(--yun-navy-ink);
}
.yun-caption {
  font-family: var(--yun-font-body);
  font-size: var(--yun-fs-small);
  color: var(--yun-smoke);
}
.yun-eyebrow {
  font-family: var(--yun-font-display);
  font-size: var(--yun-fs-micro);
  font-weight: var(--yun-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--yun-ls-caps);
  color: var(--yun-ginger-ink);
}
.yun-mono { font-family: var(--yun-font-mono); }

/* Градиентный текст */
.yun-gradient-text {
  background: var(--yun-grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =======================================================
 * КНОПКИ
 * ======================================================= */
.yun-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--yun-space-2);
  padding: 14px 26px;
  border-radius: var(--yun-radius-pill);
  font-family: var(--yun-font-body);
  font-weight: var(--yun-fw-bold);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition:
    transform var(--yun-dur-fast) var(--yun-ease),
    box-shadow var(--yun-dur-base) var(--yun-ease),
    background var(--yun-dur-base) var(--yun-ease);
}

.yun-btn-primary {
  background: var(--yun-grad-warm);
  color: #fff;
  box-shadow: var(--yun-shadow-sm);
}
.yun-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--yun-shadow-md);
}

.yun-btn-ghost {
  background: var(--yun-paper);
  color: var(--yun-navy);
  border: 1.5px solid var(--yun-mist);
}
.yun-btn-ghost:hover {
  border-color: var(--yun-ginger);
  color: var(--yun-ginger-ink);
}

.yun-btn-link {
  background: transparent;
  color: var(--yun-ginger-ink);
  padding: 14px 20px;
  font-weight: var(--yun-fw-semibold);
}
.yun-btn-link:hover {
  color: var(--yun-ginger);
}

/* =======================================================
 * КАРТОЧКИ
 * ======================================================= */
.yun-card {
  background: var(--yun-paper);
  border: 1px solid var(--yun-mist);
  border-radius: var(--yun-radius-md);
  padding: var(--yun-space-8);
  box-shadow: var(--yun-shadow-sm);
  transition:
    transform var(--yun-dur-base) var(--yun-ease),
    box-shadow var(--yun-dur-base) var(--yun-ease),
    border-color var(--yun-dur-base) var(--yun-ease);
}
.yun-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--yun-shadow-md);
  border-color: var(--yun-ginger-soft);
}

/* =======================================================
 * ЧИПЫ / EYEBROW-бейджи
 * ======================================================= */
.yun-chip {
  display: inline-block;
  background: rgba(240, 138, 60, 0.14);
  color: var(--yun-ginger-ink);
  padding: 6px 14px;
  border-radius: var(--yun-radius-pill);
  font-family: var(--yun-font-display);
  font-size: var(--yun-fs-micro);
  font-weight: var(--yun-fw-bold);
  letter-spacing: var(--yun-ls-caps);
  text-transform: uppercase;
}

/* =======================================================
 * ДЕКОРАТИВНЫЙ "ЩИТ" ПОД ЛОГО (круг как на сайте)
 * ======================================================= */
.yun-shield {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFE4C9 0%, #FFF8EF 45%, #FFFFFF 100%);
  box-shadow: var(--yun-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.yun-shield::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--yun-ginger) 0%,
    var(--yun-gold) 25%,
    var(--yun-sky-blue) 50%,
    var(--yun-ginger) 75%,
    var(--yun-gold) 100%
  );
  z-index: -1;
  filter: blur(8px);
  opacity: 0.55;
}

/* =======================================================
 * УТИЛИТЫ · фоновые заливки секций
 * ======================================================= */
.yun-bg-paper { background: var(--yun-paper); }
.yun-bg-cream { background: var(--yun-cream); }
.yun-bg-sky   { background: var(--yun-sky); }
.yun-bg-fog   { background: var(--yun-fog); }
.yun-bg-hero  { background: var(--yun-grad-hero); }
.yun-bg-warm  { background: var(--yun-grad-warm); color: #fff; }

/* =======================================================
 * БАЗОВЫЙ RESET · применять к <body>
 * ======================================================= */
.yun-base {
  font-family: var(--yun-font-body);
  font-size: var(--yun-fs-body);
  line-height: var(--yun-lh-body);
  color: var(--yun-navy-ink);
  background: var(--yun-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}