@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* Geist Font Configuration */
@theme {
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
}

/* ============================================
   Theme Colors per Documentation Section
   ============================================
   Each documentation section has its own color scheme.
   The ThemeSync component sets [data-docs-section]
   on the html element based on the current URL path.
*/

/* Core Theme - Blue */
[data-docs-section="core"] {
  --color-fd-primary: hsl(217, 91%, 50%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-ring: hsl(217, 91%, 58%);
}

.dark[data-docs-section="core"] {
  --color-fd-primary: hsl(217, 91%, 65%);
  --color-fd-primary-foreground: hsl(217, 91%, 12%);
  --color-fd-ring: hsl(217, 91%, 55%);
}

/* Frameworks Theme - Green */
[data-docs-section="frameworks"] {
  --color-fd-primary: hsl(152, 69%, 40%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-ring: hsl(152, 69%, 48%);
}

.dark[data-docs-section="frameworks"] {
  --color-fd-primary: hsl(152, 69%, 58%);
  --color-fd-primary-foreground: hsl(152, 69%, 12%);
  --color-fd-ring: hsl(152, 69%, 48%);
}

/* Content SDK Theme - Orange */
[data-docs-section="sdk"] {
  --color-fd-primary: hsl(24, 90%, 50%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-ring: hsl(24, 90%, 58%);
}

.dark[data-docs-section="sdk"] {
  --color-fd-primary: hsl(24, 90%, 65%);
  --color-fd-primary-foreground: hsl(24, 90%, 12%);
  --color-fd-ring: hsl(24, 90%, 55%);
}

/* MCP Theme - Neutral Gray */
[data-docs-section="mcp"] {
  --color-fd-primary: hsl(220, 9%, 42%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-ring: hsl(220, 9%, 50%);
}

.dark[data-docs-section="mcp"] {
  --color-fd-primary: hsl(220, 9%, 62%);
  --color-fd-primary-foreground: hsl(220, 9%, 12%);
  --color-fd-ring: hsl(220, 9%, 52%);
}

/* CLI Theme - Amber */
[data-docs-section="cli"] {
  --color-fd-primary: hsl(25, 75%, 47%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-ring: hsl(25, 75%, 55%);
}

.dark[data-docs-section="cli"] {
  --color-fd-primary: hsl(25, 75%, 60%);
  --color-fd-primary-foreground: hsl(25, 75%, 12%);
  --color-fd-ring: hsl(25, 75%, 50%);
}

/* Admin SDK Theme - Teal */
[data-docs-section="admin"] {
  --color-fd-primary: hsl(173, 58%, 39%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-ring: hsl(173, 58%, 47%);
}

.dark[data-docs-section="admin"] {
  --color-fd-primary: hsl(173, 58%, 55%);
  --color-fd-primary-foreground: hsl(173, 58%, 12%);
  --color-fd-ring: hsl(173, 58%, 45%);
}

/* OAuth Theme - Purple */
[data-docs-section="oauth"] {
  --color-fd-primary: hsl(262, 60%, 50%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-ring: hsl(262, 60%, 58%);
}

.dark[data-docs-section="oauth"] {
  --color-fd-primary: hsl(262, 60%, 68%);
  --color-fd-primary-foreground: hsl(262, 60%, 12%);
  --color-fd-ring: hsl(262, 60%, 58%);
}

/* ============================================
   Visual Polish & Enhancements
   ============================================
*/

/* Sidebar Tab Icon Colors - Must match theme primary colors */
:root {
  --color-core: hsl(217, 91%, 50%);
  --color-frameworks: hsl(152, 69%, 40%);
  --color-sdk: hsl(24, 90%, 50%);
  --color-mcp: hsl(220, 9%, 42%);
  --color-cli: hsl(25, 75%, 47%);
  --color-admin: hsl(173, 58%, 39%);
  --color-oauth: hsl(262, 60%, 50%);
}

.dark {
  --color-core: hsl(217, 91%, 65%);
  --color-frameworks: hsl(152, 69%, 58%);
  --color-sdk: hsl(24, 90%, 65%);
  --color-mcp: hsl(220, 9%, 62%);
  --color-cli: hsl(25, 75%, 60%);
  --color-admin: hsl(173, 58%, 55%);
  --color-oauth: hsl(262, 60%, 68%);
}

/* Sidebar tab icons: keep Fumadocs' responsive wrappers, but force the
   actual section icon to stay compact and inherit the section color. */
.docs-sidebar-tab-icon {
  color: var(--docs-sidebar-tab-icon-color);
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  align-items: center;
  justify-content: center;
}

.docs-sidebar-tab-icon-svg,
.docs-sidebar-tab-icon svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  color: inherit;
  stroke: currentColor;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--color-fd-muted-foreground) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--color-fd-muted-foreground) / 0.5);
}
