@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-primary: #15803d;
    --color-primary-focus: #166534;
    --color-bright-accent: #c4c2f0;
    --color-background: #0F172A;
    --color-card-background: #0051d3;
    --color-text: #F8FAFC;
    --color-income: #84cc16;
    --color-spending: #ef4444;
    --color-warning: #f59e0b;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
}

.main-content {
    padding-top: 80px;
    padding-bottom: 100px;
}

.shadow-top {
    box-shadow: 0 -4px 15px -1px rgb(0 0 0 / 0.2);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-primary-focus);
}

::-webkit-scrollbar-thumb {
    background: var(--color-bright-accent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a9a7e6;
}

.modal-card {
    max-width: 400px;
    width: 100%;
}

.prose h1,
.prose h2,
.prose h3 {
    color: var(--color-text);
}

.prose p,
.prose li,
.prose ul {
    color: #cbd5e1;
}

.prose strong {
    color: #f1f5f9;
}

.ad-container>div,
.ad-container>iframe {
    margin: auto !important;
}
/* Additional style for sticky header spacing */
.main-content-sticky { padding-top: 60px; padding-bottom: 100px; }