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

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

/* ocean */
@layer base {
    :root {
        --background: 210 60% 97%; /* Lighter sky blue */
        --foreground: 220 30% 10%; /* Deep navy */
        --card: 210 50% 99%; /* Almost white blue */
        --card-foreground: 220 30% 10%;
        --popover: 210 50% 99%;
        --popover-foreground: 220 30% 10%;
        --primary: 220 85% 55%; /* Vibrant azure blue */
        --primary-foreground: 210 60% 97%;
        --secondary: 220 40% 80%; /* Softer sky blue */
        --secondary-foreground: 220 30% 10%;
        --muted: 220 40% 80%;
        --muted-foreground: 220 30% 30%; /* Deeper steel blue */
        --accent: 200 75% 38%; /* Stronger ocean blue */
        --accent-foreground: 0 0% 100%; /* Pure white */
        --destructive: 0 70% 50%; /* More vivid red */
        --destructive-foreground: 220 30% 95%; /* Lightened foreground */
        --border: 220 20% 85%; /* Slightly darker grey-blue */
        --input: 220 20% 85%;
        --ring: 220 50% 50%; /* More noticeable blue ring */
        --radius: 0.5rem;
        --chart-1: 210 65% 45%; /* Classic blue */
        --chart-2: 220 45% 60%; /* Softer sky */
        --chart-3: 220 75% 45%; /* Azure blue */
        --chart-4: 200 65% 50%; /* Ocean blue */
        --chart-5: 240 35% 35%; /* Deeper teal */
        --line-number-color: rgba(0, 0, 0, 0.05);
    }

    .dark {
        --background: 220 20% 8%; /* Deeper midnight navy */
        --foreground: 220 85% 92%; /* Brighter sky blue */
        --card: 220 20% 10%; /* Slightly darker midnight */
        --card-foreground: 220 85% 92%;
        --popover: 220 20% 10%;
        --popover-foreground: 220 85% 92%;
        --primary: 210 75% 65%; /* Softer but bright blue */
        --primary-foreground: 220 20% 8%;
        --secondary: 220 35% 12%; /* Darker steel blue */
        --secondary-foreground: 220 85% 92%;
        --muted: 220 35% 12%;
        --muted-foreground: 210 25% 80%; /* Pale navy */
        --accent: 220 85% 55%; /* Vibrant azure blue */
        --accent-foreground: 220 85% 92%;
        --destructive: 0 75% 50%; /* More noticeable red */
        --destructive-foreground: 220 85% 92%;
        --border: 220 35% 12%; /* Darker steel blue */
        --input: 220 35% 12%;
        --ring: 220 65% 55%; /* Vivid blue ring */
        --chart-1: 210 65% 45%; /* Classic blue */
        --chart-2: 220 45% 60%; /* Softer sky */
        --chart-3: 220 75% 45%; /* Azure blue */
        --chart-4: 200 65% 50%; /* Ocean blue */
        --chart-5: 240 35% 35%; /* Deeper teal */
        --line-number-color: rgba(255, 255, 255, 0.05);
    }
}

@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;
}