/* ================================================
   base.css — Tema girlie pastel ✨
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Nunito:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Variables ── */
:root {
  /* Fondos */
  --bg:          #fdf4fb;
  --surface-1:   #fff8fe;
  --surface-2:   #fef0fa;
  --surface-3:   #fce8f5;

  /* Bordes */
  --border:      #f0cce8;
  --border-lit:  #e0a8d8;

  /* Paleta pastel */
  --rose:           #e8829a;
  --rose-light:     #f4afc0;
  --rose-pale:      #fde0e8;
  --lavender:       #b899d8;
  --lavender-light: #d4bfee;
  --lavender-pale:  #f0e8fa;
  --mint:           #7ec8a8;
  --mint-light:     #a8dfc4;
  --mint-pale:      #e0f5ec;
  --peach:          #f0a878;
  --peach-light:    #f8c8a8;
  --peach-pale:     #feeee4;
  --gold:           #c9a84c;
  --gold-light:     #e8c96a;

  /* Alias */
  --red:         var(--rose);
  --red-bright:  var(--rose-light);
  --teal:        var(--mint);
  --teal-light:  var(--mint-light);
  --purple:      var(--lavender);

  /* Texto */
  --text:        #3d2a4a;
  --text-dim:    #8a6a98;
  --text-mute:   #caaed8;

  /* Sombras */
  --shadow-sm:   0 2px 8px rgba(180, 100, 160, 0.12);
  --shadow-md:   0 4px 20px rgba(180, 100, 160, 0.18);
  --shadow-lg:   0 8px 32px rgba(180, 100, 160, 0.22);
  --shadow-glow: 0 0 24px rgba(232, 130, 154, 0.35);

  /* Tipografía */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Nunito', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Transiciones */
  --transition: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.15s ease;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(232, 130, 154, 0.09) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(184, 153, 216, 0.11) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(126, 200, 168, 0.05) 0%, transparent 60%);
  min-height: 100vh;
  line-height: 1.65;
}

/* ── Tipografía ── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

a {
  color: var(--rose);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--lavender); text-decoration: underline; }

/* ── Utilidades ── */
.hidden { display: none !important; }

.text-rose     { color: var(--rose); }
.text-lavender { color: var(--lavender); }
.text-mint     { color: var(--mint); }
.text-dim      { color: var(--text-dim); }
.text-gold     { color: var(--gold); }
.text-red      { color: var(--rose); }
.text-teal     { color: var(--mint-light); }
.text-mute     { color: var(--text-mute); }

.mono { font-family: var(--font-mono); font-size: 14px; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border-lit); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--rose-light); }

/* ── Selección ── */
::selection {
  background: var(--rose-pale);
  color: var(--rose);
}

/* ── Animaciones ── */
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.97); }
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  33%       { transform: scale(1.15) rotate(8deg); opacity: 0.85; }
  66%       { transform: scale(0.9) rotate(-5deg); opacity: 0.9; }
}

@keyframes bounceIn {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-4px); }
}

/* ── Toast ── */
#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, var(--rose), var(--lavender));
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
  z-index: 999;
  transform: translateY(60px) scale(0.9);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none;
}
#toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}