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

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --landing: #1835db;
    --color-background: #ffffff;
    --color-text: #1f2937;
    --color-accent: #298c39;

    --font: 'Montserrat', sans-serif;

    --heading-font-family: 'Inter';
    --heading-font-size-base: 32px;
    --heading-line-height: 1.2;
    --heading-letter-spacing: 0px;
    --heading-variant: classic;

    --text-font-family: 'Inter';
    --text-font-size-base: 16px;
    --text-line-height: 1.5;
    --text-letter-spacing: 0px;

    --color-primary: #1835db;
    --color-surface: #f3f4f6;
    --color-text-secondary: #4b5563;
    --color-border: #e5e7eb;
    --color-error: #dc2626;
    --color-success: #059669;
    --color-warning: #d97706;
    --color-info: #2563eb;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --font: 'Montserrat', sans-serif;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Slim scrollbar styles */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

/* Device frames */
.iphone-frame {
  background: #1a1a1a;
  border-radius: 40px;
  padding: 15px;
  box-shadow:
    0 0 0 2px #333,
    0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

.iphone-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 25px;
  background: #1a1a1a;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.ipad-frame {
  background: #1a1a1a;
  border-radius: 20px;
  padding: 20px;
  box-shadow:
    0 0 0 2px #333,
    0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* Custom scrollbar for preview */
.preview-scroll::-webkit-scrollbar {
  width: 8px;
}

.preview-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.preview-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

/* Touch-friendly scrolling */
.preview-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Add this to your existing CSS */
.force-visible,
.force-animate {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

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

.preview-animate {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Add these animation styles to your existing globals.css file */

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

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

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

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

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

/* Animation utility classes */
.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out forwards;
}

.animate-fadeInDown {
  animation: fadeInDown 0.5s ease-out forwards;
}

.animate-fadeInLeft {
  animation: fadeInLeft 0.5s ease-out forwards;
}

.animate-fadeInRight {
  animation: fadeInRight 0.5s ease-out forwards;
}

/* Animation delays */
.delay-0 {
  animation-delay: 0s;
}
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-400 {
  animation-delay: 0.4s;
}
.delay-500 {
  animation-delay: 0.5s;
}
.delay-600 {
  animation-delay: 0.6s;
}
.delay-700 {
  animation-delay: 0.7s;
}
.delay-800 {
  animation-delay: 0.8s;
}
.delay-900 {
  animation-delay: 0.9s;
}
.delay-1000 {
  animation-delay: 1s;
}

/* Timeline-specific animation classes */
.timeline-item:nth-child(1) {
  animation-delay: 0s;
}
.timeline-item:nth-child(2) {
  animation-delay: 0.1s;
}
.timeline-item:nth-child(3) {
  animation-delay: 0.2s;
}
.timeline-item:nth-child(4) {
  animation-delay: 0.3s;
}
.timeline-item:nth-child(5) {
  animation-delay: 0.4s;
}
.timeline-item:nth-child(6) {
  animation-delay: 0.5s;
}
.timeline-item:nth-child(7) {
  animation-delay: 0.6s;
}
.timeline-item:nth-child(8) {
  animation-delay: 0.7s;
}

.bullet-point:nth-child(1) {
  animation-delay: 0.2s;
}
.bullet-point:nth-child(2) {
  animation-delay: 0.3s;
}
.bullet-point:nth-child(3) {
  animation-delay: 0.4s;
}
.bullet-point:nth-child(4) {
  animation-delay: 0.5s;
}
.bullet-point:nth-child(5) {
  animation-delay: 0.6s;
}
.bullet-point:nth-child(6) {
  animation-delay: 0.7s;
}
.bullet-point:nth-child(7) {
  animation-delay: 0.8s;
}
.bullet-point:nth-child(8) {
  animation-delay: 0.9s;
}
