/* ================================================
   BONITOS Y GORDITOS — Global Styles
   Claymorphism Baby Theme · v1.0
   ================================================ */

:root {
  /* --- Brand Colors --- */
  --pink:           #FF91AD;
  --pink-dark:      #E8637D;
  --pink-light:     #FFD4E3;
  --pink-pale:      #FFF0F5;
  --lavender:       #B8AAFF;
  --lavender-dark:  #8A7AE0;
  --lavender-light: #E4E0FF;
  --mint:           #72D9A8;
  --mint-dark:      #4EBC86;
  --mint-light:     #C0F5DA;
  --peach:          #FFB07A;
  --peach-dark:     #E07A3A;
  --peach-light:    #FFE0CB;
  --sky:            #78C8F0;
  --sky-light:      #D0EEFF;
  --yellow:         #FFD97D;
  --yellow-light:   #FFF5D0;

  /* --- Backgrounds --- */
  --cream:          #FFF8F5;
  --cream-2:        #FFF0EC;
  --white:          #FFFFFF;

  /* --- Text --- */
  --text:           #4A3F5C;
  --text-muted:     #9B8FB0;
  --text-light:     #C4B8D8;

  /* --- Clay Shadow Alphas --- */
  --clay-pink:      rgba(255, 145, 173, 0.45);
  --clay-lavender:  rgba(184, 170, 255, 0.45);
  --clay-mint:      rgba(114, 217, 168, 0.4);
  --clay-peach:     rgba(255, 176, 122, 0.4);

  /* --- Typography --- */
  --font-display:   'Fredoka One', cursive;
  --font-body:      'Nunito', sans-serif;

  /* --- Spacing Scale --- */
  --s-xs:  0.5rem;
  --s-sm:  1rem;
  --s-md:  1.5rem;
  --s-lg:  2.5rem;
  --s-xl:  4rem;
  --s-2xl: 6rem;

  /* --- Border Radius (Clay-style) --- */
  --r-xs:   10px;
  --r-sm:   16px;
  --r-md:   24px;
  --r-lg:   32px;
  --r-xl:   48px;
  --r-full: 9999px;

  /* --- Transitions --- */
  --t-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-ease:   0.25s ease;
}

/* ========================
   RESET & BASE
   ======================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { list-style: none; }

/* ========================
   LAYOUT UTILITIES
   ======================== */
.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--s-md);
}

.container--narrow {
  max-width: 780px;
}

.section {
  padding-block: var(--s-xl);
}

/* ========================
   TYPOGRAPHY UTILITIES
   ======================== */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin-bottom: var(--s-sm);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--text);
  line-height: 1.2;
  margin-bottom: var(--s-sm);
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: var(--s-lg);
}

/* ========================
   BACKGROUND DECORATIONS
   ======================== */
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* ========================
   SCROLLBAR
   ======================== */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--pink-light); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--pink); }

/* ========================
   RESPONSIVE HELPERS
   ======================== */
@media (max-width: 1024px) {
  :root {
    --s-xl:  3rem;
    --s-2xl: 4.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --s-xl:  2.5rem;
    --s-2xl: 3.5rem;
  }

  .container {
    padding-inline: var(--s-sm);
  }
}