/* Font loading optimization */
@font-face {
  font-family: 'Brockmann';
  src: url('/brockmann-medium-webfont.ttf') format('truetype'),
       url('/brockmann-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  :root {
    --background: 210 20% 98%;
    --foreground: 192 100% 8%;

    --card: 0 0% 100%;
    --card-foreground: 192 100% 8%;

    --popover: 0 0% 100%;
    --popover-foreground: 192 100% 8%;

    --primary: 186 100% 38%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 25% 90%;
    --secondary-foreground: 192 100% 12%;

    --muted: 210 20% 94%;
    --muted-foreground: 200 10% 45%;

    --accent: 188 85% 65%;
    --accent-foreground: 192 100% 12%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 20% 88%;
    --input: 214 20% 88%;
    --ring: 186 100% 38%;

    --radius: 0.5rem;

    /* Text colors for light backgrounds */
    --text-primary: 192 100% 10%;
    --text-secondary: 200 10% 35%;
    --text-muted: 200 8% 50%;
    
    /* Background variations */
    --bg-subtle: 210 25% 96%;
    --bg-card: 0 0% 100%;

    --sidebar-background: 192 25% 96%;
    --sidebar-foreground: 192 50% 20%;
    --sidebar-primary: 186 100% 38%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 188 30% 92%;
    --sidebar-accent-foreground: 192 50% 20%;
    --sidebar-border: 210 20% 85%;
    --sidebar-ring: 186 100% 45%;
  }

  .dark {
    --background: 192 30% 8%;
    --foreground: 180 20% 92%;

    --card: 192 25% 12%;
    --card-foreground: 180 20% 92%;

    --popover: 192 25% 10%;
    --popover-foreground: 180 20% 92%;

    --primary: 186 100% 45%;
    --primary-foreground: 192 30% 5%;

    --secondary: 192 20% 18%;
    --secondary-foreground: 180 15% 88%;

    --muted: 192 18% 16%;
    --muted-foreground: 200 15% 65%;

    --accent: 188 70% 55%;
    --accent-foreground: 192 30% 8%;

    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 192 20% 20%;
    --input: 192 20% 20%;
    --ring: 186 100% 50%;

    /* Text colors for dark backgrounds */
    --text-primary: 180 20% 92%;
    --text-secondary: 200 15% 75%;
    --text-muted: 200 12% 60%;
    
    /* Background variations */
    --bg-subtle: 192 25% 10%;
    --bg-card: 192 25% 12%;

    --sidebar-background: 192 30% 10%;
    --sidebar-foreground: 180 15% 85%;
    --sidebar-primary: 186 100% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 192 25% 15%;
    --sidebar-accent-foreground: 180 15% 88%;
    --sidebar-border: 192 20% 18%;
    --sidebar-ring: 186 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-gradient-to-br from-dark-900 via-dark-800 to-dark-900 text-gray-100 font-sans antialiased;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: hsl(192, 30%, 12%);
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(186, 100%, 38%);
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(186, 100%, 45%);
  }
}

@layer components {
  .text-mask-image {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: cover;
    background-position: center;
  }

  .pulse-chip {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-pulse-900/50 text-pulse-300 border border-pulse-600/30 transition-all duration-300 hover:border-pulse-500 hover:shadow-glow-teal hover:scale-105;
  }
  
  /* Card hover effects */
  .card-hover {
    @apply transition-all duration-300 hover:transform hover:scale-[1.02] hover:-translate-y-1 hover:shadow-elegant-hover;
  }

  .glass-card-hover {
    @apply transition-all duration-500 hover:bg-dark-800/70 hover:border-pulse-500/30 hover:shadow-glow-teal;
  }

  /* Button hover effects */
  .button-glow {
    @apply transition-all duration-300 hover:shadow-glow-teal hover:scale-105 active:scale-95;
  }

  .button-pulse {
    @apply relative overflow-hidden transition-all duration-300 hover:shadow-glow-teal;
  }

  .button-pulse::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] transition-transform duration-700;
  }

  .button-pulse:hover::before {
    @apply translate-x-[100%];
  }

  /* Link hover effects */
  .link-underline {
    @apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-pulse-500 after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
  }
  
  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12;
  }

  .section-title {
    @apply text-3xl md:text-4xl lg:text-5xl font-display font-bold tracking-tight text-chrome-100;
  }

  .section-subtitle {
    @apply text-lg md:text-xl text-text-secondary mt-4 max-w-3xl;
  }

  .glass-card {
    @apply bg-dark-800/70 backdrop-blur-sm border border-chrome-700/20 rounded-2xl shadow-elegant transition-all duration-300 hover:shadow-elegant-hover;
  }

  .feature-card {
    @apply p-6 rounded-2xl bg-dark-800/50 border border-chrome-700/30 transition-all duration-500 hover:translate-y-[-5px] hover:border-pulse-500/50;
  }
  
  .button-primary {
    @apply bg-pulse-500 hover:bg-pulse-600 text-white font-medium py-3 px-6 rounded-full transition-all duration-300 shadow-md hover:shadow-lg transform hover:scale-[1.02] active:scale-[0.98];
  }

  .button-secondary {
    @apply bg-transparent border border-chrome-500 hover:border-pulse-400 text-chrome-100 hover:text-pulse-400 font-medium py-3 px-6 rounded-full transition-all duration-300;
  }
  
  .nav-link {
    @apply relative text-chrome-100 hover:text-pulse-400 py-2 transition-colors duration-300 after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 after:bg-pulse-400 after:transition-all hover:after:w-full;
  }
}

.image-scale-in {
  animation: scaleIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scaleIn {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fadeIn {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

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

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
}

/* Parallax effect */
.parallax {
  transform: translateY(var(--parallax-y, 0));
  transition: transform 0.1s ease-out;
}

/* Quill Editor Custom Styles */
.ql-toolbar {
  background: white !important;
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
  border-color: hsl(var(--border)) !important;
}

.ql-container {
  background: white !important;
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
  border-color: hsl(var(--border)) !important;
  font-size: 16px;
  min-height: 300px;
}

.ql-editor {
  min-height: 300px;
  font-family: inherit;
  color: #1a1a1a;
}

.ql-editor p {
  margin-bottom: 1em;
}

.ql-editor h1 {
  font-size: 2em;
  font-weight: bold;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}

.ql-editor h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
}

.ql-editor h3 {
  font-size: 1.17em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Blog Post Content Styles */
.blog-content {
  color: hsl(var(--chrome-100));
  line-height: 1.75;
}

.blog-content h1 {
  font-size: 2.25em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: hsl(var(--chrome-50));
}

.blog-content h2 {
  font-size: 1.875em;
  font-weight: bold;
  margin-top: 0.9em;
  margin-bottom: 0.45em;
  color: hsl(var(--chrome-50));
}

.blog-content h3 {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  color: hsl(var(--chrome-50));
}

.blog-content p {
  margin-bottom: 1.25em;
}

.blog-content ul,
.blog-content ol {
  margin-bottom: 1.25em;
  padding-left: 2em;
}

.blog-content li {
  margin-bottom: 0.5em;
}

.blog-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

.blog-content a:hover {
  color: hsl(var(--primary-foreground));
}

.blog-content blockquote {
  border-left: 4px solid hsl(var(--primary));
  padding-left: 1em;
  margin: 1.5em 0;
  font-style: italic;
  color: hsl(var(--muted-foreground));
}

.blog-content code {
  background: hsl(var(--muted));
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.blog-content pre {
  background: hsl(var(--muted));
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5em 0;
}

.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5em 0;
}

.blog-content strong {
  font-weight: 600;
}

.blog-content em {
  font-style: italic;
}