/* ==========================================================================
   ŚWIAT BEAUTY — pudrowy róż
   Wyłącznie /beauty. Od 0.13 kosmetologia, paznokcie, brwi i rzęsy oraz
   depilacja — fryzjerstwo i trychologia przeszły do świata Hair.

   Ten plik niesie tylko paletę. Konstrukcja strony (kafle dziedzin, pasek
   kotwic, zwijane listy usług, hero ze zdjęciem) jest wspólna z Hair
   i siedzi w base.css, sekcja 11 — tam szukaj, jeśli chodzi o układ.

   Różnica wobec świata studia jest subtelna, ale celowa: studio operuje
   kremem z różowymi akcentami, Beauty odwraca proporcje — róż wchodzi
   na tła sekcji, a nadtytuły dostają terakotę zamiast złota.
   ========================================================================== */

.world-beauty {
  --bg:            var(--roz-1);
  --bg-alt:        var(--roz-5);
  --bg-karta:      #ffffff;

  --naglowek:      var(--pruski);
  --tresc:         var(--tekst);
  --przygaszony:   var(--tekst-3);
  --eyebrow:       var(--terakota);

  --akcent:        var(--zloto);
  --akcent-jasny:  var(--zloto-jasne);
  --akcent-grad:   linear-gradient(100deg, var(--zloto-jasne), var(--zloto));
  --akcent-tekst:  #ffffff;

  --kreska:        var(--roz-8);
  --kreska-mocna:  var(--roz-9);

  --stopka-bg:     var(--pruski);
  --stopka-tekst:  var(--turkus-9);

  /* Pasek światów w bordo. Pruski błękit obok różowego hero czytał się
     jako zielony i wybijał z całej strony. Bordo trzyma temperaturę
     świata, a złoto na nim ma kontrast 5,2:1 — powyżej progu AA. */
  --pasek-bg:      var(--bordo);
  --pasek-tekst:   var(--roz-przygaszony);
  --pasek-akcent:  var(--zloto-swiatlo);

  --header-bg:     var(--roz-1);
  --header-kreska: var(--roz-8);
  --header-tekst:  var(--pruski);

  /* Tokeny komponentów strony z dziedzinami — base.css, sekcja 11 */
  --swiat-akcent:  var(--roz-akcent);
  --swiat-ciemny:  var(--terakota);
  --swiat-mgla:    var(--tekst-7);
  --swiat-slot-1:  var(--roz-6);
  --swiat-slot-2:  var(--roz-7);
}

/* Hero — róż przechodzący w ciepły krem, tak jak kafel Beauty
   na stronie głównej. Ten sam gradient buduje ciągłość między
   zapowiedzią a stroną docelową. */
.world-beauty .mj-hero-sekcja {
  background: linear-gradient(155deg, var(--roz-4) 0%, var(--roz-5) 55%, var(--roz-3) 100%);
}

/* Pas z sekcjami dziedzin */
.world-beauty .mj-pas-dziedziny {
  background: linear-gradient(150deg, var(--roz-3), var(--roz-4));
}