/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom styles go here - Tailwind is served separately from tailwind.css */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100;300;400;500;700;900&display=swap');

* {
  font-family: 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #faf8fd;
  color: #1f2937;
  line-height: 1.6;
}

/* Hexagon decoration elements */
.hexagon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #9d21e4 0%, #520a80 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0.1;
  position: absolute;
}

.hexagon-small {
  width: 50px;
  height: 50px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0.05;
  position: absolute;
}

/* Gradient backgrounds with amethyst palette */
.bg-gradient-amethyst {
  background: linear-gradient(135deg, #9d21e4 0%, #520a80 100%);
}

.bg-gradient-amethyst-light {
  background: linear-gradient(135deg, #f5f0fc 0%, #ede2f9 100%);
}

/* Text color utilities */
.text-amethyst-primary {
  color: #9d21e4;
}

.text-amethyst-deep {
  color: #520a80;
}

/* Smooth transitions */
a, button, input, select, textarea {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Form styling */
input[type="email"],
input[type="password"],
input[type="text"],
textarea,
select {
  border-color: #dcc5f0 !important;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
textarea:focus,
select:focus {
  border-color: #9d21e4 !important;
  box-shadow: 0 0 0 3px rgba(157, 33, 228, 0.1), inset 0 0 0 1px #9d21e4;
}

/* Button styling */
.btn-amethyst {
  background: linear-gradient(135deg, #9d21e4 0%, #7f1dd2 100%);
  color: white;
  font-weight: 500;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-amethyst::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.3s ease;
  z-index: -1;
}

.btn-amethyst:hover::before {
  left: 100%;
}

.btn-amethyst:hover {
  background: linear-gradient(135deg, #8b1dd9 0%, #6f1a9f 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(157, 33, 228, 0.3);
}

.btn-amethyst:active {
  transform: translateY(0);
}

/* Card styling */
.card-amethyst {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(157, 33, 228, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(157, 33, 228, 0.1);
  transition: all 0.3s ease;
}

.card-amethyst:hover {
  border-color: rgba(157, 33, 228, 0.4);
  box-shadow: 0 15px 40px rgba(157, 33, 228, 0.15);
  transform: translateY(-4px);
}

/* Navbar styling */
.navbar-amethyst {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(157, 33, 228, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Hexagon accent border */
.border-accent-amethyst {
  border: 2px solid #9d21e4;
  border-radius: 8px;
  position: relative;
}

.border-accent-amethyst::before,
.border-accent-amethyst::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #9d21e4;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.border-accent-amethyst::before {
  top: -6px;
  left: -6px;
}

.border-accent-amethyst::after {
  bottom: -6px;
  right: -6px;
}

/* Animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-down {
  animation: fadeInDown 0.6s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

/* Responsive design improvements */
@media (max-width: 640px) {
  .card-amethyst {
    padding: 1.25rem;
  }
  
  .btn-amethyst {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
  }
}

/* Glassmorphism effect */
.glass-effect {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

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

/* Selection color */
::selection {
  background: #9d21e4;
  color: white;
}