hips/docs/app/global.css

/**
 * Hanzo HIPs Documentation Theme
 * Tailwind CSS 4 + @hanzo/docs (fumadocs-based)
 *
 * IMPORTANT: Minimal overrides only - let @hanzo/docs handle layout
 */

@import "tailwindcss";
@import "@hanzo/docs/ui/style.css";
@import "highlight.js/styles/github-dark.css";

/* Typography plugin for Tailwind CSS 4 */
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

/* The two families, decided once. Unlayered, and that is the point: the
   @hanzo/docs import above is a BUILT Tailwind sheet, so it arrives carrying
   its own @layer theme with the stock --font-sans and --font-mono, and inside
   @theme those beat ours. Measured on the built sheet, --font-mono came out as
   the OS monospace stack, which is what .font-mono and every code block were
   reading. Unlayered declarations win over any layer, so this block settles it.
   The two properties on the right are published by next/font on <html>. */
:root {
  --font-sans: var(--font-zen-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-zen-mono), ui-monospace, monospace;
}

@theme inline {
  --radius: 0.5rem;

  /* Colors for button component and other UI elements */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
}

/* Light mode */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 64%;

  /* Fumadocs overrides */
  --color-fd-background: hsl(0, 0%, 100%);
  --color-fd-foreground: hsl(0, 0%, 9%);
  --color-fd-muted: hsl(0, 0%, 96%);
  --color-fd-muted-foreground: hsl(0, 0%, 45%);
  --color-fd-popover: hsl(0, 0%, 100%);
  --color-fd-popover-foreground: hsl(0, 0%, 9%);
  --color-fd-card: hsl(0, 0%, 100%);
  --color-fd-card-foreground: hsl(0, 0%, 9%);
  --color-fd-border: hsl(0, 0%, 90%);
  --color-fd-primary: hsl(0, 0%, 9%);
  --color-fd-primary-foreground: hsl(0, 0%, 100%);
  --color-fd-secondary: hsl(0, 0%, 96%);
  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
  --color-fd-accent: hsl(0, 0%, 96%);
  --color-fd-accent-foreground: hsl(0, 0%, 9%);
  --color-fd-ring: hsl(0, 0%, 64%);
}

/* Dark mode */
.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 98%;
  --card: 0 0% 4%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 4%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 4%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 8%;
  --muted-foreground: 0 0% 55%;
  --accent: 0 0% 12%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 15%;
  --input: 0 0% 15%;
  --ring: 0 0% 36%;

  /* Fumadocs overrides */
  --color-fd-background: hsl(0, 0%, 0%);
  --color-fd-foreground: hsl(0, 0%, 98%);
  --color-fd-muted: hsl(0, 0%, 8%);
  --color-fd-muted-foreground: hsl(0, 0%, 55%);
  --color-fd-popover: hsl(0, 0%, 4%);
  --color-fd-popover-foreground: hsl(0, 0%, 98%);
  --color-fd-card: hsl(0, 0%, 4%);
  --color-fd-card-foreground: hsl(0, 0%, 98%);
  --color-fd-border: hsl(0, 0%, 15%);
  --color-fd-primary: hsl(0, 0%, 98%);
  --color-fd-primary-foreground: hsl(0, 0%, 4%);
  --color-fd-secondary: hsl(0, 0%, 10%);
  --color-fd-secondary-foreground: hsl(0, 0%, 98%);
  --color-fd-accent: hsl(0, 0%, 12%);
  --color-fd-accent-foreground: hsl(0, 0%, 98%);
  --color-fd-ring: hsl(0, 0%, 36%);
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
  }

  body {
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background: rgba(0, 0, 0, 0.15);
  }

  .dark ::selection {
    background: rgba(255, 255, 255, 0.20);
  }
}

/* Layout variables - customize fumadocs defaults */
:root {
  --fd-sidebar-width: 300px;
  --fd-toc-width: 220px;
}

@media (min-width: 1280px) {
  :root {
    --fd-sidebar-width: 320px;
    --fd-toc-width: 240px;
  }
}

@media (max-width: 1024px) {
  :root {
    --fd-toc-width: 200px;
  }
}

/* Typography improvements */
main article h2 {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid hsl(var(--border) / 0.4);
}

/*
 * Code Blocks - dark theme styling
 */

/* CSS Variables for code styling */
:root {
  --code-bg: #0d0d0d;
  --code-fg: #e8e8e8;
  --code-border: rgba(255, 255, 255, 0.08);
  --code-font: var(--font-mono);
}

/* Code blocks */
pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-radius: 0.625rem;
  font-family: var(--code-font);
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.5;
  font-variant-ligatures: none;
}

/* Code inside pre - reset any conflicting styles */
pre code {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: inherit;
  color: inherit;
  display: block;
  white-space: pre;
}

/* Inline code only - must be direct child of non-pre parent */
:not(pre) > code {
  background: hsl(var(--muted));
  border-radius: 0.375rem;
  padding: 0.2em 0.45em;
  font-size: 0.875em;
  white-space: nowrap;
}

/* Syntax highlighting colors (Dracula) */
pre code .keyword,
pre .keyword { color: #ff79c6; }
pre code .string,
pre .string { color: #f1fa8c; }
pre code .comment,
pre .comment { color: #6272a4; }
pre code .function,
pre .function { color: #50fa7b; }
pre code .number,
pre .number { color: #bd93f9; }
pre code .operator,
pre .operator { color: #ff79c6; }
pre code .punctuation,
pre .punctuation { color: #f8f8f2; }
pre code .class-name,
pre .class-name { color: #8be9fd; }
pre code .builtin,
pre .builtin { color: #8be9fd; }

/* Tables */
main article th {
  background: hsl(var(--muted) / 0.4);
}

main article tr:hover td {
  background: hsl(var(--muted) / 0.2);
}

/* Blockquotes */
main article blockquote {
  border-left: 3px solid hsl(var(--primary) / 0.3);
  background: hsl(var(--muted) / 0.3);
  border-radius: 0 0.5rem 0.5rem 0;
}

/* Sidebar refinements */
aside[role="complementary"] {
  border-right: 1px solid hsl(var(--border) / 0.5);
}

/* Extend sidebar background to full height */
#nd-docs-layout {
  min-height: 100dvh;
}

/* Sidebar should extend to bottom */
#nd-sidebar {
  min-height: 100%;
}

/* TOC (right sidebar) - ensure proper positioning */
#nd-toc {
  min-height: calc(100dvh - var(--fd-docs-row-1, 0px));
}

/* TOC refinements */
nav[aria-label="Table of Contents"],
.fd-toc {
  border-left: 1px solid hsl(var(--border) / 0.3);
}

/* Bold sidebar section headers for better visual hierarchy */
#nd-sidebar button[aria-expanded] {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.dark #nd-sidebar button[aria-expanded] {
  color: white;
}

/* Fixed sidebar width - consistent across all pages */
#nd-sidebar {
  width: var(--fd-sidebar-width) !important;
  min-width: var(--fd-sidebar-width) !important;
  max-width: var(--fd-sidebar-width) !important;
  flex-shrink: 0;
}

/* Mobile content fix - place content in the correct grid column */
@media (max-width: 767px) {
  /* The fumadocs grid has 3 columns: sidebar | content | toc */
  /* On mobile, content div needs to span the middle column */
  #nd-docs-layout > div:not([id]) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Sidebar footer: theme toggle row + links column */
#nd-sidebar .flex.flex-col.border-t {
  flex-direction: column !important;
  gap: 0.75rem;
}

/* Theme toggle row - horizontal layout */
#nd-sidebar .flex.flex-col.border-t > .flex.items-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove auto margin from theme toggle button */
#nd-sidebar .flex.flex-col.border-t .ms-auto {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline-start: 0 !important;
}

/* Footer links - vertical with line breaks */
#nd-sidebar .flex.flex-col.border-t > .flex.flex-col {
  flex-direction: column !important;
  gap: 0.5rem;
  border-top: none !important;
  padding: 0 !important;
}

/* Hide scrollbar utility */
@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Fill utilities for SVG */
@utility fill-background {
  fill: hsl(var(--background));
}

@utility fill-foreground {
  fill: hsl(var(--foreground));
}

/* Search dialog animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoom-in-95 {
  from { transform: translate(-50%, 0) scale(0.95); }
  to { transform: translate(-50%, 0) scale(1); }
}

@keyframes slide-in-from-top {
  from { transform: translate(-50%, -8px) scale(0.95); }
  to { transform: translate(-50%, 0) scale(1); }
}

@utility animate-in {
  animation: fade-in 0.15s ease-out, zoom-in-95 0.15s ease-out, slide-in-from-top 0.15s ease-out;
}

@utility fade-in-0 {
  animation: fade-in 0.15s ease-out;
}

@utility zoom-in-95 {
  animation: zoom-in-95 0.15s ease-out;
}

@utility slide-in-from-top-2 {
  animation: slide-in-from-top 0.15s ease-out;
}

/*
 * CRITICAL: Remove Tailwind Typography backticks from ALL inline code
 * The Typography plugin adds content: "`" to code::before and code::after
 * This must be placed at the end and use simple selectors to ensure override
 */
code::before,
code::after {
  content: none !important;
}