:root {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --color-bg: #031a14;
    --color-text: #e8fff4;
    --color-muted: #cfe8dc;
    --surface-section: rgba(13, 38, 32, 0.75);
    --surface-card: rgba(11, 31, 25, 0.75);
    --chip-bg: rgba(5, 33, 23, 0.85);
    --overlay-btn-bg: rgba(5, 33, 23, 0.7);
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --ring-muted: rgba(255, 255, 255, 0.1);
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 250ms ease, color 250ms ease;
}

body.theme-dark {
    --color-bg: #031a14;
    --color-text: #e8fff4;
    --color-muted: #cfe8dc;
    --surface-section: rgba(13, 38, 32, 0.75);
    --surface-card: rgba(11, 31, 25, 0.75);
    --chip-bg: rgba(5, 33, 23, 0.85);
    --overlay-btn-bg: rgba(5, 33, 23, 0.7);
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --ring-muted: rgba(255, 255, 255, 0.1);
}

body.theme-light {
    --color-bg: #f6fffa;
    --color-text: #05291f;
    --color-muted: #4c6f63;
    --surface-section: rgba(255, 255, 255, 0.94);
    --surface-card: rgba(255, 255, 255, 0.97);
    --chip-bg: rgba(255, 255, 255, 0.9);
    --overlay-btn-bg: rgba(0, 128, 63, 0.1);
    --border-soft: rgba(8, 72, 49, 0.14);
    --border-strong: rgba(8, 72, 49, 0.22);
    --ring-muted: rgba(8, 72, 49, 0.15);
}

.carousel-track {
    transition: transform 600ms ease;
    align-items: stretch;
}

.carousel-slide {
    flex: 0 0 100%;
}

.carousel-viewport {
    width: 100%;
}

.carousel-image {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 640px) {
    .carousel-image {
        max-height: 24rem;
        object-fit: cover;
    }
}

.gradient-ring {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 60%);
}

body.theme-light .gradient-ring {
    background: radial-gradient(circle at 40% 40%, rgba(0, 168, 89, 0.08), transparent 65%);
}

.icon-badge svg {
    width: 1.35rem;
    height: 1.35rem;
}

.section-panel {
    background: var(--surface-section);
    border-color: var(--border-soft);
    transition: background-color 200ms ease, border-color 200ms ease;
}

.card-panel {
    background: var(--surface-card);
    border-color: var(--border-soft);
    transition: background-color 200ms ease, border-color 200ms ease;
}

.overlay-chip {
    background: var(--chip-bg);
    transition: background-color 200ms ease, color 200ms ease;
}

.overlay-btn {
    background: var(--overlay-btn-bg);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

body.theme-light .overlay-btn:hover {
    background: rgba(0, 128, 63, 0.2) !important;
}

.theme-toggle {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--overlay-btn-bg);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 150ms ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
}

.theme-toggle__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease, transform 200ms ease;
}

.theme-toggle__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.theme-toggle__icon--sun {
    opacity: 0;
    transform: scale(0.6);
}

.theme-toggle__icon--moon {
    opacity: 1;
    transform: scale(1);
}

body.theme-light .theme-toggle {
    background: #ffffff;
    border-color: rgba(8, 72, 49, 0.12);
    color: #03623c;
    box-shadow: 0 10px 25px rgba(3, 32, 24, 0.08);
}

body.theme-light .theme-toggle__icon--sun {
    opacity: 1;
    transform: scale(1);
}

body.theme-light .theme-toggle__icon--moon {
    opacity: 0;
    transform: scale(0.6);
}

body.theme-dark .theme-toggle__icon--sun {
    opacity: 0;
    transform: scale(0.6);
}

body.theme-dark .theme-toggle__icon--moon {
    opacity: 1;
    transform: scale(1);
}

body.theme-light .text-white,
body.theme-light .text-slate-100 {
    color: #0f2f25;
}

body.theme-light .text-slate-200 {
    color: #1f4539;
}

body.theme-light .text-slate-300 {
    color: var(--color-muted);
}

body.theme-light .text-brand {
    color: #00803f;
}

body.theme-light .text-brand\/80 {
    color: rgba(0, 128, 63, 0.8);
}

body.theme-light .bg-white\/10 {
    background-color: rgba(3, 37, 25, 0.06) !important;
}

body.theme-light .bg-white\/20 {
    background-color: rgba(3, 37, 25, 0.12) !important;
}

body.theme-light .border-white\/10 {
    border-color: rgba(3, 37, 25, 0.08) !important;
}

body.theme-light .border-white\/20 {
    border-color: rgba(3, 37, 25, 0.14) !important;
}

body.theme-light .ring-white\/10 {
    --tw-ring-color: var(--ring-muted);
}

body.theme-light .overlay-chip {
    color: #0f2f25;
}