/** * API docs (/doc) — dark theme aligned with Chattu app tokens (app-tokens.css). * Load after doc.html inline styles. Requires without chattu-light. */ html.doc-page { color-scheme: dark; /* Map legacy doc variables to readable dark surfaces */ --doc-gray-50: rgba(232, 238, 245, 0.06); --doc-gray-100: rgba(232, 238, 245, 0.09); --doc-gray-200: rgba(148, 163, 184, 0.18); --doc-gray-600: var(--text-muted); --doc-gray-700: var(--text-secondary); --doc-gray-800: var(--text-primary); --doc-gray-900: #f1f5f9; } html.doc-page, html.doc-page body.doc-page-body { background: var(--bg-app); color: var(--text-primary); } html.doc-page .doc-search input { background: var(--bg-elevated); border-color: var(--border-subtle); color: var(--text-primary); } html.doc-page .doc-search input::placeholder { color: var(--text-muted); } html.doc-page .doc-search input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); } html.doc-page .doc-search-icon { color: var(--text-muted); } html.doc-page .doc-sidebar { background: var(--bg-card); border-right-color: var(--border-subtle); } html.doc-page .sidebar-backdrop { background: rgba(0, 0, 0, 0.65); } html.doc-page .endpoint-card { background: var(--bg-card); border-color: var(--border-subtle); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } html.doc-page .endpoint-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); } html.doc-page .endpoint-header { border-bottom-color: var(--border-subtle); } html.doc-page .endpoint-path { color: var(--text-primary); } html.doc-page .code-tabs, html.doc-page .example-tabs { border-bottom-color: var(--border-subtle); } html.doc-page .code-tab, html.doc-page .example-tab { color: var(--text-secondary); } html.doc-page .category-title { color: var(--text-primary); border-bottom-color: var(--accent); } html.doc-page .overview-section { background: var(--bg-card); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); } html.doc-page .overview-title { color: var(--text-primary); } html.doc-page .category-divider { border-top-color: var(--border-subtle); } html.doc-page .nav-link { color: var(--text-secondary); } html.doc-page .nav-link:hover { background: var(--doc-gray-50); color: var(--accent); } html.doc-page .nav-link.active { background: rgba(37, 211, 102, 0.12); color: var(--accent); } html.doc-page .endpoint-description { color: var(--text-secondary); } html.doc-page .params-table { background: var(--bg-card); box-shadow: none; border: 1px solid var(--border-subtle); } html.doc-page .params-table th { background: var(--bg-elevated); color: var(--text-primary); border-bottom-color: var(--border-subtle); } html.doc-page .params-table td { border-bottom-color: var(--border-subtle); color: var(--text-secondary); } html.doc-page .params-table code { background: var(--bg-muted); color: var(--accent); } /* Info callouts — dark variants */ html.doc-page .info-box.blue { background: rgba(59, 130, 246, 0.12); border-color: #3b82f6; color: var(--text-primary); } html.doc-page .info-box.yellow { background: rgba(245, 158, 11, 0.12); border-color: #f59e0b; color: var(--text-primary); } html.doc-page .info-box.red { background: rgba(239, 68, 68, 0.12); border-color: #ef4444; color: var(--text-primary); } html.doc-page .info-box.green { background: rgba(16, 185, 129, 0.12); border-color: #10b981; color: var(--text-primary); } /* HTTP status chips — keep hue, soften for dark bg */ html.doc-page .status-200 { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; } html.doc-page .status-400, html.doc-page .status-404 { background: rgba(239, 68, 68, 0.15); color: #fca5a5; } html.doc-page .status-403, html.doc-page .status-429 { background: rgba(245, 158, 11, 0.15); color: #fcd34d; } /* Footer */ html.doc-page footer.doc-page-footer { background: var(--bg-elevated) !important; color: var(--text-secondary) !important; border-top: 1px solid var(--border-subtle); } /* --- Tailwind utility remaps (CDN build; no dark: variant) --- */ html.doc-page .text-gray-900 { color: var(--text-primary) !important; } html.doc-page .text-gray-800 { color: var(--text-secondary) !important; } html.doc-page .text-gray-700 { color: var(--text-secondary) !important; } html.doc-page .text-gray-600 { color: var(--text-muted) !important; } html.doc-page .text-gray-500 { color: var(--text-muted) !important; } html.doc-page .bg-white { background-color: var(--bg-card) !important; } html.doc-page .bg-gray-50 { background-color: var(--bg-app) !important; } html.doc-page .bg-gray-100 { background-color: var(--bg-muted) !important; } html.doc-page .border-gray-200, html.doc-page .border-gray-100 { border-color: var(--border-subtle) !important; } html.doc-page .text-blue-600 { color: #60a5fa !important; } html.doc-page .text-blue-500 { color: #93c5fd !important; } html.doc-page .text-blue-900, html.doc-page .text-blue-800 { color: #dbeafe !important; } html.doc-page .text-yellow-600 { color: #fcd34d !important; } html.doc-page .text-yellow-900, html.doc-page .text-yellow-800 { color: #fef3c7 !important; } html.doc-page .text-green-600 { color: #6ee7b7 !important; } html.doc-page .text-green-900, html.doc-page .text-green-800 { color: #d1fae5 !important; } html.doc-page .bg-green-100 { background: rgba(16, 185, 129, 0.2) !important; color: var(--text-primary) !important; } html.doc-page .text-red-600, html.doc-page .text-red-700 { color: #fca5a5 !important; } html.doc-page .text-primary { color: var(--accent) !important; } html.doc-page a.text-blue-600:hover { color: #93c5fd !important; } html.doc-page details { border-color: var(--border-subtle); } html.doc-page kbd { background: var(--bg-muted) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle); } /* Callout strips in endpoint bodies */ html.doc-page .bg-blue-50 { background: rgba(59, 130, 246, 0.12) !important; } html.doc-page .bg-yellow-50, html.doc-page .bg-yellow-100 { background: rgba(245, 158, 11, 0.12) !important; } html.doc-page .bg-green-50 { background: rgba(16, 185, 129, 0.12) !important; } html.doc-page .bg-orange-50 { background: rgba(249, 115, 22, 0.12) !important; } html.doc-page .text-green-700 { color: #a7f3d0 !important; } html.doc-page .text-orange-700 { color: #fdba74 !important; } html.doc-page .border-blue-400 { border-color: #60a5fa !important; } html.doc-page .border-yellow-400, html.doc-page .border-yellow-500 { border-color: #fbbf24 !important; } html.doc-page .border-green-400 { border-color: #34d399 !important; } html.doc-page .border-orange-400 { border-color: #fb923c !important; } html.doc-page details.bg-gray-100 { background: var(--bg-elevated) !important; border: 1px solid var(--border-subtle); } html.doc-page details summary { color: var(--text-primary) !important; }