/**
 * TuttyCosas Kids — base.css
 * Tokens · Reset · Tipografía · Animaciones
 * Sprint 2 — Arquitectura modular
 */

/* ── TOKENS ── */
:root {
  --cream:        #FAF7F2;
  --cream-dark:   #F0EBE1;
  --cream-deep:   #E8DFD0;
  --sage:         #5C7A5F;
  --sage-light:   #7A9E7E;
  --sage-pale:    #E8F0E9;
  --sage-dark:    #3D5440;
  --terra:        #C17D5E;
  --terra-light:  #F5E6DC;
  --terra-dark:   #9A5F43;
  --bark:         #2C2416;
  --bark-mid:     #5A4E3C;
  --stone:        #8C8070;
  --stone-light:  #C8C0B4;
  --white:        #FFFFFF;
  --whatsapp:     #25D366;
  --whatsapp-dark:#128C48;

  --shadow-xs:  0 1px 4px rgba(44,36,22,0.06);
  --shadow-sm:  0 4px 16px rgba(44,36,22,0.08);
  --shadow-md:  0 8px 32px rgba(44,36,22,0.12);
  --shadow-lg:  0 20px 60px rgba(44,36,22,0.16);

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill:100px;

  --font-display:'Playfair Display', Georgia, serif;
  --font-body:   'DM Sans', system-ui, sans-serif;

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); background: var(--cream); color: var(--bark); overflow-x: hidden; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb { background: var(--sage-light); border-radius: 3px; }

/* ── ANIMACIONES ── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes float     { 0%,100% { transform:translateY(0px); } 50% { transform:translateY(-8px); } }
@keyframes leafSway  { 0%,100% { transform:rotate(-4deg) scale(1); } 50% { transform:rotate(4deg) scale(1.05); } }
@keyframes shimmer   { from { background-position:-400% center; } to { background-position:400% center; } }
@keyframes scaleIn   { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
@keyframes waPulse   { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@keyframes typingBounce { 0%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-5px); } }

.fade-up { animation: fadeUp 0.7s var(--ease-out) both; }
.fade-in { animation: fadeIn 0.5s ease both; }
.d1 { animation-delay:.1s; } .d2 { animation-delay:.2s; } .d3 { animation-delay:.3s; }
.d4 { animation-delay:.4s; } .d5 { animation-delay:.5s; }