@import url('styles/theme.css');

:root {
  --premium-blue: #2563eb;
  --premium-cyan: #0891b2;
  --premium-teal: #14b8a6;
  --premium-amber: #f59e0b;
  --premium-ink: #0f172a;
  --premium-line: #bfdbfe;
  --premium-shadow: 0 14px 30px rgba(37, 99, 235, .24), 0 0 0 1px rgba(20, 184, 166, .12);
}

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

@keyframes premium-button-glow {
  0%, 100% { box-shadow: 0 8px 18px rgba(37, 99, 235, .18); }
  50% { box-shadow: 0 12px 28px rgba(8, 145, 178, .28), 0 0 14px rgba(20, 184, 166, .16); }
}

button,
input[type="button"],
input[type="submit"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 2.55rem;
  border-radius: 11px;
  font-weight: 700;
  background-size: 220% 220%;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}

button::after,
input[type="button"]::after,
input[type="submit"]::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.28) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  content: "";
}

button:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover {
  transform: translateY(-3px);
  box-shadow: var(--premium-shadow);
  animation: premium-gradient-flow 2.4s ease-in-out infinite, premium-button-glow 2.4s ease-in-out infinite;
}

button:not(:disabled):hover::after,
input[type="button"]:not(:disabled):hover::after,
input[type="submit"]:not(:disabled):hover::after {
  transform: translateX(120%);
}

button:not(:disabled):active,
input[type="button"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active {
  transform: translateY(-1px) scale(.98);
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 3px;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
  cursor: not-allowed;
}

.primary-button,
.primary,
.button,
.actions button:not(.secondary):not(.danger),
.crop-button,
.download-button,
.download,
.btn-primary {
  border: 1px solid transparent !important;
  color: #fff !important;
  background: linear-gradient(120deg, var(--premium-blue), var(--premium-cyan), var(--premium-teal), var(--premium-blue)) !important;
  box-shadow: 0 7px 16px rgba(37, 99, 235, .18);
}

.secondary-button,
.secondary,
.clear-button,
.clear,
.control-button,
.size-button,
.btn-secondary {
  border: 1px solid var(--premium-line) !important;
  color: var(--premium-blue) !important;
  background: linear-gradient(120deg, #ffffff, #eff6ff, #ecfeff, #ffffff) !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .06);
}

.danger,
.danger-button,
.delete-button,
.remove,
.btn-danger {
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
  background: linear-gradient(120deg, #ffffff, #fff1f2, #ffe4e6, #ffffff) !important;
}

.success {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(120deg, #059669, #0f766e, #14b8a6, #059669) !important;
}

.orange {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(120deg, #f59e0b, #ea580c, #c2410c, #f59e0b) !important;
}

.btn-social {
  position: relative;
  overflow: hidden;
  border-width: 1px !important;
  background: #fff !important;
  background-size: 220% 220% !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
}

.btn-social:hover {
  opacity: 1 !important;
}

.btn-social:hover,
.btn-social:focus-visible {
  animation: premium-gradient-flow 2.4s ease-in-out infinite, premium-button-glow 2.4s ease-in-out infinite;
}

.remove-image,
.item-actions button,
.move,
.close-photo-tools {
  min-height: 0;
}

@media (max-width: 40rem) {
  button,
  input[type="button"],
  input[type="submit"] {
    min-height: 2.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  button::after,
  input[type="button"],
  input[type="button"]::after,
  input[type="submit"],
  input[type="submit"]::after {
    transition: none !important;
    animation: none !important;
  }
  button,
  input[type="button"],
  input[type="submit"] {
    animation: none !important;
  }
}