/* Theme CSS Variables */
:root {
    /* Light Mode - Harvest Theme */
    --harvest-bg: #FDFBF7;
    --harvest-dark: #1C1917;
    --harvest-surface: #FFFFFF;
    --harvest-surface-hover: #F9FAFB;
    --harvest-subtle: #E7E5E4;
    --harvest-border: #E5E7EB;
    --harvest-muted: #F3F4F6;
    --harvest-card: #FFFFFF;
    --harvest-card-hover: #FAFAFA;
    --harvest-input: #F9FAFB;
    --harvest-text: #1C1917;
    --harvest-text-secondary: #4B5563;
    --harvest-text-muted: #9CA3AF;

    /* Glass effects */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(0, 0, 0, 0.05);
    --glass-shadow: rgba(31, 38, 135, 0.07);

    /* Scrollbar */
    --scrollbar-thumb: rgba(0, 0, 0, 0.1);
    --scrollbar-track: transparent;

    --harvest-avatar-shadow: rgba(229, 231, 235, 0.6);
    --harvest-progress-track: #E5E7EB;
}

/* Dark Mode - Harvest Night Theme */
html.dark {
    --harvest-bg: #09090B;
    /* Zinc 950 - Richer black */
    --harvest-dark: #FAFAF9;
    --harvest-surface: #18181B;
    /* Zinc 900 */
    --harvest-surface-hover: #27272A;
    /* Zinc 800 */
    --harvest-subtle: #27272A;
    /* Zinc 800 */
    --harvest-border: #27272A;
    /* Zinc 800 - More subtle border */
    --harvest-muted: #27272A;
    --harvest-card: #18181B;
    --harvest-card-hover: #27272A;
    --harvest-input: #27272A;
    --harvest-text: #FAFAF9;
    --harvest-text-secondary: #A1A1AA;
    --harvest-text-muted: #71717A;
    --harvest-light: #FAFAF9;

    /* Glass effects - Dark */
    --glass-bg: rgba(24, 24, 27, 0.75);
    /* More transparent */
    --glass-border: rgba(255, 255, 255, 0.08);
    /* White alpha border for better blending */
    --glass-shadow: rgba(0, 0, 0, 0.5);

    /* Scrollbar - Dark */
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    --scrollbar-track: transparent;

    --harvest-avatar-shadow: rgba(0, 0, 0, 0.5);
    --harvest-progress-track: #27272A;
}

/* Base font size - mobile: 16px, desktop: 16px */
html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background-color: var(--harvest-bg);
    -webkit-tap-highlight-color: transparent;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    color: var(--harvest-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    font-size: 1rem;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography Scale - Responsive */
h1,
.text-h1 {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
}

@media (min-width: 768px) {

    h1,
    .text-h1 {
        font-size: 2.5rem;
    }
}

h2,
.text-h2 {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 700;
}

@media (min-width: 768px) {

    h2,
    .text-h2 {
        font-size: 2rem;
    }
}

h3,
.text-h3 {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-weight: 700;
}

@media (min-width: 768px) {

    h3,
    .text-h3 {
        font-size: 1.5rem;
    }
}

h4,
.text-h4 {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-weight: 700;
}

@media (min-width: 768px) {

    h4,
    .text-h4 {
        font-size: 1.25rem;
    }
}

.font-serif {
    font-family: 'Merriweather', Georgia, serif;
    letter-spacing: -0.02em;
}

/* Body text sizes */
.text-body {
    font-size: 1rem;
    line-height: 1.6;
}

.text-body-sm {
    font-size: 0.9375rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .text-body-sm {
        font-size: 1rem;
    }
}

/* Small text - labels, captions */
.text-label {
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 600;
}

.text-caption {
    font-size: 0.8125rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .text-caption {
        font-size: 0.875rem;
    }
}

/* Micro text - badges, tags */
.text-micro {
    font-size: 0.6875rem;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .text-micro {
        font-size: 0.75rem;
    }
}

/* Button text */
button,
input,
select,
textarea {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}

button {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
}

@media (min-width: 768px) {
    button {
        font-size: 1rem;
    }
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 var(--glass-shadow);
}

/* Dark mode glass enhancement */
html.dark .glass {
    background: rgba(24, 24, 27, 0.9);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 20px;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

/* Custom scrollbar for tabs navigation */
.custom-tabs-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 197, 94, 0.3) transparent;
}

.custom-tabs-scrollbar::-webkit-scrollbar {
    height: 4px;
}

.custom-tabs-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}

.custom-tabs-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.6));
    border-radius: 10px;
    transition: background 0.2s ease;
}

.custom-tabs-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.8));
}

/*
Typography Usage Guide:
- text-display-lg, text-display, text-display-sm: Hero sections, landing pages (3rem, 2.5rem, 2rem)
- text-h1, text-h2, text-h3, text-h4: Page/section headings (1.75rem, 1.5rem, 1.25rem, 1.125rem)
- text-body: Standard paragraph text (1rem)
- text-body-sm: Slightly smaller body text (0.9375rem)
- text-label: Form labels, emphasized small text (0.875rem, semibold)
- text-caption: Secondary info, help text (0.8125rem)
- text-micro: Badges, tags, tiny labels (0.6875rem, uppercase, bold)

Mobile optimizations are built-in - headings scale up on tablet/desktop automatically.
*/

/* Hide scrollbar */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ====================================
   DARK MODE SPECIFIC STYLES
   ==================================== */

/* Dark mode transitions */
html.dark * {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: ease-out;
    transition-duration: 150ms;
}

/* Dark mode cards and surfaces */
html.dark .bg-white {
    background-color: var(--harvest-card) !important;
}

html.dark .bg-gray-50 {
    background-color: var(--harvest-muted) !important;
}

html.dark .bg-gray-100 {
    background-color: var(--harvest-subtle) !important;
}

/* Dark mode borders */
html.dark .border-gray-100,
html.dark .border-gray-200 {
    border-color: var(--harvest-border) !important;
}

/* Dark mode text adjustments */
html.dark .text-gray-400 {
    color: var(--harvest-text-muted) !important;
}

html.dark .text-gray-500 {
    color: var(--harvest-text-secondary) !important;
}

html.dark .text-gray-600,
html.dark .text-gray-700 {
    color: var(--harvest-text-secondary) !important;
}

html.dark .text-harvest-dark {
    color: var(--harvest-dark) !important;
}

/* Dark mode shadows */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4) !important;
}

html.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Dark mode input fields */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: var(--harvest-input) !important;
    border-color: var(--harvest-border) !important;
    color: var(--harvest-text) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--harvest-text-muted) !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2) !important;
}

/* Dark mode modals and overlays */
html.dark .bg-black\/50,
html.dark .bg-black\/60 {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Dark mode harvest-bg specific */
html.dark .bg-harvest-bg {
    background-color: var(--harvest-bg) !important;
}

html.dark .bg-harvest-subtle {
    background-color: var(--harvest-subtle) !important;
}

/* Dark mode gradient adjustments */
html.dark .from-harvest-green\/20 {
    --tw-gradient-from: rgba(5, 150, 105, 0.15) !important;
}

html.dark .to-harvest-blue\/20 {
    --tw-gradient-to: rgba(2, 132, 199, 0.15) !important;
}

/* Dark mode glass card effect */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
}

html.dark .glass-card {
    background: rgba(30, 30, 35, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Dark mode hover states */
html.dark .hover\:bg-gray-50:hover,
html.dark .md\:hover\:bg-gray-50:hover,
html.dark .active\:bg-gray-50:active {
    background-color: var(--harvest-subtle) !important;
}

html.dark .hover\:bg-gray-100:hover,
html.dark .md\:hover\:bg-gray-100:hover,
html.dark .active\:bg-gray-100:active {
    background-color: var(--harvest-muted) !important;
}

/* Dark mode blue accents */
html.dark .bg-blue-50 {
    background-color: rgba(2, 132, 199, 0.15) !important;
}

html.dark .text-blue-600,
html.dark .text-blue-700 {
    color: #38BDF8 !important;
}

html.dark .border-blue-200 {
    border-color: rgba(2, 132, 199, 0.3) !important;
}

html.dark .text-blue-900 {
    color: #93C5FD !important;
}

/* Dark mode red accents */
html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html.dark .text-red-600 {
    color: #F87171 !important;
}

/* Dark mode gold accents */
html.dark .bg-harvest-gold\/20 {
    background-color: rgba(217, 119, 6, 0.2) !important;
}

html.dark .bg-harvest-goldLight {
    background-color: rgba(217, 119, 6, 0.15) !important;
}

/* Dark mode scrollbar for tabs */
html.dark .custom-tabs-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

/* Smooth theme transition for body */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure icons are visible in dark mode */
html.dark [data-lucide] {
    stroke: currentColor;
}

/* Bottom Navigation Background */
.bottom-nav-bg {
    background-color: rgba(255, 255, 255, 0.9);
}

html.dark .bottom-nav-bg {
    background-color: rgba(24, 24, 27, 0.95);
}