/* Fonts are now loaded inline in HTML head for performance */

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

:root {
  --card: #fcfcfc;
  --ring: hsl(0, 0%, 41.96%);
  --input: #b5b5b5;
  --muted: #e3e3e3;
  --accent: hsl(0, 0%, 100%);
  --border: #e8e8e8;
  --radius: 0.8rem;
  --shadow: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 1px 2px -1px hsl(9, 75%, 61% / 0.00);
  --chart-1: hsl(203.8863, 88.2845%, 53.1373%);
  --chart-2: hsl(159.7826, 100%, 36.0784%);
  --chart-3: hsl(42.0290, 92.8251%, 56.2745%);
  --chart-4: hsl(147.1429, 78.5047%, 41.9608%);
  --chart-5: hsl(341.4894, 75.2000%, 50.9804%);
  --popover: hsl(45, 25%, 97%);
  --primary: #d81448;
  --sidebar: hsl(45, 25%, 97%);
  --spacing: 0.25rem;
  --font-mono: Menlo, monospace;
  --font-sans: 'Poppins', sans-serif;
  --secondary: #c4c4c4;
  --shadow-lg: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 4px 6px -1px hsl(9, 75%, 61% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 2px 4px -1px hsl(9, 75%, 61% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 1px 2px -1px hsl(9, 75%, 61% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 8px 10px -1px hsl(9, 75%, 61% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
  --background: #f0f0f0;
  --font-serif: 'Poppins', sans-serif;
  --foreground: #1a1a1a;
  --shadow-2xl: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
  --shadow-2xs: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
  --destructive: hsl(0, 0%, 0%);
  --sidebar-ring: hsl(9, 75%, 61%);
  --sidebar-accent: hsl(25, 45%, 80%);
  --sidebar-border: hsl(45, 15%, 80%);
  --card-foreground: hsl(0, 0%, 0%);
  --sidebar-primary: hsl(9, 75%, 61%);
  --tracking-normal: 0em;
  --muted-foreground: #212121;
  --accent-foreground: hsl(0, 0%, 10.2%);
  --popover-foreground: hsl(0, 0%, 100%);
  --primary-foreground: #ffffff;
  --sidebar-foreground: hsl(20, 14%, 17%);
  --secondary-foreground: #1a1a1a;
  --destructive-foreground: #ffffff;
  --sidebar-accent-foreground: hsl(20, 14%, 17%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
}

.dark {
  --card: hsl(20, 14%, 8%);
  --ring: hsl(9, 75%, 61%);
  --input: hsl(20, 14%, 18%);
  --muted: hsl(20, 14%, 15%);
  --accent: hsl(25, 45%, 20%);
  --border: hsl(20, 14%, 15%);
  --chart-1: hsl(203.8863, 88.2845%, 53.1373%);
  --chart-2: hsl(159.7826, 100%, 36.0784%);
  --chart-3: hsl(42.0290, 92.8251%, 56.2745%);
  --chart-4: hsl(147.1429, 78.5047%, 41.9608%);
  --chart-5: hsl(341.4894, 75.2000%, 50.9804%);
  --popover: hsl(20, 14%, 4%);
  --primary: hsl(9, 75%, 55%);
  --sidebar: hsl(20, 14%, 8%);
  --secondary: hsl(30, 15%, 52%);
  --background: hsl(20, 14%, 4%);
  --foreground: hsl(45, 25%, 91%);
  --destructive: hsl(356.3033, 90.5579%, 54.3137%);
  --sidebar-ring: hsl(9, 75%, 61%);
  --sidebar-accent: hsl(25, 45%, 20%);
  --sidebar-border: hsl(20, 14%, 15%);
  --card-foreground: hsl(45, 25%, 85%);
  --sidebar-primary: hsl(9, 75%, 61%);
  --muted-foreground: hsl(45, 15%, 65%);
  --accent-foreground: hsl(45, 25%, 85%);
  --popover-foreground: hsl(45, 25%, 91%);
  --primary-foreground: hsl(0, 0%, 100%);
  --sidebar-foreground: hsl(45, 25%, 85%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --sidebar-accent-foreground: hsl(45, 25%, 85%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground transition-colors duration-300;
  }
}

@layer components {
  .highlight-keyword {
    background-color: rgba(235, 26, 78, 0.2);
    border-radius: 3px;
    padding: 1px 2px;
  }

  .progress-bar {
    background: linear-gradient(90deg, var(--primary) var(--progress, 0%), var(--muted) var(--progress, 0%));
    transition: all 0.3s ease;
  }

  .mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .mobile-menu.open {
    transform: translateX(0);
  }

  /* Custom animations for mobile menu */
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Enhanced navigation transitions */
  .nav-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-item:hover {
    transform: translateY(-1px);
  }
}

@layer utilities {
  .no-print {
    @media print {
      display: none !important;
    }
  }
}