/*
Theme Name: Padhayi Home
Description: A minimal homepage theme for exam goal selection with remember me functionality
Version: 1.0
Author: Padhayi
Text Domain: padhayi-home
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for the home theme */
@layer base {
  html {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
  
  body {
    @apply bg-gradient-to-br from-purple-50 to-indigo-100 min-h-screen;
  }
}

@layer components {
  .goal-card {
    @apply bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-purple-100;
  }
  
  .goal-card:hover {
    @apply border-purple-300;
  }
  
  .goal-card.selected {
    @apply ring-2 ring-purple-500 bg-purple-50;
  }
  
  .btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-8 py-3 rounded-xl font-semibold hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
  }
  
  .btn-secondary {
    @apply bg-white text-purple-600 px-8 py-3 rounded-xl font-semibold border-2 border-purple-200 hover:border-purple-300 hover:bg-purple-50 transition-all duration-200;
  }
  
  .toggle-switch {
    @apply relative inline-block w-12 h-6;
  }
  
  .toggle-switch input {
    @apply opacity-0 w-0 h-0;
  }
  
  .toggle-slider {
    @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 rounded-full transition-all duration-300;
  }
  
  .toggle-slider:before {
    @apply absolute content-[''] h-5 w-5 left-0.5 bottom-0.5 bg-white rounded-full transition-all duration-300;
  }
  
  .toggle-switch input:checked + .toggle-slider {
    @apply bg-purple-600;
  }
  
  .toggle-switch input:checked + .toggle-slider:before {
    @apply transform translate-x-6;
  }
  
  .fade-in {
    animation: fadeIn 0.6s ease-in-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .slide-up {
    animation: slideUp 0.8s ease-out;
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}