body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Background gradient with primary color family */
.gradient-bg {
    background: linear-gradient(135deg, #e6f7fc 0%, #bde7f2 50%, #a8dcec 100%);
}

/* Text gradient using primary color shades */
.gradient-text {
    background: linear-gradient(135deg, #00789e 0%, #005f7c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Buttons */
.gradient-button {
    background: linear-gradient(135deg, #00789e 0%, #005f7c 100%);
}

.gradient-button:hover {
    background: linear-gradient(135deg, #006a8c 0%, #004e66 100%);
}

/* Icon configuration */
.icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #e3f2f7;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #8ec9d8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4bb9d6;
}

/* Fade animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Tabs */
.tab-button {
    transition: all 0.2s ease;
}

.tab-button:not(.active) {
    background-color: #f0fbff;
    color: #004e66;
}

.tab-button.active {
    background: linear-gradient(135deg, #00789e 0%, #005f7c 100%);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}