/* BizPortal Online Design System */
/* Premium SaaS design system for global market */

:root {
  /* Brand Colors - Professional SaaS Palette */
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;

  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;

  /* Typography Scale - Optimized for SaaS */
  --text-xs: 0.75rem;     /* 12px - Captions, labels */
  --text-sm: 0.875rem;    /* 14px - Small text, metadata */
  --text-base: 1rem;      /* 16px - Body text */
  --text-lg: 1.125rem;    /* 18px - Large body */
  --text-xl: 1.25rem;     /* 20px - Small headings */
  --text-2xl: 1.5rem;     /* 24px - Section headings */
  --text-3xl: 1.875rem;   /* 30px - Page headings */
  --text-4xl: 2.25rem;    /* 36px - Hero headings */
  --text-5xl: 3rem;       /* 48px - Display headings */
  --text-6xl: 3.75rem;    /* 60px - Large display */

  /* Spacing Scale */
  --space-1: 0.25rem;      /* 4px */
  --space-2: 0.5rem;       /* 8px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-8: 2rem;         /* 32px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */
  --space-32: 8rem;        /* 128px */

  /* Color Palette */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;

  --secondary-50: #faf5ff;
  --secondary-100: #f3e8ff;
  --secondary-200: #e9d5ff;
  --secondary-300: #d8b4fe;
  --secondary-400: #c084fc;
  --secondary-500: #a855f7;
  --secondary-600: #9333ea;
  --secondary-700: #7c3aed;
  --secondary-800: #6b21a8;
  --secondary-900: #581c87;

  /* Semantic Colors */
  --success-50: #ecfdf5;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;

  --error-50: #fef2f2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-base: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* Enhanced Typography Classes - More Conservative */
.text-display {
  @apply text-5xl lg:text-6xl xl:text-7xl font-black leading-tight tracking-tight;
}

.text-hero {
  @apply text-4xl lg:text-5xl font-bold leading-tight tracking-tight;
}

.text-heading-1 {
  @apply text-3xl lg:text-4xl font-bold leading-tight tracking-tight;
}

.text-heading-2 {
  @apply text-2xl lg:text-3xl font-semibold leading-tight tracking-tight;
}

.text-heading-3 {
  @apply text-xl lg:text-2xl font-semibold leading-snug tracking-tight;
}

.text-body-large {
  @apply text-lg leading-relaxed;
}

.text-body {
  @apply text-base leading-relaxed;
}

.text-body-small {
  @apply text-sm leading-relaxed;
}

/* Enhanced Component Classes - Premium SaaS Design */
.btn-primary {
  @apply inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg shadow-sm hover:shadow-md transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-secondary {
  @apply inline-flex items-center justify-center px-6 py-3 bg-white text-slate-700 font-semibold rounded-lg border border-slate-300 shadow-sm hover:shadow-md hover:bg-slate-50 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2;
}

.btn-ghost {
  @apply inline-flex items-center justify-center px-6 py-3 text-slate-600 font-semibold rounded-lg hover:bg-slate-100 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2;
}

.btn-danger {
  @apply inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-semibold rounded-lg shadow-sm hover:shadow-md hover:bg-red-700 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:ring-offset-2;
}

.btn-success {
  @apply inline-flex items-center justify-center px-6 py-3 bg-green-600 text-white font-semibold rounded-lg shadow-sm hover:shadow-md hover:bg-green-700 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:ring-offset-2;
}

.card {
  @apply bg-white rounded-2xl shadow-lg border border-slate-200/50 overflow-hidden;
}

.card-elevated {
  @apply bg-white rounded-2xl shadow-xl border border-slate-200/50 overflow-hidden transform hover:-translate-y-1 transition-all duration-300;
}

/* Enhanced Form Components */
.form-group {
  @apply space-y-2;
}

.form-label {
  @apply block text-sm font-semibold text-slate-700;
}

.form-label-required::after {
  content: ' *';
  @apply text-red-500;
}

.input-field {
  @apply w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all duration-200 text-base placeholder-slate-400;
}

.input-field:focus {
  @apply outline-none;
}

.input-field.error {
  @apply border-red-300 focus:ring-red-500/50 focus:border-red-500;
}

.input-field.success {
  @apply border-green-300 focus:ring-green-500/50 focus:border-green-500;
}

.form-error {
  @apply text-sm text-red-600 mt-1;
}

.form-success {
  @apply text-sm text-green-600 mt-1;
}

.form-help {
  @apply text-sm text-slate-500 mt-1;
}

/* Loading States */
.btn-loading {
  @apply relative;
}

.btn-loading::after {
  content: '';
  @apply absolute inset-0 bg-white/20 flex items-center justify-center;
}

.btn-loading .btn-text {
  @apply opacity-0;
}

.btn-loading .btn-spinner {
  @apply absolute inset-0 flex items-center justify-center;
}

/* Animation Classes */
.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

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

.animate-slide-in-right {
  animation: slideInRight 0.6s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Focus States for Accessibility */
.focus-visible {
  @apply focus:outline-none focus:ring-4 focus:ring-indigo-500/50 focus:ring-offset-2;
}

/* Loading States */
.loading {
  @apply opacity-50 pointer-events-none relative;
}

.loading::after {
  content: '';
  @apply absolute inset-0 bg-white/50 flex items-center justify-center;
}

.spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600;
}

/* Form Validation States */
.form-field.error {
  @apply border-red-500 bg-red-50;
}

.form-field.success {
  @apply border-green-500 bg-green-50;
}

.validation-message {
  @apply text-sm mt-1;
}

.validation-message.error {
  @apply text-red-600;
}

.validation-message.success {
  @apply text-green-600;
}

/* Enhanced Focus States */
.focus-visible {
  @apply focus:outline-none focus:ring-4 focus:ring-indigo-500/50 focus:ring-offset-2;
}

/* Enhanced Button Styles */
.btn-enhanced {
  @apply relative overflow-hidden rounded-xl px-6 py-3 font-semibold text-sm transition-all duration-300 transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-offset-2;
}

.btn-enhanced-primary {
  @apply bg-gradient-to-r from-indigo-600 to-indigo-700 text-white hover:from-indigo-700 hover:to-indigo-800 focus:ring-indigo-500 shadow-lg;
}

.btn-enhanced-secondary {
  @apply bg-gradient-to-r from-emerald-600 to-emerald-700 text-white hover:from-emerald-700 hover:to-emerald-800 focus:ring-emerald-500 shadow-lg;
}

.btn-enhanced::before {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity duration-300;
}

.btn-enhanced:hover::before {
  @apply opacity-100;
}

/* Button Icon Spacing */
.btn-enhanced i {
  @apply mr-2;
}

/* Mobile Button Enhancements */
@media (max-width: 768px) {
  .btn-enhanced {
    @apply w-full py-4 text-center;
  }
}

/* Button States */
.btn-loading {
  @apply relative;
}

.btn-loading::after {
  content: '';
  @apply absolute inset-0 flex items-center justify-center;
  @apply bg-white/20 rounded;
}

.btn-loading .spinner {
  @apply h-4 w-4;
}

/* Responsive Utilities */
.container-responsive {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.section-padding {
  @apply py-20 lg:py-32;
}

.grid-responsive {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8;
}

/* Better Responsive Grids */
.responsive-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

@media (max-width: 768px) {
  .responsive-grid {
    @apply grid-cols-1 gap-4;
  }
  
  .grid-responsive {
    @apply grid-cols-1 gap-4;
  }
}

/* Mobile-first responsive design */
@media (max-width: 640px) {
  .hero-gradient h2 {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  
  .hero-gradient p {
    font-size: 1.125rem;
  }
  
  .hero-gradient .flex {
    flex-direction: column;
    gap: 1rem;
  }
  
  .hero-gradient .flex a {
    width: 100%;
    text-align: center;
  }
}

/* Micro-interactions */
.hover-lift {
  @apply transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
}

.hover-glow {
  @apply transition-all duration-300 hover:shadow-lg hover:shadow-indigo-500/25;
}

.hover-scale {
  @apply transform transition-all duration-300 hover:scale-105;
}

/* Accessibility Improvements */
.sr-only {
  @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

.sr-only:focus {
  @apply static w-auto h-auto p-2 m-0 overflow-visible whitespace-normal;
}

/* Mobile Touch Targets - Minimum 44px */
button, a, input[type="submit"], input[type="button"], 
.btn, .btn-primary, .btn-secondary, 
.mobile-menu-button, .nav-link {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Mobile viewport fixes for iOS */
@supports (-webkit-touch-callout: none) {
  .mobile-fix {
    height: -webkit-fill-available;
  }
  
  .mobile-menu {
    height: -webkit-fill-available;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .btn-primary {
    @apply border-2 border-indigo-800;
  }
  
  .card {
    @apply border-2 border-slate-400;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-50: #0f172a;
    --primary-100: #1e293b;
    --primary-200: #334155;
    --primary-300: #475569;
    --primary-400: #64748b;
    --primary-500: #94a3b8;
    --primary-600: #cbd5e1;
    --primary-700: #e2e8f0;
    --primary-800: #f1f5f9;
    --primary-900: #f8fafc;
  }
  
  .card {
    @apply bg-slate-800 border-slate-700;
  }
  
  .input-field {
    @apply bg-slate-800 border-slate-600 text-white placeholder-slate-400;
  }
  
  .btn-secondary {
    @apply bg-slate-800 text-slate-200 border-slate-600 hover:bg-slate-700;
  }
}

/* Dark mode toggle */
.dark-mode {
  @apply bg-slate-900 text-white;
}

.dark-mode .card {
  @apply bg-slate-800 border-slate-700;
}

.dark-mode .input-field {
  @apply bg-slate-800 border-slate-600 text-white placeholder-slate-400;
}

.dark-mode .btn-secondary {
  @apply bg-slate-800 text-slate-200 border-slate-600 hover:bg-slate-700;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-slide-up,
  .animate-slide-in-left,
  .animate-slide-in-right,
  .animate-scale-in {
    animation: none;
  }
  
  .hover-lift,
  .hover-glow,
  .hover-scale {
    @apply transform-none;
  }
}