@import "tailwindcss" source(none);
@import "@docubook/markdown/styles.css";
@import "@docubook/ui-react/styles.css";
@import "./base.css";

@plugin "daisyui" {
  themes:
    light --default,
    dark;
}
@plugin "@tailwindcss/typography";
@source "../components";
@source "../pages/docs";

/* daisyUI breadcrumbs underline every li child on hover (including plain
   spans) — crumbs are not links, so strip the underline (and pointer cursor)
   for non-anchor items; real anchors keep daisyUI's hover feedback. */
.breadcrumbs > ul > li > :not(a):hover {
  text-decoration-line: none;
  cursor: default;
}
@source inline(
  "breadcrumbs collapse collapse-open collapse-close collapse-arrow collapse-plus collapse-title collapse-content"
);
@source inline("modal modal-top modal-middle modal-bottom modal-box modal-backdrop");
@source inline("drawer drawer-end drawer-toggle drawer-side drawer-overlay drawer-content");
@source inline("sm:drawer-open md:drawer-open lg:drawer-open xl:drawer-open");
@source inline("navbar menu menu-horizontal");
@source inline("kbd kbd-xs kbd-sm kbd-md kbd-lg kbd-xl");
@source inline("toggle theme-controller toggle-xs toggle-sm toggle-md toggle-lg");
@source inline(
  "toggle-primary toggle-secondary toggle-accent toggle-neutral toggle-success toggle-warning toggle-info toggle-error"
);
@source inline("input input-ghost input-xs input-sm input-md input-lg input-xl");
@source inline(
  "input-primary input-secondary input-accent input-neutral input-success input-warning input-info input-error"
);
@source inline("label");

/* Code block utilities */
@layer utilities {
  .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;
    border: 0 !important;
  }

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

  .token.list {
    display: inline;
  }

  .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-primary/30 border-l-2;
  }

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

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

/* Custom components */
.docs-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.docs-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid oklch(var(--b3));
  background-color: oklch(var(--b1));
}

.docs-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 16rem;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid oklch(var(--b3));
  background-color: oklch(var(--b2));
}

.docs-content {
  flex: 1;
  min-width: 0;
  padding: 2rem;
}

.docs-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

/* Modern Blue Theme */
/* Light Mode */
.keyword {
  color: #1d4ed8;
}

.function {
  color: #0369a1;
}

.punctuation {
  color: #4b5563;
}

.comment {
  color: #6b7280;
  font-style: italic;
}

.string,
.constant,
.annotation,
.boolean,
.number {
  color: #0d9488;
}

.tag {
  color: #1d4ed8;
}

.attr-name {
  color: #0284c7;
}

.attr-value {
  color: #2563eb;
}

/* Dark Mode */
.dark .keyword {
  color: #60a5fa;
}

.dark .function {
  color: #38bdf8;
}

.dark .string,
.dark .constant,
.dark .annotation,
.dark .boolean,
.dark .number {
  color: #2dd4bf;
}

.dark .tag {
  color: #60a5fa;
}

.dark .attr-name {
  color: #7dd3fc;
}

.dark .attr-value {
  color: #3b82f6;
}

.dark .comment {
  color: #9ca3af;
}

.dark .punctuation {
  color: #9ca3af;
}