/* ============================================
   minhahistória — design tokens (Selva do Bluey palette)
   ============================================ */
:root {
  /* Brand backbone */
  --navy:        #1B3C7A;   /* primary, headlines, body text */
  --navy-deep:   #102758;
  --navy-darker: #0A1A40;   /* footer, deep hero */
  --navy-soft:   #2C5BB0;

  /* Warm CTA */
  --tangerine:      #FF7A3A;
  --tangerine-deep: #E55F1F;
  --tangerine-soft: #FFE5D2;

  /* Love accent */
  --coral:       #FF6B8A;
  --coral-deep:  #E04E72;
  --coral-soft:  #FFDAE3;

  /* Cool calm */
  --teal:        #1AA8B0;
  --teal-deep:   #138388;
  --teal-soft:   #D2F0F2;

  /* Highlight */
  --sun:         #FFD13D;
  --sun-deep:    #E5B30A;
  --sun-soft:    #FFF1B7;

  /* Theme extras (still in family) */
  --lime:        #A3D55C;
  --lime-deep:   #82B83D;
  --lime-soft:   #E3F2C8;

  --cherry:      #E5443A;
  --cherry-deep: #C42E25;
  --cherry-soft: #FBDDDA;

  --plum:        #B968D8;       /* fantasia magic */
  --plum-deep:   #964CB1;
  --plum-soft:   #F1DBF8;

  /* Background + paper */
  --bg:          #FBEFD9;   /* warm sand */
  --bg-cool:     #F5EDD9;
  --paper:       #FFFAF0;   /* card surface */
  --paper-2:     #FDF4E0;

  /* Neutrals — all warm-tinted, not pure gray */
  --ink:         #1B3C7A;
  --ink-2:       #2A4682;
  --muted:       #5E6B8C;
  --soft:        #9CA4BB;
  --line:        #ECDFC1;
  --line-2:      #F5EAD0;
  --line-cool:   #DFD7E5;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 9999px;

  /* Shadows — warm-tinted (sandstone instead of cool gray) */
  --shadow-card: 0 2px 12px rgba(27, 60, 122, 0.08);
  --shadow-pop:  0 14px 36px rgba(27, 60, 122, 0.22);
  --shadow-band: 0 8px 26px rgba(27, 60, 122, 0.14);
  --shadow-warm: 0 8px 26px rgba(255, 122, 58, 0.20);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: 'Fredoka', 'Nunito', sans-serif; letter-spacing: -0.01em; }

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; left: 12px; top: -40px;
  background: var(--navy); color: white;
  padding: 8px 16px; border-radius: 8px;
  font-weight: 800; font-size: 13px;
  z-index: 100;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--sun); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: var(--r-pill);
  padding: 12px 22px;
  font-family: inherit;
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.03em;
  border: none; cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px) scale(1.02); filter: brightness(0.95); }
.btn:active { transform: translateY(0) scale(1); }
.btn-sm { padding: 9px 16px; font-size: 12px; }
.btn-lg { padding: 16px 28px; font-size: 14px; letter-spacing: 0.04em; }

/* Solid buttons by color name (kept stable for existing usage) */
.btn-solid-purple { background: var(--plum);      color: white; }
.btn-solid-yellow { background: var(--sun);       color: var(--navy-darker); }
.btn-solid-cyan   { background: var(--teal);      color: white; }
.btn-solid-green  { background: var(--lime-deep); color: white; }
.btn-solid-red    { background: var(--cherry);    color: white; }
.btn-solid-navy   { background: var(--navy);      color: white; }
.btn-solid-pink   { background: var(--coral);     color: white; }
.btn-solid-blue   { background: var(--navy-soft); color: white; }
.btn-solid-orange { background: var(--tangerine); color: white; }
.btn-solid-teal   { background: var(--teal);      color: white; }

.btn-solid-purple:hover { background: var(--plum-deep); }

.btn-solid-yellow:hover { background: var(--sun-deep); }
.btn-solid-orange:hover { background: var(--tangerine-deep); box-shadow: var(--shadow-warm); }
.btn-solid-pink:hover   { background: var(--coral-deep); }

/* Ghost variants (soft tinted) */
.btn-ghost-red    { background: var(--cherry-soft);    color: var(--cherry-deep); }
.btn-ghost-navy   { background: #E2E8F4;               color: var(--navy); }
.btn-ghost-pink   { background: var(--coral-soft);     color: var(--coral-deep); }
.btn-ghost-blue   { background: #DCE5F6;               color: var(--navy); }
.btn-ghost-green  { background: var(--lime-soft);      color: var(--lime-deep); }
.btn-ghost-cyan   { background: var(--teal-soft);      color: var(--teal-deep); }
.btn-ghost-yellow { background: var(--sun-soft);       color: var(--sun-deep); }
.btn-ghost-orange { background: var(--tangerine-soft); color: var(--tangerine-deep); }
.btn-ghost-purple { background: var(--plum-soft);      color: var(--plum-deep); }

.btn-outline {
  background: var(--paper); color: var(--navy);
  border: 1.5px solid var(--line);
}
.btn-outline:hover { background: var(--bg-cool); border-color: var(--tangerine); }

/* CTA pulse */
.btn-pulse { animation: pulseGlow 3.6s ease-in-out infinite; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,58,.45); }
  50%      { box-shadow: 0 0 0 14px rgba(255,122,58,0); }
}

/* ---------- Pill chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-pill);
  padding: 12px 20px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--navy);
  font-family: inherit;
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .18s ease;
}
.chip:hover     { border-color: var(--tangerine); color: var(--tangerine-deep); }
.chip.is-active { background: var(--tangerine); color: white; border-color: var(--tangerine); box-shadow: var(--shadow-warm); }

/* ---------- Product card ---------- */
.pcard {
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
  position: relative;
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop); }

.pcard-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pcard-cover .book-art { width: 60%; height: 78%; z-index: 2; }

.pcard-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--cherry); color: white;
  font-weight: 900; font-size: 10px;
  letter-spacing: 0.06em;
  padding: 6px 10px; border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  z-index: 3;
}
.pcard-badge.badge-blue   { background: var(--navy);      }
.pcard-badge.badge-pink   { background: var(--coral);     }
.pcard-badge.badge-green  { background: var(--lime-deep); }
.pcard-badge.badge-purple { background: var(--plum);      }
.pcard-badge.badge-yellow { background: var(--sun);       color: var(--navy-darker); }

.pcard-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.pcard-brand { font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.pcard-title { font-family: 'Fredoka', sans-serif; font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.15; min-height: 42px; letter-spacing: -0.01em; }
.pcard-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pcard-actions .btn { width: 100%; padding: 11px 12px; font-size: 11px; }

@media (min-width: 1220px) {
  .catalog-grid .pcard .pcard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* ---------- Book cover backgrounds (legacy names, new colors) ---------- */
.cover-red     { background: linear-gradient(155deg, #F26F66 0%, var(--cherry)    100%); }
.cover-navy    { background: linear-gradient(155deg, #3A66B2 0%, var(--navy)      100%); }
.cover-pink    { background: linear-gradient(155deg, #FF9AAF 0%, var(--coral)     100%); }
.cover-blue    { background: linear-gradient(155deg, #3A66B2 0%, var(--navy-soft) 100%); }
.cover-green   { background: linear-gradient(155deg, #BDE38B 0%, var(--lime-deep) 100%); }
.cover-cyan    { background: linear-gradient(155deg, #58D7DC 0%, var(--teal)      100%); }
.cover-yellow  { background: linear-gradient(155deg, #FFE17D 0%, var(--sun-deep)  100%); }
.cover-purple  { background: linear-gradient(155deg, #D499E8 0%, var(--plum)      100%); }
.cover-orange  { background: linear-gradient(155deg, #FFA76C 0%, var(--tangerine) 100%); }
.cover-deep    { background: linear-gradient(155deg, var(--navy) 0%, var(--navy-darker) 100%); }
.cover-teal    { background: linear-gradient(155deg, #58D7DC 0%, var(--teal-deep) 100%); }
.cover-lime    { background: linear-gradient(155deg, #BDE38B 0%, var(--lime-deep) 100%); }

/* ---------- Sticky header ---------- */
.header-stick {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  transition: box-shadow .25s ease;
}
.header-stick.is-stuck { box-shadow: 0 4px 18px rgba(27, 60, 122, 0.08); }

/* ---------- Search ---------- */
.search-input {
  width: 100%;
  height: 48px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--paper);
  padding: 0 16px 0 48px;
  font-size: 14px; font-weight: 500;
  color: var(--ink); outline: none;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.search-input:focus { border-color: var(--tangerine); box-shadow: 0 0 0 4px rgba(255,122,58,.16); }
.search-input::placeholder { color: var(--soft); }

/* ---------- Floating support / discount ---------- */
.fab-support {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--tangerine); color: white;
  font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 13px;
  padding: 14px 22px; border-radius: var(--r-pill);
  box-shadow: 0 12px 28px rgba(255, 122, 58, 0.45);
  cursor: pointer; border: none;
  font-family: inherit;
  transition: transform .18s ease;
}
.fab-support:hover { transform: translateY(-2px) scale(1.03); }

/* ---------- Floating promo pill (clean horizontal) ---------- */
.fab-discount {
  position: fixed; left: 22px; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper);
  color: var(--navy);
  padding: 10px 14px 10px 10px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  box-shadow: 0 12px 26px rgba(27,60,122,0.18);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  font-family: inherit;
  max-width: 280px;
}
.fab-discount:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(27,60,122,0.22); }
.fab-discount .fab-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sun); color: var(--navy-darker);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  font-family: 'Fredoka', sans-serif; font-weight: 900; font-size: 16px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.08);
}
.fab-discount .fab-text {
  display: flex; flex-direction: column; line-height: 1.1; min-width: 0;
}
.fab-discount .fab-text .top {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase;
}
.fab-discount .fab-text .bottom {
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 14px;
  color: var(--navy); white-space: nowrap;
}
.fab-discount .fab-text .bottom strong { color: var(--tangerine-deep); }
.fab-discount .close-x {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: white;
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

@keyframes wiggle {
  0%, 90%, 100% { transform: rotate(-4deg); }
  45% { transform: rotate(4deg); }
}

/* ---------- Marquee ---------- */
@keyframes marquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.marquee-track {
  display: inline-flex; gap: 56px;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
  padding-right: 56px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ---------- Avatar ring ---------- */
.avatar-ring {
  width: 110px; height: 110px;
  border-radius: 50%;
  padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.avatar-ring:hover { transform: translateY(-4px) scale(1.06); box-shadow: var(--shadow-warm); }
.avatar-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ---------- Hide scrollbar ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ---------- Section title ---------- */
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.section-title h2 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 30px; margin: 0;
  color: var(--navy); letter-spacing: -0.015em;
}
.section-title .count { color: var(--soft); font-weight: 700; }
.section-title .more {
  color: var(--tangerine); font-weight: 800; font-size: 13px;
  text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.section-title .more:hover { color: var(--tangerine-deep); }

/* ---------- Focus visible ---------- */
:focus-visible {
  outline: 2px solid var(--tangerine);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Utilities ---------- */
.container-x {
  max-width: 1280px;
  margin-left: auto; margin-right: auto;
  padding-left: 20px; padding-right: 20px;
}
@media (min-width: 768px) {
  .container-x { padding-left: 28px; padding-right: 28px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01s !important;
  }
  /* Marquee is a gentle horizontal scroll — keep it running so the promo strip stays alive */
  .marquee-track {
    animation: marquee 28s linear infinite !important;
  }
}

/* ============================================
   Legacy token aliases — keep existing components working
   The component code still references old purple/green names;
   these map them to the Bluey palette.
   ============================================ */
:root {
  --purple-100: var(--teal-soft);
  --purple-300: var(--coral-soft);
  --purple-500: var(--coral);
  --purple-600: var(--coral-deep);
  --purple-700: var(--tangerine-deep);
  --purple-800: var(--navy-deep);
  --purple-900: var(--navy-darker);

  --green-deep: var(--lime-deep);
  --green:      var(--lime);
  --pink-deep:  var(--coral-deep);
  --pink:       var(--coral);
  --blue:       var(--navy-soft);
  --orange:     var(--tangerine);
  --yellow:     var(--sun);
  --yellow-2:   var(--sun-deep);
  --cyan:       var(--teal);
  --cyan-2:     var(--teal-deep);
}