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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@layer utilities {
  .flex-center {
    @apply flex items-center justify-center;
  }
  .flex-between {
    @apply flex items-center justify-between;
  }
  .flex-col-center {
    @apply flex flex-col items-center justify-center;
  }
  .boundary {
    @apply container mx-auto px-4 md:px-8 lg:px-12 xl:px-20;
  }
  .wall {
    @apply max-w-6xl mx-auto px-2;
  }

  .sidebar {
    @apply lg:w-[25%] xl:w-[23%] bg-sidebar;
  }

  .docs-content {
    @apply lg:w-[75%] xl:w-[77%] bg-docs;
  }

  .primary-gradient {
    @apply bg-gradient-to-br from-[#FACC15] via-[#FFAF45] to-[#FF8225];
  }

  .next-previous-btn {
    @apply w-80 text-muted-foreground hover:text-brand transition-colors border flex flex-col justify-center px-6 py-4 border-muted-foreground hover:border-brand rounded-lg;
  }

  .p {
    @apply text-sm  leading-loose;
  }

  .prose pre {
    @apply rounded-lg overflow-x-auto;
  }
  .prose code {
    @apply font-mono text-sm;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --radial-bg: radial-gradient(circle at 50% 50%, hsl(0, 0%, 99%) 10%, hsl(0, 0%, 96%) 100%);
    --navbar: 60, 100%, 99%;
    --footer-bg: 255 255% 255%;
    --brand: 34, 100%, 60%;
    --highlighted: 292, 91%, 50%;
    --table-odd: 216, 12%, 95%;
    --link: 240, 100%, 45%;
    --link-hover: 240, 100%, 65%;
    --table-even: 213, 12%, 85%;
    --docs: 60, 100%, 98%;
    --sidebar: 0, 0%, 90%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 90%;
    --muted-foreground: 0 0% 25%;
    --muted-highlight: 0 0% 15%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0, 0%, 90%;
    --border-docs: 0, 0%, 75%;
    --border-logo: 0, 0%, 80%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --font-body: 'Merriweather', serif;
    --font-heading: 'Montserrat', sans-serif;

    .prose {
      h1,
      h2,
      h3,
      p {
        @apply text-black;
      }
    }
  }
  .dark {
    --background: 0 0% 10%;
    --foreground: 0 0% 92%;
    --radial-bg: radial-gradient(circle at 50% 50%, hsl(221, 63%, 6%) 10%, hsl(221, 100%, 3%) 100%);
    --navbar: 240, 100%, 5%;
    --footer-bg: 0 0% 1%;
    --brand: 48, 100%, 60%;
    --highlighted: 180, 60%, 50%;
    --table-odd: 220, 9%, 25%;
    --table-even: 220, 9%, 15%;
    --link: 200, 100%, 55%;
    --link-hover: 200, 100%, 65%;
    --docs: 220, 43%, 11%;
    --sidebar: 220, 43%, 8%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 20%;
    --muted-foreground: 30, 2%, 80%;
    --muted-highlight: 30, 2%, 90%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 15%;
    --border-docs: 0 0% 20%;
    --border-logo: 0 0% 35%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;

    .prose {
      h1,
      h2,
      h3 {
        @apply text-[#ececec];
      }
      p {
        @apply text-[#f1f1f1];
      }
    }
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    background-image: var(--radial-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  h1 {
    @apply text-5xl md:text-7xl font-heading font-bold tracking-wide;
  }

  h5 {
    @apply md:text-[16px] lg:text-xl font-medium text-muted-foreground  leading-8 lg:leading-9;
  }

  em {
    @apply border rounded-full px-4 py-1.5 mb-3 text-xs lg:text-sm text-muted-foreground;
  }

  h1[id],
  h2[id],
  h3[id],
  h4[id],
  h5[id],
  h6[id] {
    scroll-margin-top: 6rem; /* ~80px if your navbar is h-20 */
  }
}
