@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@layer base {

    .unused {
        @apply fill-current;
    }

    a.anchor {
        display: block;
        position: relative;
        top: -50px;
        visibility: hidden;
    }

    [x-cloak] {
        display: none !important;
    }

    body {
        @apply text-gray-800;
    }

    .row-grey {
        @apply bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start -mt-px;
    }

    .row-white {
        @apply text-gray-900 h-12 text-center px-4 flex items-center justify-start -mt-px;
    }
}
/* Dark mode overrides - class-based toggle */
/* This file provides dark mode styles when the .dark class is on the html element */

html.dark body {
    color: white !important;
    background-color: rgb(15 23 42) !important; /* slate-900 */
}

html.dark .row-grey {
    background-color: rgb(30 41 59) !important; /* slate-800 */
    color: rgb(229 231 235) !important; /* gray-200 */
}

html.dark .row-white {
    color: rgb(229 231 235) !important; /* gray-200 */
}

/* Override dark: utilities to use .dark class instead of media query */
html.dark .dark\:bg-slate-900 { background-color: rgb(15 23 42) !important; }
html.dark .dark\:bg-slate-800 { background-color: rgb(30 41 59) !important; }
html.dark .dark\:bg-slate-700 { background-color: rgb(51 65 85) !important; }
html.dark .dark\:bg-slate-800\/95 { background-color: rgb(30 41 59 / 0.95) !important; }
html.dark .dark\:bg-gray-700 { background-color: rgb(55 65 81) !important; }
html.dark .dark\:bg-gray-800 { background-color: rgb(31 41 55) !important; }
html.dark .dark\:bg-gray-900 { background-color: rgb(17 24 39) !important; }
html.dark .dark\:bg-indigo-900 { background-color: rgb(49 46 129) !important; }
html.dark .dark\:bg-white { background-color: white !important; }
html.dark .dark\:bg-transparent { background-color: transparent !important; }

html.dark .dark\:text-white { color: white !important; }
html.dark .dark\:text-gray-100 { color: rgb(243 244 246) !important; }
html.dark .dark\:text-gray-200 { color: rgb(229 231 235) !important; }
html.dark .dark\:text-gray-300 { color: rgb(209 213 219) !important; }
html.dark .dark\:text-gray-400 { color: rgb(156 163 175) !important; }
html.dark .dark\:text-indigo-200 { color: rgb(199 210 254) !important; }
html.dark .dark\:text-indigo-400 { color: rgb(129 140 248) !important; }
html.dark .dark\:text-slate-200 { color: rgb(226 232 240) !important; }

html.dark .dark\:border-gray-600 { border-color: rgb(75 85 99) !important; }
html.dark .dark\:border-gray-700 { border-color: rgb(55 65 81) !important; }
html.dark .dark\:border-slate-700 { border-color: rgb(51 65 85) !important; }

html.dark .dark\:hover\:bg-slate-700:hover { background-color: rgb(51 65 85) !important; }
html.dark .dark\:hover\:bg-gray-700:hover { background-color: rgb(55 65 81) !important; }

/* Card backgrounds */
html.dark .bg-white {
    background-color: rgb(30 41 59) !important; /* slate-800 */
}

/* Hero secondary button dark mode */
html.dark .dark\:bg-slate-800 {
    background-color: rgb(30 41 59) !important;
}
html.dark .dark\:hover\:bg-slate-700:hover {
    background-color: rgb(51 65 85) !important;
}
html.dark .dark\:border-slate-600 {
    border-color: rgb(71 85 105) !important;
}
html.dark .dark\:hover\:border-slate-600:hover {
    border-color: rgb(71 85 105) !important;
}

/* Prose/Markdown content dark mode */
html.dark .prose {
    color: rgb(229 231 235) !important; /* gray-200 */
}
html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4,
html.dark .prose h5,
html.dark .prose h6 {
    color: white !important;
}
html.dark .prose p {
    color: rgb(209 213 219) !important; /* gray-300 */
}
html.dark .prose strong {
    color: white !important;
}
html.dark .prose a {
    color: rgb(129 140 248) !important; /* indigo-400 */
}
html.dark .prose code {
    color: rgb(244 114 182) !important; /* pink-400 */
    background-color: rgb(30 41 59) !important; /* slate-800 */
}
html.dark .prose pre {
    background-color: rgb(15 23 42) !important; /* slate-900 */
    color: rgb(226 232 240) !important; /* slate-200 */
}
html.dark .prose pre code {
    color: rgb(226 232 240) !important; /* slate-200 */
    background-color: transparent !important;
}
html.dark .prose blockquote {
    color: rgb(156 163 175) !important; /* gray-400 */
    border-left-color: rgb(71 85 105) !important; /* slate-600 */
}
html.dark .prose ul,
html.dark .prose ol {
    color: rgb(209 213 219) !important; /* gray-300 */
}
html.dark .prose li {
    color: rgb(209 213 219) !important; /* gray-300 */
}
html.dark .prose hr {
    border-color: rgb(51 65 85) !important; /* slate-700 */
}
html.dark .prose table {
    color: rgb(209 213 219) !important;
}
html.dark .prose th {
    color: white !important;
    border-color: rgb(51 65 85) !important;
}
html.dark .prose td {
    border-color: rgb(51 65 85) !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */