/* Font import moved to HTML for better loading performance */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 210 33% 99%;
    --foreground: 210 35% 10%;

    --card: 0 0% 100%;
    --card-foreground: 210 35% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 35% 10%;

    --primary: 210 50% 28%;
    --primary-foreground: 0 0% 100%;

    --secondary: 25 100% 60%;
    --secondary-foreground: 210 35% 10%;

    --muted: 210 20% 96%;
    --muted-foreground: 210 20% 50%;

    --accent: 210 30% 95%;
    --accent-foreground: 210 50% 28%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 210 20% 90%;
    --input: 210 20% 90%;
    --ring: 210 50% 28%;

    --radius: 0.75rem;
  }

  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'SF Pro Display', 'Inter', sans-serif;
  }

  /* Advanced Gradient Mesh Styles */
  .bg-gradient-mesh {
    background-image: 
      radial-gradient(circle at 20% 50%, hsl(var(--primary) / 0.12) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, hsl(var(--secondary) / 0.15) 0%, transparent 50%),
      radial-gradient(circle at 40% 80%, hsl(var(--primary) / 0.10) 0%, transparent 50%),
      linear-gradient(135deg, hsl(var(--primary) / 0.05), hsl(var(--secondary) / 0.08), hsl(var(--primary) / 0.06));
  }
  
  .bg-gradient-noise {
    background-image: 
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        hsl(var(--primary) / 0.03) 2px,
        hsl(var(--primary) / 0.03) 4px
      ),
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        hsl(var(--secondary) / 0.02) 2px,
        hsl(var(--secondary) / 0.02) 4px
      );
  }

  .bg-gradient-interactive {
    background-image: conic-gradient(from 0deg at 50% 50%, 
      hsl(var(--primary) / 0.1) 0deg, 
      hsl(var(--secondary) / 0.15) 120deg, 
      hsl(var(--primary) / 0.12) 240deg, 
      hsl(var(--primary) / 0.1) 360deg);
  }

  .bg-gradient-radial {
    background-image: radial-gradient(circle, var(--tw-gradient-stops));
  }
}

@layer components {
  .hero-gradient {
    @apply bg-gradient-to-b from-white to-blue-50;
  }
  
  .card-glass {
    @apply bg-white/70 backdrop-blur-md border border-white/20 shadow-lg;
  }
  
  .promo-tag {
    @apply text-xs uppercase tracking-wider bg-poda-orange text-white px-2 py-0.5 rounded-full font-medium;
  }
  
  .section-padding {
    @apply py-16 px-4 sm:px-8 md:px-16 lg:px-24;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .animate-on-scroll {
    @apply opacity-0 transition-all duration-700 ease-out;
  }
  
  .animate-on-scroll.animated {
    @apply opacity-100;
  }
  
  .btn-primary {
    @apply bg-poda-blue hover:bg-poda-blue/90 text-white px-6 py-3 rounded-lg 
           font-medium transition-all duration-300 transform hover:translate-y-[-2px]
           hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-poda-blue/50;
  }
  
  .btn-secondary {
    @apply bg-poda-orange hover:bg-poda-orange/90 text-white px-6 py-3 rounded-lg 
           font-medium transition-all duration-300 transform hover:translate-y-[-2px]
           hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-poda-orange/50;
  }
  
  .btn-outline {
    @apply border border-poda-blue text-poda-blue hover:bg-poda-blue/10 px-6 py-3 
           rounded-lg font-medium transition-all duration-300 focus:outline-none 
           focus:ring-2 focus:ring-poda-blue/50;
  }

  .tariff-card {
    @apply relative overflow-hidden bg-white rounded-2xl shadow-lg transition-all duration-300 
           hover:shadow-xl border border-gray-100;
  }
  
  .tariff-header {
    @apply px-6 py-4 bg-gradient-to-r from-poda-blue to-poda-blue-light text-white;
  }
  
  .recommended-badge {
    @apply absolute top-0 right-0 bg-poda-orange text-white text-xs uppercase py-1 px-3 
           tracking-wider transform rotate-45 translate-x-[30%] translate-y-[-10%] shadow-md;
  }

  /* Speciální styly pro zvýraznění textu jen v hlavním nadpisu */
  .text-highlight-poda {
    @apply text-poda-blue;
  }
  
  .text-highlight-pripojeni {
    @apply text-poda-blue;
  }
  
  /* Styly pro zvýraznění části textu v hlavním nadpisu */
  .text-highlight-poda .text-highlight-po,
  .text-highlight-pripojeni .text-highlight-pri {
    @apply text-poda-orange;
  }
}

/* Custom animations */
.reveal-animation {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-animation.active {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations delay classes */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Radial gradient for hero */
.radial-gradient {
  background: radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, rgba(240,249,255,1) 100%);
}

/* Glass card effect */
.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Phone link optimizations for mobile devices */
.phone-link {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

.phone-link:active {
  transform: scale(0.95);
}

/* Prevent zoom on input focus for mobile */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  
  .phone-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Additional mobile touch optimizations */
@media (hover: none) and (pointer: coarse) {
  .phone-link:hover {
    background-color: transparent;
  }
}