/* Import theme */
@import 'theme.css';

/* Global styles */
body {
  font-family: var(--font-family);
  color: var(--text-primary-color);
}

/* App-inspired subtle gradient backgrounds */
.app-gradient-bg {
  background: linear-gradient(
    to bottom,
    #FFF5F8, /* Very light pink */
    #FFFFFF  /* White */
  );
}

/* App-style appbar/header */
.app-style-header {
  background: linear-gradient(
    to bottom,
    #FFF5F8,
    #FFF8FB
  );
  border-bottom: none;
}

/* Card styling from app */
.app-style-card {
  background-color: #FFF5F8;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #EAEAEA;
}

/* Button styling to match app */
.app-primary-button {
  background-color: #F397AA;
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  transition: background-color 0.2s ease;
}

.app-primary-button:hover {
  background-color: #E9899C;
}

/* Motivational quotes styling */
.motivational-quote {
  font-style: italic;
  color: #666666;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

/* Custom animation for cherry blossom elements */
.cherry-animation {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Custom form styling */
.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: border-color 0.2s ease;
  background-color: white;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-color);
  border-width: 1.5px;
}

/* Custom button hover effects */
.btn-hover-effect {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-hover-effect:after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0)
  );
  transition: all 0.4s ease;
}

.btn-hover-effect:hover:after {
  left: 100%;
}

/* Cherry blossom background pattern */
.cherry-bg {
  background-image: url('../images/cherry-pattern.png');
  background-size: 300px;
  background-repeat: repeat;
  background-opacity: 0.1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
}