@import "tailwindcss";

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Toast Animations */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

.animate-slide-out-right {
  animation: slide-out-right 0.3s ease-in;
}

/* CDFU Brand Colors - Tailwind v4 approach */
@theme {
  --color-primary-50: #e6f7fc;
  --color-primary-100: #b3e7f7;
  --color-primary-200: #80d7f2;
  --color-primary-300: #4dc7ed;
  --color-primary-400: #26bae9;
  --color-primary-500: #1ba5d8;
  --color-primary-600: #1890bb;
  --color-primary-700: #147b9e;
  --color-primary-800: #106681;
  --color-primary-900: #0c5164;
  --color-primary-950: #073d4d;

  --color-secondary-50: #fef9e7;
  --color-secondary-100: #fef0c3;
  --color-secondary-200: #fde79f;
  --color-secondary-300: #fcde7b;
  --color-secondary-400: #fbd557;
  --color-secondary-500: #f5c842;
  --color-secondary-600: #e2b338;
  --color-secondary-700: #cf9e2e;
  --color-secondary-800: #bc8924;
  --color-secondary-900: #a9741a;
  --color-secondary-950: #8a5d14;
}

/* Social Share Buttons Styling */
.share-buttons-wrapper {
  @apply flex flex-col;
}

.share-buttons-container {
  @apply flex gap-2;
}

.share-buttons-container--horizontal {
  @apply flex-row flex-wrap;
}

.share-buttons-container--vertical {
  @apply flex-col;
}

/* Base social share button styling */
.social-share-button {
  @apply inline-flex items-center justify-center px-4 py-2 rounded-lg transition-all duration-200;
  @apply text-sm font-medium text-white no-underline;
  @apply hover:shadow-md hover:-translate-y-0.5 hover:no-underline;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
}

/* Platform-specific colors */
.social-share-button.facebook {
  @apply bg-[#1877f2] hover:bg-[#145dbf] focus:ring-[#1877f2];
}

.social-share-button.twitter {
  @apply bg-[#1da1f2] hover:bg-[#1a8cd8] focus:ring-[#1da1f2];
}

.social-share-button.linkedin {
  @apply bg-[#0077b5] hover:bg-[#006399] focus:ring-[#0077b5];
}

.social-share-button.whatsapp {
  @apply bg-[#25d366] hover:bg-[#1faa52] focus:ring-[#25d366];
}

.social-share-button.telegram {
  @apply bg-[#0088cc] hover:bg-[#006da3] focus:ring-[#0088cc];
}

.social-share-button.email {
  @apply bg-gray-600 hover:bg-gray-700 focus:ring-gray-500;
}

.social-share-button.pinterest {
  @apply bg-[#e60023] hover:bg-[#bd001c] focus:ring-[#e60023];
}

/* Size variants */
.share-buttons-container--small .social-share-button {
  @apply text-xs px-3 py-1.5;
}

.share-buttons-container--small .social-share-button svg {
  @apply w-4 h-4;
}

.share-buttons-container--medium .social-share-button {
  @apply text-sm px-4 py-2;
}

.share-buttons-container--medium .social-share-button svg {
  @apply w-5 h-5;
}

.share-buttons-container--large .social-share-button {
  @apply text-base px-6 py-3;
}

.share-buttons-container--large .social-share-button svg {
  @apply w-6 h-6;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .share-buttons-container--horizontal {
    @apply flex-col;
  }

  .social-share-button {
    @apply w-full justify-center;
  }
}