@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:wght@300;400;500;600;700&display=swap');

/* Apply Inter as the default base font */
body, html, .fi-body {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    background-color: #F4F8FF !important; /* Soft Ice Blue */
}

/* Dark mode compatibility */
.dark body, .dark html, .dark .fi-body {
    background-color: #080D2B !important; /* Midnight Navy */
}

/* Luxury headings Marcellus with size caps */
.fi-header-heading,
.fi-ta-header-title,
.fi-wi-widget h2,
.fi-section-header-heading,
.fi-modal-heading {
    font-family: 'Marcellus', serif !important;
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important; /* Cap at 1.8rem */
    font-weight: normal !important;
    color: #2B3192 !important; /* Kevron Royal Blue */
}

.dark .fi-header-heading,
.dark .fi-ta-header-title,
.dark .fi-wi-widget h2,
.dark .fi-section-header-heading,
.dark .fi-modal-heading {
    color: #D6A84F !important; /* Champagne Gold */
}

/* Subheadings / section headers */
.fi-section-header-description,
.fi-modal-description,
.fi-ta-header-description {
    font-size: 0.8rem !important;
    max-font-size: 0.8rem !important;
}

/* Cap smaller headings (H2 to H6) below 1.625rem */
h2, h3, h4, h5, h6,
.fi-wi-stats-overview-stat-label,
.fi-fo-field-label {
    font-size: clamp(0.85rem, 3vw, 1.2rem) !important;
}

/* Enforce 0.875rem font size for UI, tables, form inputs, etc. */
.fi-ta-cell,
.fi-fo-component,
.fi-fo-field-input,
.fi-dropdown,
.fi-sidebar-item-label,
.fi-breadcrumbs-item,
.fi-ta-actions,
.fi-wi-stats-overview-stat-value {
    font-size: 0.875rem !important;
}

/* Stat widget values should look premium and elegant but not oversized */
.fi-wi-stats-overview-stat-value {
    font-family: 'Marcellus', serif !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
}

/* Buttons must use border-radius: 50px */
.fi-btn,
.fi-icon-btn,
.fi-ta-action,
.fi-ac-action,
button[type="submit"],
.fi-modal-actions button {
    border-radius: 50px !important;
    transition: all 0.4s ease-in-out !important; /* Slow hover transitions */
}

/* Card, widgets, and panels styling */
.fi-wi-card,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-section,
.fi-modal-window,
.fi-sidebar-ctn,
.fi-topbar {
    border-radius: 0.1rem !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
    background-color: #FFFFFF !important; /* Cloud White */
    transition: all 0.4s ease-in-out !important; /* Slow hover transitions */
}

/* Dark mode cards */
.dark .fi-wi-card,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn,
.dark .fi-section,
.dark .fi-modal-window,
.dark .fi-sidebar-ctn,
.dark .fi-topbar {
    background-color: #172033 !important; /* Charcoal Navy */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px !important;
}

/* Hover effects for cards */
.fi-wi-card:hover,
.fi-wi-stats-overview-stat:hover,
.fi-ta-ctn:hover,
.fi-section:hover {
    background-color: #F4F8FF !important; /* Soft Ice Blue */
    transform: translateY(-2px);
}

.dark .fi-wi-card:hover,
.dark .fi-wi-stats-overview-stat:hover,
.dark .fi-ta-ctn:hover,
.dark .fi-section:hover {
    background-color: #080D2B !important; /* Midnight Navy */
}

/* Styled scrollbar matching the theme */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F4F8FF;
}
::-webkit-scrollbar-thumb {
    background: #2B3192;
    border-radius: 3px;
}
.dark ::-webkit-scrollbar-track {
    background: #172033;
}
.dark ::-webkit-scrollbar-thumb {
    background: #D6A84F;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}