[data-theme="dark"] {
    --color-base-100: #0d0d0d;
    --color-base-200: #1a1a1a;
    --color-base-300: #262626;
    --color-base-content: #ffffff;

    /* Primary */
    --color-primary: #02ba02;
    --color-primary-content: #ffffff;

    /* Secondary */
    --color-secondary: #049f04;
    --color-secondary-content: #ffffff;

    /* Accent */
    --color-accent: #00cc55;
    --color-accent-content: #ffffff;

    /* Neutral */
    --color-neutral: #e5e5e5;
    --color-neutral-content: #0d0d0d;

    /* Status colors */
    --color-info: #3da9fc;
    --color-info-content: #ffffff;

    --color-success: #02ba02;
    --color-success-content: #ffffff;

    --color-warning: #facc15;
    --color-warning-content: #1a1a1a;

    --color-error: #ef4444;
    --color-error-content: #ffffff;

    /* radius */
    --radius-selector: 1rem;
    --radius-field: 0.25rem;
    --radius-box: 0.5rem;

    /* size */
    --size-selector: 0.25rem;
    --size-field: 0.25rem;

    /* border */
    --border: 1px;

    /* effects */
    --depth: 1;
    --noise: 0;
}

html {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}


.text-brand {
    color: #02ba02;
}

.bg-brand {
    background-color: #02ba02;
}

.border-brand {
    border-color: #02ba02;
}

/* Animation Classes */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}

/* Custom scrollbar - adapts slightly to dark mode */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}


::-webkit-scrollbar-thumb {
    background: #02ba02;
    border-radius: 5px;
}

/* Loader */
.loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #02ba02;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 1s linear infinite;
    /* Safari */
    animation: spin 1s linear infinite;
}

/* Ensure basic theming works even if Tailwind CDN dark mode is not 'class' configured.
    These rules use the CSS variables defined above and are loaded after Tailwind, so
    they will override base background/text colors where necessary. */

/* Base body colors via theme variables */
html[data-theme="light"] body,
html[data-theme="dark"] body,
html.dark body {
    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;
}

/* Map some common utility backgrounds to theme variables so components match */
html[data-theme="light"] .bg-white,
html[data-theme="dark"] .bg-white,
html.dark .bg-white {
    background-color: var(--color-base-100) !important;
}

html[data-theme="light"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-50,
html.dark .bg-gray-50,
html[data-theme="light"] .bg-slate-100,
html[data-theme="dark"] .bg-slate-100,
html.dark .bg-slate-100 {
    background-color: var(--color-base-200) !important;
}

html[data-theme="dark"] .bg-gray-800,
html.dark .bg-gray-800,
html[data-theme="dark"] .bg-gray-700,
html.dark .bg-gray-700 {
    background-color: var(--color-base-300) !important;
}

/* Ensure text colors from utilities have sensible fallbacks */
html[data-theme="light"] .text-white,
html[data-theme="dark"] .text-white,
html.dark .text-white {
    color: var(--color-base-content) !important;
}

/* Improve text contrast in light mode */
html[data-theme="light"] body {
    color: #000000 !important;
}

html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-gray-500,
html[data-theme="light"] .text-gray-600 {
    color: #4a4a4a !important;
}

html[data-theme="light"] .text-gray-700 {
    color: #1a1a1a !important;
}

html[data-theme="light"] .text-gray-900 {
    color: #000000 !important;
}

/* Footer theme-aware styling */
html[data-theme="light"] footer {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
    border-color: #e0e0e0 !important;
}

html[data-theme="light"] footer .text-gray-100,
html[data-theme="light"] footer .text-gray-400,
html[data-theme="light"] footer .text-white {
    color: #4a4a4a !important;
}

html[data-theme="light"] footer .text-lg,
html[data-theme="light"] footer h3,
html[data-theme="light"] footer h4 {
    color: #000000 !important;
}

html[data-theme="dark"] footer {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border-color: #262626 !important;
}

html[data-theme="dark"] footer {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border-color: #262626 !important;
}