@import "tailwindcss";

/* Custom variant for dark mode */
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  :root {
    --background: #fffefc;
    --foreground: #171717;

    --radius: 0.5rem;

    /* Navigation */
    --mobile-nav-offset: 60px;

    /* Sidebar Theme */
    --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: #202020;
    --foreground: #ededed;

    /* Sidebar Theme */
    --sidebar-background: 240 5.9% 15%;
    --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% 20%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 25%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  body {
    color: var(--foreground);
    background: var(--background);
    @apply font-sans antialiased;
  }

  * {
    @apply box-border p-0 m-0;
  }

  a {
    @apply text-inherit no-underline;
  }
}

@layer components {
  .text-display {
    @apply text-5xl md:text-6xl font-bold leading-tight tracking-tight;
  }

  .text-h1 {
    @apply text-3xl md:text-4xl font-bold leading-tight tracking-tight;
  }

  .text-h2 {
    @apply text-2xl md:text-3xl font-semibold leading-tight tracking-tight;
  }

  .text-h3 {
    @apply text-xl md:text-2xl font-semibold leading-snug;
  }

  .text-h4 {
    @apply text-lg md:text-xl font-semibold leading-snug;
  }

  .text-body-lg {
    @apply text-lg font-normal leading-normal;
  }

  .text-body {
    @apply text-base font-normal leading-normal;
  }

  .text-body-sm {
    @apply text-sm font-normal leading-normal;
  }

  .text-caption {
    @apply text-xs font-normal leading-tight;
  }

  .text-mono {
    @apply text-sm font-normal leading-normal font-mono;
  }
}

@layer utilities {
  html,
  body {
    @apply max-w-[100vw] overflow-x-hidden;
  }

  /* Vaul drawer fix */
  [data-vaul-drawer]::after {
    @apply content-none static bg-none h-0;
  }

  .handle-class {
    @apply relative z-60;
  }

  /* Mobile navigation offset adjustment */
  @media (max-width: 640px) {
    .mobile-nav-offset {
      @apply pt-[var(--mobile-nav-offset)];
    }
  }
}
