/* page-skin.css — force-dark skin for plain Tailwind pages (no data-theme system). Load together with theme.css; add class "tf" to . Overrides light utilities. */ body.tf { background: var(--bg); color: var(--text); } body.tf .bg-white { background: var(--surface) !important; } body.tf .bg-gray-50, body.tf .bg-gray-100, body.tf .bg-gray-200 { background: rgba(255,255,255,.05) !important; } body.tf .bg-blue-50, body.tf .bg-green-50, body.tf .bg-red-50, body.tf .bg-purple-50, body.tf .bg-amber-50, body.tf .bg-yellow-50, body.tf .bg-indigo-50, body.tf .bg-pink-50, body.tf .bg-gray-50\/50 { background: rgba(255,255,255,.04) !important; } body.tf .text-gray-900, body.tf .text-black { color: #fff !important; } body.tf .text-gray-800 { color: #EDEDF5 !important; } body.tf .text-gray-700 { color: #C9C9D6 !important; } body.tf .text-gray-600, body.tf .text-gray-500, body.tf .text-gray-400 { color: var(--muted) !important; } body.tf .border, body.tf .border-b, body.tf .border-t, body.tf .border-l, body.tf .border-r, body.tf .border-gray-100, body.tf .border-gray-200, body.tf .border-gray-300, body.tf .border-blue-200, body.tf .border-green-200, body.tf .border-red-200, body.tf .border-purple-200, body.tf .border-amber-200, body.tf .border-indigo-200 { border-color: var(--border) !important; } body.tf .shadow, body.tf .shadow-sm, body.tf .shadow-md, body.tf .shadow-lg, body.tf .shadow-xl { box-shadow: 0 24px 50px -30px rgba(0,0,0,.7) !important; } /* colored heading/accent text → keep readable on dark */ body.tf .text-blue-900, body.tf .text-green-900, body.tf .text-red-900, body.tf .text-purple-900, body.tf .text-amber-900, body.tf .text-indigo-900, body.tf .text-pink-900 { color: #fff !important; } body.tf .text-blue-800, body.tf .text-green-800, body.tf .text-red-800, body.tf .text-purple-800, body.tf .text-amber-800, body.tf .text-indigo-800 { color: #C9C9D6 !important; } body.tf .text-blue-600, body.tf .text-blue-500, body.tf .text-primary { color: var(--accent-2) !important; } /* buttons */ body.tf .bg-primary, body.tf .bg-blue-600, body.tf .bg-blue-500 { background: linear-gradient(135deg, var(--accent-2), var(--accent)) !important; color: #0a0a12 !important; } body.tf .bg-primary:hover, body.tf .hover\:bg-secondary:hover { filter: brightness(1.08); } /* inputs / textareas / code */ body.tf input[type="text"], body.tf input[type="search"], body.tf input[type="email"], body.tf input[type="number"], body.tf textarea, body.tf select, body.tf .border-gray-300 { background: rgba(0,0,0,.35) !important; color: var(--text) !important; border-color: var(--border-2) !important; } body.tf input::placeholder, body.tf textarea::placeholder { color: var(--muted-2) !important; } body.tf pre, body.tf code, body.tf .bg-gray-900 { background: rgba(0,0,0,.45) !important; color: #cfe9ff !important; } body.tf pre code { border: 0 !important; } /* footer (dark site footer already dark; just align) */ body.tf footer.bg-gray-900, body.tf .footer { background: rgba(0,0,0,.35) !important; } body.tf footer .text-gray-400 { color: var(--muted) !important; } /* links inside prose */ body.tf .prose a, body.tf article a { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); }