/* ── Typography ──────────────────────────────────── */
:root {
  --default-font-family: var(--font-satoshi), system-ui, sans-serif;
}

/* ── Layout Variables ───────────────────────────────── */
/* CRITICAL CASCADE FIX:
 *
 * Fumadocs v16 ships pre-compiled Tailwind v4 CSS. It uses @layer utilities
 * to hold classes like .md:layout:[--fd-sidebar-width:268px] that fire at
 * viewport breakpoints via :has() selectors.
 *
 * HOWEVER, this project uses Tailwind v3, which compiles UNLAYERED utilities.
 * Container.js applies .[--fd-sidebar-width:0px] and .[--fd-toc-width:0px] as
 * "default" classes on #nd-docs-layout. Tailwind v3 generates those as
 * unlayered rules in the project's CSS bundle.
 *
 * Per CSS cascade rules: UNLAYERED rules beat ALL layered rules regardless of
 * specificity. So the 0px defaults from the project CSS always win over the
 * 268px responsive rules from fumadocs-ui — leaving the sidebar and TOC
 * zero-width (invisible content).
 *
 * FIX: re-declare the responsive values here (unlayered), using the
 * #nd-docs-layout ID selector (specificity 1,0,0) to beat the single-class
 * utility (0,1,0). This stylesheet loads after both fumadocs-ui/dist/style.css
 * and the project's Tailwind bundle, so it resolves the cascade.
 *
 * Also cap --fd-layout-width at min(90rem, 100%) so the fixed grid doesn't
 * exceed the viewport (default is 97rem = 1552px). Use 100%, not 100vw —
 * 100vw includes the scrollbar on Windows/Linux and causes symmetric clipping
 * with overflow-x-clip. */
#nd-docs-layout {
  --fd-layout-width: min(90rem, 100%);
  /* Defensive cap — never let the grid exceed the layout container. */
  max-width: 100%;
}

/* Header height (mobile default) */
#nd-docs-layout {
  --fd-header-height: 3.5rem;
  --fd-nav-height: 3.5rem;
}

/* Header height grows at lg (>= 64rem) per fumadocs default */
@media (min-width: 64rem) {
  #nd-docs-layout {
    --fd-header-height: 6rem;
  }
}

/* Sidebar width activates at md (>= 48rem) */
@media (min-width: 48rem) {
  #nd-docs-layout {
    --fd-sidebar-width: 268px;
  }
}

/* TOC is disabled globally (see app/docs/[[...slug]]/page.tsx) — keep the
 * reserved column width at 0 across all viewports so the article gets the
 * full remaining space. This beats Fumadocs's xl:layout:[--fd-toc-width:268px]
 * utility because unlayered rules win over layered ones in this project. */
#nd-docs-layout {
  --fd-toc-width: 0px;
}

/* ── Color System ─────────────────────────────────── */
/* Light mode (docs is always light) */
:root {
  /* Primary: deep mint — links, active states, buttons */
  --color-fd-primary: hsl(174, 52%, 28%);
  --color-fd-primary-foreground: hsl(0, 0%, 100%);

  /* Ring: brand mint — focus outlines */
  --color-fd-ring: hsl(174, 68%, 73%);

  /* Backgrounds */
  --color-fd-background: hsl(174, 18%, 99%);
  --color-fd-card: hsl(0, 0%, 100%);
  --color-fd-card-foreground: hsl(174, 4%, 11%);

  /* Muted: cold light gray */
  --color-fd-muted: hsl(174, 6%, 96%);
  --color-fd-muted-foreground: hsl(174, 4%, 46%);

  /* Borders */
  --color-fd-border: hsl(174, 6%, 88%);

  /* Sidebar */
  --color-fd-sidebar: hsl(174, 10%, 97.5%);

  /* Foreground */
  --color-fd-foreground: hsl(174, 4%, 11%);

  /* Secondary */
  --color-fd-secondary: hsl(174, 10%, 95%);
  --color-fd-secondary-foreground: hsl(174, 4%, 11%);

  /* Accent (hover surfaces) */
  --color-fd-accent: hsl(174, 28%, 93%);
  --color-fd-accent-foreground: hsl(174, 52%, 28%);

  /* Popover */
  --color-fd-popover: hsl(0, 0%, 100%);
  --color-fd-popover-foreground: hsl(174, 4%, 11%);
}

/* ── Nav bar ──────────────────────────────────────── */
/* Crisp white nav, subtle border */
[data-fd-nav] {
  background: hsl(0, 0%, 100%) !important;
  border-bottom: 1px solid hsl(174, 6%, 88%) !important;
  box-shadow: none !important;
}

/* ── Sidebar ──────────────────────────────────────── */
[data-fd-sidebar] {
  background: var(--color-fd-sidebar) !important;
  border-right: 1px solid hsl(174, 6%, 88%) !important;
}

/* ── Prose ────────────────────────────────────────── */
.prose a {
  --tw-prose-links: hsl(174, 52%, 28%);
  color: hsl(174, 52%, 28%);
  text-decoration-color: hsl(174, 60%, 60%);
}

.prose a:hover {
  color: hsl(174, 52%, 20%);
  text-decoration-color: hsl(174, 52%, 28%);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-satoshi), system-ui, sans-serif;
  letter-spacing: -0.025em;
  color: hsl(174, 4%, 9%);
}

/* Inline code: mint-tinted surface */
.prose code:not(pre code) {
  background-color: hsl(174, 18%, 93%);
  color: hsl(174, 52%, 26%);
  border: 1px solid hsl(174, 12%, 85%);
  border-radius: 4px;
  padding: 0.1em 0.38em;
  font-size: 0.875em;
}

/* ── Code blocks ──────────────────────────────────── */
.prose pre {
  background-color: hsl(174, 8%, 11%) !important;
  border: 1px solid hsl(174, 6%, 18%);
  color: hsl(174, 10%, 92%) !important;
}

/* Ensure code text inherits the light foreground in dark code blocks.
 * Covers plain fenced blocks (no language, no shiki tokens) and any
 * unstyled text inside syntax-highlighted blocks. Shiki inline token
 * colors still win because they set style="color:..." directly. */
.prose pre code,
.prose pre code span:not([style*="color"]) {
  color: inherit !important;
}

/* ── Callouts / notes ─────────────────────────────── */
/* Override any border-left accents with full border */
.prose .callout,
.prose [data-rehype-pretty-code-figure] {
  border-color: hsl(174, 6%, 88%);
}

/* ── Search kbd shortcut pill ─────────────────────── */
kbd {
  background: hsl(174, 6%, 94%);
  border-color: hsl(174, 6%, 84%);
  color: hsl(174, 4%, 40%);
}