/* Shared page styles for the Antonella Kids static site */

body {
    font-family: "Nunito", sans-serif;
    background: #FDFBF7;
    color: #1E3A4C;
}
h1, h2, h3, h4, .font-display { font-family: "Poppins", sans-serif; letter-spacing: -0.02em; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ------------------------------------------------------------------
   Brand color utilities — defined in raw CSS so they always render,
   independent of Tailwind CDN JIT timing / dynamic DOM injection.
   ------------------------------------------------------------------ */
.bg-brand-cream       { background-color: #FDFBF7; }
.bg-brand-creamWarm   { background-color: #F5E9D3; }
.bg-brand-coral       { background-color: #EF8B7A; }
.bg-brand-coralSoft   { background-color: #F5C4B7; }
.bg-brand-sage        { background-color: #8FBFBC; }
.bg-brand-sageSoft    { background-color: #B8DAD7; }
.bg-brand-yellow      { background-color: #F2C761; }
.bg-brand-yellowSoft  { background-color: #F7D67E; }
.bg-brand-ink         { background-color: #1E3A4C; }

.bg-brand-ink\/5      { background-color: rgba(30,58,76,.05); }
.bg-brand-ink\/10     { background-color: rgba(30,58,76,.10); }
.bg-brand-ink\/20     { background-color: rgba(30,58,76,.20); }
.bg-brand-ink\/40     { background-color: rgba(30,58,76,.40); }
.bg-brand-ink\/60     { background-color: rgba(30,58,76,.60); }
.bg-brand-ink\/90     { background-color: rgba(30,58,76,.90); }

.text-brand-ink       { color: #1E3A4C; }
.text-brand-coral     { color: #EF8B7A; }
.text-brand-yellow    { color: #F2C761; }
.text-brand-sage      { color: #8FBFBC; }
.text-brand-ink\/40   { color: rgba(30,58,76,.40); }
.text-brand-ink\/50   { color: rgba(30,58,76,.50); }
.text-brand-ink\/60   { color: rgba(30,58,76,.60); }
.text-brand-ink\/70   { color: rgba(30,58,76,.70); }
.text-brand-ink\/80   { color: rgba(30,58,76,.80); }

.border-brand-ink     { border-color: #1E3A4C; }
.border-brand-coral   { border-color: #EF8B7A; }
.border-brand-ink\/5  { border-color: rgba(30,58,76,.05); }
.border-brand-ink\/10 { border-color: rgba(30,58,76,.10); }
.border-brand-ink\/15 { border-color: rgba(30,58,76,.15); }
.border-brand-ink\/20 { border-color: rgba(30,58,76,.20); }
.border-brand-ink\/40 { border-color: rgba(30,58,76,.40); }

.ring-brand-ink\/20   { box-shadow: 0 0 0 4px rgba(30,58,76,.20); }

.hover\:bg-brand-ink:hover       { background-color: #1E3A4C; }
.hover\:bg-brand-cream:hover     { background-color: #FDFBF7; }
.hover\:text-brand-ink:hover     { color: #1E3A4C; }
.hover\:text-white:hover         { color: #ffffff; }
.hover\:border-brand-ink:hover   { border-color: #1E3A4C; }
.hover\:border-brand-coral:hover { border-color: #EF8B7A; }
.hover\:border-brand-ink\/40:hover { border-color: rgba(30,58,76,.40); }
.hover\:decoration-brand-coral:hover { text-decoration-color: #EF8B7A; }

.focus\:border-brand-ink:focus { border-color: #1E3A4C; outline: none; }
.accent-brand-ink   { accent-color: #1E3A4C; }
.accent-brand-coral { accent-color: #EF8B7A; }

/* Fade in */
.animate-fade { animation: fadeInUp .55s ease-out both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Float */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out infinite; animation-delay: 2s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(6deg); } }

/* Wiggle */
.animate-wiggle { animation: wiggle 3s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Marquee */
.animate-marquee { animation: marquee 30s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Gallery */
.main-image { transition: transform .25s ease-out, opacity .25s ease-out; will-change: transform; }
.thumb[aria-current="true"] { outline: 2px solid #EF8B7A; outline-offset: 3px; border-color: #1E3A4C !important; }

/* Size / color buttons */
.size-btn { transition: all .2s ease; }
.color-btn { transition: all .2s ease; }

/* Card hover-lift */
.hover-lift { transition: transform .3s ease; }
.hover-lift:hover { transform: translateY(-6px); }