@import "tailwindcss";

@theme {
  /* Primary Colors - Blend of old and new */
  --color-primary: #fed400; /* Yellow - kept from current */
  --color-primary-hover: #e5c000;
  --color-primary-light: #fff4b3;
  
  /* Secondary Colors - From new design */
  --color-secondary: #2563EB; /* Blue - ความน่าเชื่อถือ, เทคโนโลยี */
  --color-secondary-hover: #1d4ed8;
  --color-accent-purple: #7C3AED; /* Purple - AI, Innovation */
  --color-accent-purple-hover: #6d28d9;
  
  /* Accent Colors */
  --color-accent-green: #10B981; /* Green - เติบโต, ความสำเร็จ */
  --color-accent-green-hover: #059669;
  --color-accent-teal: #0891b2;
  
  /* Neutral Colors */
  --color-gray-light: #F3F4F6; /* From new design */
  --color-gray: #6b7280;
  --color-gray-dark: #1F2937; /* From new design */
  --color-text: #0f0f0f;
  --color-white: #FFFFFF;
  
  /* Fonts */
  --font-sans: 'Noto Sans Thai', system-ui, sans-serif;
  --font-display: 'Kanit', var(--font-sans);
}

@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-sans);
    color: var(--color-text);
    line-height: 1.7;
    background: var(--color-gray-light);
    font-size: 1.125rem;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.75em;
    color: var(--color-gray-dark);
  }
  p { margin-bottom: 1.25em; font-size: 1.0625rem; }
  * { transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
}

@layer components {
  /* Glass Morphism */
  .glass { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
  .glass-dark { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
  
  /* Card Hover Effects */
  .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }
  
  /* Gradient Backgrounds */
  .gradient-primary { background: linear-gradient(135deg, var(--color-primary) 0%, #ffd700 100%); }
  .gradient-secondary { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent-purple) 100%); }
  .gradient-hero { background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); }
  .gradient-cta { background: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-accent-green) 100%); }
  
  /* Button Styles */
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(254, 212, 0, 0.3);
  }
  
  .btn-secondary {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent-purple));
    color: var(--color-white);
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
  }
  
  .btn-accent {
    background-color: var(--color-accent-green);
    color: var(--color-white);
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .btn-accent:hover {
    background-color: var(--color-accent-green-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4);
  }
  
  /* Section Spacing */
  .section-padding { padding: 5rem 1rem; }
  @media (min-width: 768px) { .section-padding { padding: 6rem 2rem; } }
  @media (min-width: 1024px) { .section-padding { padding: 8rem 4rem; } }
}

@layer utilities {
  /* Text Colors */
  .text-primary { color: var(--color-primary); }
  .text-secondary { color: var(--color-secondary); }
  .text-accent-purple { color: var(--color-accent-purple); }
  .text-accent-green { color: var(--color-accent-green); }
  
  /* Background Colors */
  .bg-primary { background-color: var(--color-primary); }
  .bg-secondary { background-color: var(--color-secondary); }
  .bg-accent-purple { background-color: var(--color-accent-purple); }
  .bg-accent-green { background-color: var(--color-accent-green); }
  .bg-gray-light { background-color: var(--color-gray-light); }
  
  /* Hover Effects */
  .hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
  
  /* Animation Utilities */
  .animate-float { animation: float 6s ease-in-out infinite; }
  .animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }
  
  /* Fade In Animation */
  .fade-in { animation: fadeIn 0.6s ease-out; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

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

/* Floating Contact Button */
.floating-contact {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.floating-contact-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.floating-contact-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Process Step Cards */
.process-step-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Sticky Header */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Service Card */
.service-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Parallax Effect */
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
