docs-template/app/globals.css

/**
 * Lux Network Documentation Theme
 * Base template for all Lux documentation sites
 */

@import 'tailwindcss';
/* Zen — the faces and the --font-sans / --font-mono role tokens. Unlayered, so
   it outranks the stack Tailwind's own theme layer puts on those same names. */
@import '@hanzo/design/tokens/fonts.css';

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

/* Light mode - clean minimal */
: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%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 64%;

  /* Fumadocs color 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 - true black */
.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%;
  --border: 0 0% 15%;
  --input: 0 0% 15%;
  --ring: 0 0% 36%;

  /* Fumadocs dark 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%);
}

/* Base styles */
* {
  border-color: hsl(var(--border));
}

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

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

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

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

/* Code blocks - dark theme */
pre {
  background: #0d0d0d !important;
  color: #e8e8e8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.625rem;
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.5;
  font-variant-ligatures: none;
}

pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: inherit;
  color: inherit;
}

/* Inline code */
:not(pre) > code {
  background: hsl(var(--muted));
  border-radius: 0.375rem;
  padding: 0.2em 0.45em;
  font-size: 0.875em;
}

/* Remove typography plugin backticks */
code::before,
code::after {
  content: none !important;
}

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

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

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

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

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

/* Hide mobile subnav header on desktop */
@media (min-width: 768px) {
  header#nd-subnav {
    display: none !important;
  }
}

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

/* Sidebar footer - social icons left, theme toggle right */
aside .border-t.p-4.pt-2 {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Theme toggle div pushed to right */
aside .border-t.p-4.pt-2 > div:first-child {
  flex-shrink: 0;
  order: 1;
  margin-left: auto;
}

/* Social icons come first (left side) */
aside .border-t.p-4.pt-2 > div:last-child > div:first-child {
  order: 0;
}

/* Our footer content - social icons inline, links below */
aside .border-t.p-4.pt-2 > div:last-child {
  display: contents;
}

/* Social icons row inline with theme toggle */
aside .border-t.p-4.pt-2 > div:last-child > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Text links on new row, full width, after theme toggle */
aside .border-t.p-4.pt-2 > div:last-child > a {
  width: 100%;
  flex-basis: 100%;
  order: 2;
}