@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Apply custom fonts to Unfold */
:root, [data-theme="dark"], [data-theme="light"] {
    --font-sans: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* Override all headers and headings with Space Grotesk */
h1, h2, h3, h4, h5, h6, 
.font-heading, 
.font-bold, 
.font-semibold {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Body font override just to be safe */
body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Custom Scrollbars from the design */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0c1322;
}
::-webkit-scrollbar-thumb {
    background: #2e3545;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: #464554;
}

/* Specific overrides for Unfold backgrounds in dark mode to perfectly match the design */
html[data-theme="dark"] body {
    background-color: #0c1322 !important;
}

html[data-theme="dark"] aside,
html[data-theme="dark"] header {
    background-color: #141b2b !important;
    border-color: #2e3545 !important;
}

/* Cards and table backgrounds */
html[data-theme="dark"] .bg-white {
    background-color: #191f2f !important;
    border-color: #2e3545 !important;
}

html[data-theme="dark"] .bg-gray-50 {
    background-color: #141b2b !important;
    border-color: #2e3545 !important;
}

html[data-theme="dark"] .bg-gray-100 {
    background-color: #0c1322 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #0c1322 !important;
    border-color: #464554 !important;
}

html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-gray-700,
html[data-theme="dark"] .border-gray-800 {
    border-color: #2e3545 !important;
}

/* Submit row at bottom */
html[data-theme="dark"] #submit-row {
    background-color: #141b2b !important;
    border-color: #2e3545 !important;
}