@tailwind base;
@tailwind components;
@tailwind utilities;

/* Process Flow Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@layer base {
  :root {
    /* Quote2ContractPro Brand Colors - Updated to match new logo */
    --primary-teal: #1e5a5a;      /* Dark teal from logo background */
    --primary-lime: #c8d946;      /* Lime green from "2" and "PRO" */
    --accent-white: #ffffff;      /* Clean white */
    --accent-off-white: #fefdfb;  /* Soft off-white */
    --accent-navy: #062843;       /* Deep navy for accents */
    
    /* Enhanced color palette for shadcn/ui */
    --background: 0 0% 100%;
    --foreground: 180 50% 18%; /* Dark teal for text */
    
    --card: 0 0% 100%;
    --card-foreground: 180 50% 18%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 180 50% 18%;
    
    --primary: 180 50% 24%; /* Primary teal #1e5a5a */
    --primary-foreground: 0 0% 100%;
    
    --secondary: 68 66% 56%; /* Lime green #c8d946 */
    --secondary-foreground: 180 50% 18%;
    
    --muted: 30 40% 98%; /* Off-white */
    --muted-foreground: 180 20% 45%;
    
    --accent: 68 66% 56%; /* Lime green accent */
    --accent-foreground: 180 50% 18%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 180 15% 91%;
    --input: 180 15% 91%;
    --ring: 68 66% 56%; /* Lime green focus ring */
    
    --radius: 0.5rem;
    
    /* Success/warning colors that complement the brand */
    --success: 68 66% 56%;
    --warning: 43 96% 56%;
    --error: 0 84% 60%;
  }

  .dark {
    --background: 180 50% 18%; /* Dark teal background */
    --foreground: 0 0% 98%;
    
    --card: 180 50% 22%;
    --card-foreground: 0 0% 98%;
    
    --popover: 180 50% 22%;
    --popover-foreground: 0 0% 98%;
    
    --primary: 68 66% 56%; /* Lime green in dark mode */
    --primary-foreground: 180 50% 18%;
    
    --secondary: 180 50% 30%;
    --secondary-foreground: 0 0% 98%;
    
    --muted: 180 50% 25%;
    --muted-foreground: 180 16% 75%;
    
    --accent: 68 66% 56%; /* Lime green accent */
    --accent-foreground: 180 50% 18%;
    
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 180 30% 35%;
    --input: 180 30% 35%;
    --ring: 68 66% 56%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  
  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-primary/30 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-primary/50;
  }
}

@layer components {
  /* Brand gradient backgrounds */
  .brand-gradient {
    background: linear-gradient(135deg, 
      hsl(var(--primary)) 0%, 
      hsl(var(--accent)) 50%, 
      hsl(var(--secondary)) 100%
    );
  }
  
  .brand-gradient-subtle {
    background: linear-gradient(135deg, 
      hsl(var(--muted)) 0%, 
      hsl(var(--background)) 50%, 
      hsl(var(--muted)) 100%
    );
  }
  
  /* Animation utilities */
  .animate-fade-in {
    animation: fade-in 0.3s ease-out;
  }
  
  .animate-slide-up {
    animation: slide-up 0.3s ease-out;
  }
  
  .animate-scale-in {
    animation: scale-in 0.2s ease-out;
  }
  
  /* Card hover effects */
  .card-hover {
    @apply transition-all duration-200 hover:shadow-lg hover:shadow-primary/10 hover:-translate-y-0.5;
  }
  
  /* Glass effect */
  .glass {
    @apply bg-white/80 backdrop-blur-sm border border-white/20;
  }
  
  /* Status indicators */
  .status-new {
    @apply bg-blue-100 text-blue-800 border-blue-200;
  }
  
  .status-in-progress {
    @apply bg-yellow-100 text-yellow-800 border-yellow-200;
  }
  
  .status-completed {
    @apply bg-green-100 text-green-800 border-green-200;
  }
  
  .status-cancelled {
    @apply bg-red-100 text-red-800 border-red-200;
  }
  
  /* Priority indicators */
  .priority-low {
    @apply bg-gray-100 text-gray-800;
  }
  
  .priority-medium {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .priority-high {
    @apply bg-orange-100 text-orange-800;
  }
  
  .priority-urgent {
    @apply bg-red-100 text-red-800;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Number counter animation */
@keyframes counter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.counter-animate {
  animation: counter 1s ease-out;
}

/* Table styling */
.table-hover tbody tr {
  @apply hover:bg-muted/50 transition-colors;
}

/* Form styling improvements */
.form-section {
  @apply space-y-6 p-6 border rounded-lg bg-card;
}

.form-group {
  @apply space-y-2;
}

/* Mobile responsive utilities */
@media (max-width: 768px) {
  .mobile-stack {
    @apply flex-col space-y-4 space-x-0;
  }
  
  .mobile-full {
    @apply w-full;
  }
  
  .mobile-padding {
    @apply px-4;
  }
  
  .mobile-text-sm {
    @apply text-sm;
  }
  
  /* Enhanced touch targets for mobile */
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better spacing for mobile forms */
  .form-section {
    @apply p-4;
  }
  
  /* Optimize table display for mobile */
  .table-responsive {
    @apply overflow-x-auto -mx-4 px-4;
  }
}

/* Tablet responsive utilities */
@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-grid {
    @apply grid-cols-2;
  }
  
  .tablet-padding {
    @apply px-6;
  }
}

/* Desktop optimizations */
@media (min-width: 1025px) {
  .desktop-grid {
    @apply grid-cols-3;
  }
  
  .desktop-max-width {
    @apply max-w-7xl mx-auto;
  }
}

/* Focus styles for accessibility */
.focus-brand {
  @apply focus:ring-2 focus:ring-primary/20 focus:border-primary;
}

/* Accessibility utilities (WCAG 2.1 compliant) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card-hover {
    @apply border-2 border-gray-900;
  }
  
  button, .button {
    @apply border-2 border-current;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  @apply outline-2 outline-offset-2 outline-primary;
}

/* Ensure sufficient color contrast */
.text-contrast {
  color: #000;
  background-color: #fff;
}

/* Skip link styling */
.skip-link {
  @apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50;
  @apply px-4 py-2 bg-primary text-white rounded-md;
}

/* ARIA live region styling */
[aria-live] {
  position: relative;
}

/* Accessible form labels */
label {
  @apply text-sm font-medium;
}

/* Required field indicator */
.required::after {
  content: ' *';
  @apply text-red-500;
}

/* Better focus indicators for buttons and links */
a:focus-visible,
button:focus-visible {
  @apply outline-2 outline-offset-2 outline-primary;
}

/* Accessible loading states */
.loading[aria-busy="true"] {
  @apply opacity-60 cursor-wait;
}

/* Screen reader announcements */
.announcement {
  @apply sr-only;
}

[role="alert"] {
  @apply font-medium;
}

/* Loading spinner */
.spinner {
  @apply animate-spin rounded-full border-2 border-muted border-t-primary;
}

/* Gradient text */
.gradient-text {
  @apply bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent;
}