/* Ensure Tailwind scans this package's components/screens when used from another app */

@theme {
  --color-hprimary-50: rgb(var(--hp-primary-50));
  --color-hprimary-100: rgb(var(--hp-primary-100));
  --color-hprimary-200: rgb(var(--hp-primary-200));
  --color-hprimary-300: rgb(var(--hp-primary-300));
  --color-hprimary-400: rgb(var(--hp-primary-400));
  --color-hprimary-500: rgb(var(--hp-primary-500));
  --color-hprimary-600: rgb(var(--hp-primary-600, 230 126 80));
  --color-hprimary-700: rgb(var(--hp-primary-700));
  --color-hprimary-800: rgb(var(--hp-primary-800));
  --color-hprimary-900: rgb(var(--hp-primary-900));
  --color-hprimary-950: rgb(var(--hp-primary-950));
  --color-hprimary: var(--hp-primary, #5b9bd5);
  --color-hprimary-dark: var(--hp-primary-dark, #4a8ac4);
  --color-hprimary-bg: var(--hp-primary-bg, #e6ebf0);

  --color-hsecondary-50: rgb(var(--hp-secondary-50));
  --color-hsecondary-100: rgb(var(--hp-secondary-100));
  --color-hsecondary-200: rgb(var(--hp-secondary-200));
  --color-hsecondary-300: rgb(var(--hp-secondary-300));
  --color-hsecondary-400: rgb(var(--hp-secondary-400));
  --color-hsecondary-500: rgb(var(--hp-secondary-500));
  --color-hsecondary-600: rgb(var(--hp-secondary-600));
  --color-hsecondary-700: rgb(var(--hp-secondary-700));
  --color-hsecondary-800: rgb(var(--hp-secondary-800));
  --color-hsecondary-900: rgb(var(--hp-secondary-900));
  --color-hsecondary-950: rgb(var(--hp-secondary-950));
  --color-hsecondary: var(--hp-secondary, #2b4b7c);

  --color-haccent-50: rgb(var(--hp-accent-50));
  --color-haccent-100: rgb(var(--hp-accent-100));
  --color-haccent-200: rgb(var(--hp-accent-200));
  --color-haccent-300: rgb(var(--hp-accent-300));
  --color-haccent-400: rgb(var(--hp-accent-400));
  --color-haccent-500: rgb(var(--hp-accent-500));
  --color-haccent-600: rgb(var(--hp-accent-600));
  --color-haccent-700: rgb(var(--hp-accent-700));
  --color-haccent-800: rgb(var(--hp-accent-800));
  --color-haccent-900: rgb(var(--hp-accent-900));
  --color-haccent-950: rgb(var(--hp-accent-950));
  --color-haccent: var(--hp-accent, #e67e50);
  --color-haccent-dark: var(--hp-accent-dark, #d66f45);

  --color-hmuted: var(--hp-text-muted, #676c80);

  --animate-fade-in: fadeIn 0.3s ease-in-out;
  --animate-slide-up: slideUp 0.3s ease-out;
  --animate-slide-down: slideDown 0.3s ease-out;
  --animate-scale-in: scaleIn 0.2s ease-out;
  --animate-slide-in-from-right: slideInFromRight 0.3s ease-out;
  --animate-slide-out-to-right: slideOutToRight 0.3s ease-in;
  --animate-slide-in-from-left: slideInFromLeft 0.3s ease-out;
  --animate-slide-out-to-left: slideOutToLeft 0.3s ease-in;
  --animate-slide-in-from-top: slideInFromTop 0.3s ease-out;
  --animate-slide-out-to-top: slideOutToTop 0.3s ease-in;
  --animate-slide-in-from-bottom: slideInFromBottom 0.3s ease-out;
  --animate-slide-out-to-bottom: slideOutToBottom 0.3s ease-in;

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes slideUp {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

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

  @keyframes scaleIn {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes slideInFromRight {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
  }

  @keyframes slideOutToRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
  }

  @keyframes slideInFromLeft {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }

  @keyframes slideOutToLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }

  @keyframes slideInFromTop {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
  }

  @keyframes slideOutToTop {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
  }

  @keyframes slideInFromBottom {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
  }

  @keyframes slideOutToBottom {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
  }

  @keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer base {
  :root {
    /* Base colors are set dynamically by ThemeProvider from EcommerceConfig */
  }

  * {
    @apply border-gray-200;
  }

  body {
    @apply bg-gray-50 text-gray-900 antialiased;
  }

  button {
    cursor: pointer !important;
  }
}

@layer utilities {
  .animate-gradient {
    animation: gradient 3s ease infinite;
    background-size: 200% 200%;
  }

  [data-state="open"].fade-in { animation: fadeIn 0.2s ease-out; }
  [data-state="closed"].fade-out { animation: fadeOut 0.2s ease-in; }

  [data-state="open"].slide-in-from-right { animation: slideInFromRight 0.3s ease-out; }
  [data-state="closed"].slide-out-to-right { animation: slideOutToRight 0.3s ease-in; }

  [data-state="open"].slide-in-from-left { animation: slideInFromLeft 0.3s ease-out; }
  [data-state="closed"].slide-out-to-left { animation: slideOutToLeft 0.3s ease-in; }

  [data-state="open"].slide-in-from-top { animation: slideInFromTop 0.3s ease-out; }
  [data-state="closed"].slide-out-to-top { animation: slideOutToTop 0.3s ease-in; }

  [data-state="open"].slide-in-from-bottom { animation: slideInFromBottom 0.3s ease-out; }
  [data-state="closed"].slide-out-to-bottom { animation: slideOutToBottom 0.3s ease-in; }

  .slide-in-from-right { animation: slideInFromRight 0.3s ease-out; }
  .slide-out-to-right { animation: slideOutToRight 0.3s ease-in; }
  .slide-in-from-left { animation: slideInFromLeft 0.3s ease-out; }
  .slide-out-to-left { animation: slideOutToLeft 0.3s ease-in; }
  .slide-in-from-top { animation: slideInFromTop 0.3s ease-out; }
  .slide-out-to-top { animation: slideOutToTop 0.3s ease-in; }
  .slide-in-from-bottom { animation: slideInFromBottom 0.3s ease-out; }
  .slide-out-to-bottom { animation: slideOutToBottom 0.3s ease-in; }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { @apply bg-gray-100; }
::-webkit-scrollbar-thumb { @apply bg-gray-300 rounded-full; }
::-webkit-scrollbar-thumb:hover { @apply bg-gray-400; }

@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}