/* =========================================================
   Laguna UI – расширенная цветовая палитра
   (совместимо с Bootstrap 3.3.6, дополняет lu-cards.css)
   ========================================================= */

/* 1) Брендовые якоря — основа фирменного стиля */
:root{
  /* Брендовые цвета */
  --lu-brand-blue:       #5FC6F1;   /* основной акцент, синий */
  --lu-brand-yellow:     #FFED00;   /* фирменный жёлтый */
  --lu-brand-green:      #95C12B;   /* фирменный зелёный */

  /* Существующие акценты */
  --lu-accent:           #5FC6F1;   /* алиас brand-blue (буллеты, шевроны) */
  --lu-accent-ink:       #355F73;   /* editorial teal, тёмный синий */
  --lu-accent-soft:      #DFF3CF;   /* nav active */
  --lu-accent-soft-2:    #E5EDD2;   /* savings */

  /* CTA-градиент (primary button) */
  --lu-cta-start:        #D9922B;
  --lu-cta-end:          #C97F17;
  --lu-cta-gradient:     linear-gradient(135deg, #D9922B 0%, #C97F17 100%);
}

/* 2) Семейство синих — sky / water
   От ночного озера до утреннего тумана.
   Расширяет brand-blue и accent-ink. */
:root{
  --lu-midnight:         #1A3A4A;   /* hero bg, очень тёмный */
  --lu-deep-water:       #2B4A5C;   /* dark fill */
  /* --lu-accent-ink:    #355F73   — якорь, объявлен выше */
  --lu-lake:             #4A8AA5;   /* мост между ink и brand-blue */
  /* --lu-brand-blue:    #5FC6F1   — якорь, объявлен выше */
  --lu-sky:              #9DD9F5;   /* осветлённый brand */
  --lu-sky-mist:         #D6EEF9;   /* soft fill */
  --lu-sky-haze:         #EAF6FB;   /* subtle bg для секций */
  --lu-teal-river:       #6BA8AC;   /* мост между синими и зелёными */
}

/* 3) Лесные зелёные — forest
   Глубокие фоны и природные карточки.
   Стыкуется с brand-green как насыщенная база. */
:root{
  --lu-forest-deep:      #2F5D4E;   /* hero bg, тёмный лес */
  --lu-forest:           #4A7C5C;   /* основной зелёный фон */
  --lu-sage:             #7BA77F;   /* мост к brand-green */
  --lu-sage-light:       #B8D4A8;   /* soft fill */
  /* --lu-accent-soft:   #DFF3CF   — мята, объявлена выше */
  /* --lu-accent-soft-2: #E5EDD2   — мята-2, объявлена выше */
}

/* 4) Землистые коричневые — earth
   Контраст к зелёным и расширение CTA-семейства. */
:root{
  --lu-earth-deep:       #5C3D2E;   /* dark cards, шоколад */
  --lu-earth:            #8B5A3C;   /* основной коричневый */
  --lu-sand:             #C4A380;   /* warm fill, песок */
  --lu-cream:            #F0E4D0;   /* soft warm, крем */
}

/* 5) Тёплые нейтральные — neutral
   Фоны страниц, разделители, текст. Тёплее холодного серого. */
:root{
  --lu-paper:            #FAF7F0;   /* page bg, тёплый белый */
  --lu-stone:            #E8E0D0;   /* borders, разделители */
  --lu-bark:             #6B5D4F;   /* body text на светлом */
  --lu-bark-deep:        #2D2418;   /* headings, очень тёмный */
}

/* 6) Семантические алиасы — для быстрого использования
   Можно ссылаться по смыслу, а не по цвету. */
:root{
  --lu-bg-hero-water:    var(--lu-midnight);
  --lu-bg-hero-forest:   var(--lu-forest-deep);
  --lu-bg-hero-earth:    var(--lu-earth-deep);

  --lu-bg-soft-water:    var(--lu-sky-haze);
  --lu-bg-soft-forest:   var(--lu-accent-soft);
  --lu-bg-soft-earth:    var(--lu-cream);
  --lu-bg-page:          var(--lu-paper);

  --lu-text-heading:     var(--lu-bark-deep);
  --lu-text-body:        var(--lu-bark);
  --lu-text-on-dark:     var(--lu-cream);
  --lu-text-on-water:    var(--lu-sky-mist);
  --lu-text-on-forest:   var(--lu-sage-light);
  --lu-text-on-earth:    var(--lu-sand);

  --lu-border-soft:      var(--lu-stone);
}

/* =========================================================
   7) Утилитарные классы фонов
   Префикс .lu-bg-* — для быстрой расстановки в HTML.
   ========================================================= */

.lu-bg-midnight     { background-color: var(--lu-midnight); color: var(--lu-sky-mist); }
.lu-bg-deep-water   { background-color: var(--lu-deep-water); color: var(--lu-sky-mist); }
.lu-bg-ink          { background-color: var(--lu-accent-ink); color: var(--lu-sky-mist); }
.lu-bg-lake         { background-color: var(--lu-lake); color: var(--lu-paper); }
.lu-bg-brand-blue   { background-color: var(--lu-brand-blue); color: var(--lu-midnight); }
.lu-bg-sky          { background-color: var(--lu-sky); color: var(--lu-midnight); }
.lu-bg-sky-mist     { background-color: var(--lu-sky-mist); color: var(--lu-accent-ink); }
.lu-bg-sky-haze     { background-color: var(--lu-sky-haze); color: var(--lu-accent-ink); }
.lu-bg-teal-river   { background-color: var(--lu-teal-river); color: var(--lu-paper); }

.lu-bg-forest-deep  { background-color: var(--lu-forest-deep); color: var(--lu-cream); }
.lu-bg-forest       { background-color: var(--lu-forest); color: var(--lu-cream); }
.lu-bg-sage         { background-color: var(--lu-sage); color: var(--lu-paper); }
.lu-bg-sage-light   { background-color: var(--lu-sage-light); color: var(--lu-forest-deep); }
.lu-bg-soft         { background-color: var(--lu-accent-soft); color: var(--lu-forest-deep); }
.lu-bg-soft-2       { background-color: var(--lu-accent-soft-2); color: var(--lu-forest); }

.lu-bg-earth-deep   { background-color: var(--lu-earth-deep); color: var(--lu-cream); }
.lu-bg-earth        { background-color: var(--lu-earth); color: var(--lu-cream); }
.lu-bg-sand         { background-color: var(--lu-sand); color: var(--lu-bark-deep); }
.lu-bg-cream        { background-color: var(--lu-cream); color: var(--lu-earth-deep); }

.lu-bg-paper        { background-color: var(--lu-paper); color: var(--lu-bark-deep); }
.lu-bg-stone        { background-color: var(--lu-stone); color: var(--lu-bark); }

/* Брендовые акценты */
.lu-bg-yellow       { background-color: var(--lu-brand-yellow); color: var(--lu-bark-deep); }
.lu-bg-green        { background-color: var(--lu-brand-green); color: #173404; }
.lu-bg-cta          { background-image: var(--lu-cta-gradient); color: var(--lu-paper); }

/* =========================================================
   8) Утилитарные классы цвета текста
   ========================================================= */

.lu-color-brand-blue { color: var(--lu-brand-blue); }
.lu-color-ink        { color: var(--lu-accent-ink); }
.lu-color-midnight   { color: var(--lu-midnight); }
.lu-color-forest     { color: var(--lu-forest); }
.lu-color-forest-deep{ color: var(--lu-forest-deep); }
.lu-color-earth      { color: var(--lu-earth); }
.lu-color-earth-deep { color: var(--lu-earth-deep); }
.lu-color-bark       { color: var(--lu-bark); }
.lu-color-bark-deep  { color: var(--lu-bark-deep); }
.lu-color-yellow     { color: var(--lu-brand-yellow); }
.lu-color-green      { color: var(--lu-brand-green); }
.lu-color-muted      { color: var(--lu-muted, rgba(0,0,0,.55)); }

/* =========================================================
   9) Готовые градиенты для hero-секций
   ========================================================= */

.lu-grad-water       { background-image: linear-gradient(135deg, #1A3A4A 0%, #355F73 100%); color: var(--lu-cream); }
.lu-grad-forest      { background-image: linear-gradient(135deg, #2F5D4E 0%, #4A7C5C 100%); color: var(--lu-cream); }
.lu-grad-earth       { background-image: linear-gradient(135deg, #5C3D2E 0%, #8B5A3C 100%); color: var(--lu-cream); }
.lu-grad-sunset      { background-image: linear-gradient(135deg, #355F73 0%, #8B5A3C 100%); color: var(--lu-cream); }
.lu-grad-laguna      { background-image: linear-gradient(135deg, #355F73 0%, #2F5D4E 100%); color: var(--lu-cream); } /* фирменный: вода → лес */
.lu-grad-cta         { background-image: var(--lu-cta-gradient); color: var(--lu-paper); }

/* =========================================================
   10) Бейджи — готовые «плашки» под палитру
   Использование: <span class="lu-badge lu-badge--soft">Новинка</span>
   ========================================================= */

.lu-badge{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.lu-badge--soft      { background-color: var(--lu-accent-soft);   color: var(--lu-forest-deep); }
.lu-badge--yellow    { background-color: var(--lu-brand-yellow);  color: var(--lu-bark-deep); }
.lu-badge--sky-mist  { background-color: var(--lu-sky-mist);      color: var(--lu-midnight); }
.lu-badge--cream     { background-color: var(--lu-cream);         color: var(--lu-earth-deep); }
.lu-badge--ink       { background-color: var(--lu-accent-ink);    color: var(--lu-paper); }
.lu-badge--green     { background-color: var(--lu-brand-green);   color: #173404; }
.lu-badge--blue      { background-color: var(--lu-brand-blue);    color: var(--lu-midnight); }
.lu-badge--earth     { background-color: var(--lu-earth);         color: var(--lu-cream); }
.lu-badge--soft-2    { background-color: var(--lu-accent-soft-2); color: var(--lu-forest); }
.lu-badge--sand      { background-color: var(--lu-sand);          color: var(--lu-bark-deep); }