/* Natural, toned-down color overrides */
:root {
    --natural-primary: hsl(149, 25%, 27%);
    --natural-primary-dark: hsl(0, 0%, 18%);
    --natural-secondary: lab(74.92% -19.06 9.14);
    --natural-accent: hsl(0, 18%, 55%);
    --natural-soft: #f7f8f3;
    --natural-text: #253021;
}

/* Core page accents */
.bg-indigo-600,
.bg-blue-700,
.bg-blue-600,
.bg-sky-500,
.bg-purple-600,
.bg-indigo-700,
.bg-indigo-900,
.bg-gray-900 {
    background-color: var(--natural-primary) !important;
}

.text-indigo-600,
.text-indigo-700,
.text-blue-700,
.text-blue-800,
.text-sky-500 {
    color: var(--natural-primary) !important;
}

.border-indigo-600,
.border-indigo-200,
.border-blue-200,
.border-blue-700 {
    border-color: var(--natural-accent) !important;
}

.bg-indigo-100,
.bg-blue-100,
.bg-blue-50,
.bg-purple-100,
.bg-yellow-100,
.bg-green-100 {
    background-color: #f1f5e9 !important;
}

/* Gradients */
.from-indigo-600,
.from-indigo-500,
.from-indigo-900,
.from-blue-500,
.from-gray-900,
.from-orange-500,
.from-green-500 {
    --tw-gradient-from: var(--natural-primary-dark) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(95,111,82,0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-purple-600,
.to-purple-700,
.to-red-600,
.to-teal-600,
.to-indigo-700,
.to-gray-800,
.to-gray-700 {
    --tw-gradient-to: var(--natural-primary) var(--tw-gradient-to-position) !important;
}

/* Buttons and links */
.btn-primary,
.slider-button,
button.bg-blue-600,
button.bg-sky-500,
button.bg-blue-700 {
    background-color: var(--natural-primary) !important;
    border-color: var(--natural-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.slider-button:hover,
button.bg-blue-600:hover,
button.bg-sky-500:hover,
button.bg-blue-700:hover {
    background-color: var(--natural-primary-dark) !important;
    color: #fff !important;
}

a:hover,
.hover\:text-indigo-700:hover,
.hover\:text-indigo-600:hover,
.hover\:text-blue-700:hover {
    color: var(--natural-primary-dark) !important;
}

/* Mobile: reduce card inner padding for readability */
@media (max-width: 640px) {
    .p-8 {
        padding: 1.25rem !important;
    }
}

/* Footer consistency */
footer.bg-gray-900 {
    background-color: var(--natural-primary-dark) !important;
}