/* 
   NubiBooks: Olive Reserve Design System 
   Consolidated CSS Styles
*/

/* 1. Global Typography & Foundation */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=Work+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
    --primary-50: #e7ece7;
    --primary-100: #d0dac9;
    --primary-200: #b2c7a3;
    --primary-300: #91b17d;
    --primary-400: #789f62;
    --primary-500: #455C33;
    --primary-600: #3d4e2e;
    --primary-700: #314025;
    --primary-800: #24311c;
    --primary-900: #163300;

    --surface-bg: #f6fbf5;
    --surface-card: #ffffff;
    --text-main: #171d1a;
    --text-muted: #455c33;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--surface-bg);
    color: var(--text-main);
}

/* 2. Flowbite Component Customizations */

/* Buttons */
.btn-primary {
    background-color: var(--primary-500);
    color: white;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-600);
}

.btn-outline {
    border: 1px solid var(--primary-500);
    color: var(--primary-500);
}

/* Cards & Containers */
.card-premium {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(69, 92, 51, 0.1);
}

/* Form Inputs */
.input-field {
    background-color: #f0f5f0;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    transition: border-color 0.2s;
}

.input-field:focus {
    border-color: var(--primary-500);
    outline: none;
}

/* 3. Verification Specific Styles (Modals) */
.verification-modal {
    max-width: 32rem;
    border-radius: 1.5rem;
    overflow: hidden;
}

.otp-input {
    width: 3.5rem;
    height: 4rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    background: #f0f5f0;
    border-radius: 0.75rem;
}

/* 4. Financial Dashboard Elements */
.revenue-card {
    background: linear-gradient(135deg, #455C33 0%, #2e441e 100%);
    color: white;
}

.trend-up {
    color: #10b981;
}

.trend-down {
    color: #ef4444;
}

/* 5. Navigation Styles */
.sidebar-nav {
    background-color: #f6fbf5;
    border-right: 1px solid rgba(196, 200, 187, 0.15);
}

.nav-item-active {
    background-color: var(--primary-100);
    color: var(--primary-900);
    font-weight: 600;
}

/* 6. Utility Overrides */
.text-on-surface {
    color: var(--primary-900);
}

.bg-surface-tonal {
    background-color: #dfe4df;
}