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

@import url("../styles/syntax.css");

/* Modern Blue Theme with Primary #0353D3 */
@layer base {
    :root {
        --background: 210 40% 98%;
        --foreground: 220 30% 15%;
        --card: 0 0% 100%;
        --card-foreground: 220 30% 15%;
        --popover: 0 0% 100%;
        --popover-foreground: 220 30% 15%;
        --primary: 215 100% 42%; /* #0353D3 */
        --primary-foreground: 0 0% 100%;
        --secondary: 215 30% 90%;
        --secondary-foreground: 220 30% 15%;
        --muted: 215 20% 92%;
        --muted-foreground: 220 15% 50%;
        --accent: 215 100% 35%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 85% 60%;
        --destructive-foreground: 0 0% 100%;
        --border: 215 20% 85%;
        --input: 215 20% 85%;
        --ring: 215 100% 42%;
        --radius: 0.5rem;
        --chart-1: 215 100% 42%;
        --chart-2: 200 100% 40%;
        --chart-3: 220 76% 60%;
        --chart-4: 190 90% 50%;
        --chart-5: 230 86% 45%;
        --line-number-color: rgba(0, 0, 0, 0.05);
    }

    .dark {
        --background: 220 25% 8%;
        --foreground: 210 30% 98%;
        --card: 220 25% 12%;
        --card-foreground: 210 30% 98%;
        --popover: 220 25% 12%;
        --popover-foreground: 210 30% 98%;
        --primary: 217 91% 60%; /* Slightly adjusted for better visibility */
        --primary-foreground: 0 0% 100%;
        --secondary: 215 25% 18%;
        --secondary-foreground: 210 30% 98%;
        --muted: 215 20% 22%;
        --muted-foreground: 215 20% 75%;
        --accent: 215 100% 60%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 85% 65%;
        --destructive-foreground: 0 0% 100%;
        --border: 215 20% 28%;
        --input: 215 20% 22%;
        --ring: 217 91% 60%;
        --chart-1: 217 91% 60%;
        --chart-2: 200 100% 60%;
        --chart-3: 220 90% 70%;
        --chart-4: 190 100% 65%;
        --chart-5: 230 90% 60%;
        --line-number-color: rgba(255, 255, 255, 0.12);
    }
}

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

  body {
    @apply bg-background text-foreground;
  }
}

.prose {
  margin: 0 !important;
}

pre {
  padding: 2px 0 !important;
  width: inherit !important;
  overflow-x: auto;
}

pre>code {
  display: grid;
  max-width: inherit !important;
  padding: 14px 0 !important;
}

.code-line {
  padding: 0.75px 16px;
  @apply border-l-2 border-transparent
}

.line-number::before {
  display: inline-block;
  width: 1rem;
  margin-right: 22px;
  margin-left: -2px;
  color: rgb(110, 110, 110);
  content: attr(line);
  font-size: 13.5px;
  text-align: right;
}

.highlight-line {
  @apply bg-primary/5 border-l-2 border-primary/30;
}

.rehype-code-title {
  @apply px-2 -mb-8 w-full text-sm pb-5 font-medium mt-5 font-code;
}

.highlight-comp>code {
  background-color: transparent !important;
}

@layer utilities {
    .animate-shine {
      --animate-shine: shine var(--duration) infinite linear;
      animation: var(--animate-shine);
      background-size: 200% 200%;
    }

    @keyframes shine {
      0% {
        background-position: 0% 0%;
      }
      50% {
        background-position: 100% 100%;
      }
      100% {
        background-position: 0% 0%;
      }
    }
  }