/* Custom Animations and Pastel Theme Variables for NekoPlanner */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  --font-primary: 'Quicksand', 'Outfit', sans-serif;
  
  /* Sakura Pink Default */
  --bg-main: #fff0f5;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --accent-primary: #ff85a2;
  --accent-secondary: #ffb6c1;
  --accent-soft: #ffe4e8;
  --text-main: #4a3e4d;
  --text-muted: #8b7d90;
  --border-color: #ffd0dc;
  --shadow-color: rgba(255, 133, 162, 0.15);
}

[data-theme="sky"] {
  --bg-main: #f0f7ff;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --accent-primary: #70b0ff;
  --accent-secondary: #a0c8ff;
  --accent-soft: #e1f0ff;
  --text-main: #2c3e50;
  --text-muted: #7f8c8d;
  --border-color: #cce5ff;
  --shadow-color: rgba(112, 176, 255, 0.15);
}

[data-theme="matcha"] {
  --bg-main: #f3f9f3;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --accent-primary: #76c893;
  --accent-secondary: #b7e4c7;
  --accent-soft: #e8f5e9;
  --text-main: #2d4a3e;
  --text-muted: #6b8c7d;
  --border-color: #c7e9d1;
  --shadow-color: rgba(118, 200, 147, 0.15);
}

[data-theme="butter"] {
  --bg-main: #fffdf0;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --accent-primary: #ffc107;
  --accent-secondary: #ffe082;
  --accent-soft: #fff9c4;
  --text-main: #4e342e;
  --text-muted: #8d6e63;
  --border-color: #ffe0b2;
  --shadow-color: rgba(255, 193, 7, 0.15);
}

[data-theme="peach"] {
  --bg-main: #fff5f0;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --accent-primary: #ff9b71;
  --accent-secondary: #ffc4b2;
  --accent-soft: #ffe8df;
  --text-main: #4a2c20;
  --text-muted: #8c6b5d;
  --border-color: #ffd8cc;
  --shadow-color: rgba(255, 155, 113, 0.15);
}

[data-theme="lavender"] {
  --bg-main: #f8f5ff;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --accent-primary: #b388ff;
  --accent-secondary: #d1c4e9;
  --accent-soft: #ede7f6;
  --text-main: #371b58;
  --text-muted: #795299;
  --border-color: #e1bee7;
  --shadow-color: rgba(179, 136, 255, 0.15);
}

/* Dark Mode Overrides */
.dark {
  --bg-main: #1e1b26;
  --bg-card: rgba(35, 30, 48, 0.85);
  --bg-card-hover: rgba(45, 40, 60, 0.95);
  --text-main: #f3effa;
  --text-muted: #a79cb8;
  --border-color: #3b324a;
  --shadow-color: rgba(0, 0, 0, 0.3);
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-main);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--accent-secondary);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* Glassmorphism & Kawaii Cards */
.kawaii-glass {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 32px 0 var(--shadow-color);
}

.kawaii-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  box-shadow: 0 4px 20px 0 var(--shadow-color);
  border-radius: 1.25rem;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kawaii-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px 0 var(--shadow-color);
}

/* Keyframe Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes tailWag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(12deg); }
}
.animate-tail {
  transform-origin: bottom left;
  animation: tailWag 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
.animate-blink {
  transform-origin: center;
  animation: blink 3.5s infinite;
}

@keyframes pulseHeart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.animate-heart {
  animation: pulseHeart 1.5s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
.animate-sparkle {
  animation: sparkle 2s ease-in-out infinite;
}