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

/* Optimize font loading with font-display: swap */
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/ClashDisplay-Variable.woff2') format('woff2'),
       url('/fonts/ClashDisplay-Variable.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
}

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lexend/v19/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    /* Primary teal color */
    --primary: 160 100% 40%;
    --primary-foreground: 0 0% 98%;
    
    /* Secondary accent color - purple */
    --secondary-accent: 280 75% 60%;
    --secondary-accent-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

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

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;

    --radius-pill: 9999px;
    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-xs: 10px;
    --radius-none: 0px;
    --radius: var(--radius-md);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 160 100% 40%;
    --primary-foreground: 240 5.9% 10%;
    
    /* Secondary accent color - purple */
    --secondary-accent: 280 75% 60%;
    --secondary-accent-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  /* Primary buttons - pill shape */
  .btn-primary, 
  .cta-button, 
  button[size="lg"] {
    @apply rounded-full;
  }

  /* Secondary buttons */
  .btn-secondary,
  button[variant="outline"] {
    @apply rounded-2xl;
  }

  /* Cards and containers */
  .card,
  .content-box,
  .panel {
    @apply rounded-[var(--radius-lg)];
  }

  /* Form elements */
  input,
  select,
  textarea {
    @apply rounded-[var(--radius-sm)];
  }

  /* Smaller UI components */
  .badge,
  .tag,
  .chip {
    @apply rounded-[var(--radius-xs)];
  }

  /* Modal windows */
  .modal,
  .dialog {
    @apply rounded-[var(--radius-md)];
  }

  /* Images and thumbnails */
  .thumbnail,
  .avatar {
    @apply rounded-[var(--radius-md)];
  }

  /* Navigation elements */
  .nav-item,
  .menu-item {
    @apply rounded-[var(--radius-sm)];
  }
  
  /* Enhanced Typography */
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans font-bold tracking-tight;
  }
  
  .font-display {
    @apply font-sans;
  }
  
  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl leading-tight;
  }
  
  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl leading-tight;
  }
  
  h3 {
    @apply text-2xl md:text-3xl lg:text-4xl;
  }
  
  p {
    @apply leading-relaxed text-balance;
  }
  
  /* Blog Post Styling - Enhanced for better HTML formatting */
  .blog-content {
    @apply space-y-6;
  }
  
  .blog-content h1 {
    @apply text-3xl font-bold mt-8 mb-4;
  }
  
  .blog-content h2 {
    @apply text-2xl font-bold mt-6 mb-3;
  }
  
  .blog-content h3 {
    @apply text-xl font-bold mt-5 mb-2;
  }
  
  .blog-content h4 {
    @apply text-lg font-bold mt-4 mb-2;
  }
  
  .blog-content p {
    @apply my-4 leading-relaxed;
  }
  
  .blog-content ul, .blog-content ol {
    @apply my-4 ml-6;
  }
  
  .blog-content ul {
    @apply list-disc;
  }
  
  .blog-content ol {
    @apply list-decimal;
  }
  
  .blog-content li {
    @apply mb-2;
  }
  
  .blog-content a {
    @apply text-primary underline hover:text-primary/80 transition-colors;
  }
  
  .blog-content blockquote {
    @apply pl-4 border-l-4 border-primary/30 italic my-4;
  }
  
  .blog-content pre {
    @apply bg-muted p-4 rounded-md overflow-x-auto my-4;
  }
  
  .blog-content code {
    @apply font-mono text-sm bg-muted px-1 py-0.5 rounded;
  }
  
  .blog-content img {
    @apply rounded-lg my-6 max-w-full h-auto mx-auto;
  }
  
  .blog-content hr {
    @apply my-8 border-muted;
  }
  
  .blog-content table {
    @apply w-full border-collapse my-6;
  }
  
  .blog-content th, .blog-content td {
    @apply border border-border p-2;
  }
  
  .blog-content th {
    @apply bg-muted;
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
    font-family: 'Inter', 'Clash Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .text-shadow-lg {
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  
  .animation-delay-400 {
    animation-delay: 0.4s;
  }
  
  .animation-delay-600 {
    animation-delay: 0.6s;
  }
  
  .animation-delay-800 {
    animation-delay: 0.8s;
  }

  .text-balance {
    text-wrap: balance;
  }
  
  /* Gradient text */
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary-accent;
  }
  
  /* Glass effect */
  .glass {
    @apply bg-white/10 backdrop-blur-md border border-white/20;
  }
  
  .glass-card {
    @apply bg-white/50 backdrop-blur-md border border-white/20 shadow-lg hover:shadow-xl transition-all duration-300;
  }
  
  /* 3D card effect */
  .card-3d {
    @apply transition-all duration-300;
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  
  .card-3d:hover {
    transform: translateY(-5px) rotateX(5deg);
  }
  
  /* Pattern backgrounds */
  .bg-pattern-dots {
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.1) 1px, transparent 0);
    background-size: 20px 20px;
  }
  
  .bg-pattern-grid {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  
  /* Mouse follow effect */
  .mouse-follow {
    transition: transform 0.2s ease;
  }
  
  /* Scroll reveal animations */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
}

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lexend/v19/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Add a more distinctive display font */
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.cdnfonts.com/s/65041/ClashDisplay-Variable.woff2) format('woff2');
}