/* ==========================================================================
       1. ROOT / DESIGN TOKENS
       ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Brand
       ---------------------------------------------------------------------- */

    --app-primary: #07913b;
    --app-primary-hover: #39b54a;
    --app-primary-active: #066313;

    --app-secondary: #128C7E;
    --app-secondary-hover: #0F7A6E;

    /* ----------------------------------------------------------------------
       Semantic Colors
       ---------------------------------------------------------------------- */

    --app-success: #07913b  ;
    --app-danger: #DC3545;
    --app-warning: #F59E0B;
    --app-info: #0EA5E9;

    /* ----------------------------------------------------------------------
       Text
       ---------------------------------------------------------------------- */

    --app-text: #1F2937;
    --app-text-secondary: #4B5563;
    --app-text-muted: #6B7280;
    --app-text-light: #9CA3AF;
    --app-heading: #111827;

    /* ----------------------------------------------------------------------
       Backgrounds
       ---------------------------------------------------------------------- */

    --app-background: #F7F9FA;
    --app-surface: #FFFFFF;
    --app-surface-secondary: #F3F5F6;
    --app-surface-hover: #F8FAFA;

    /* ----------------------------------------------------------------------
       Borders
       ---------------------------------------------------------------------- */

    --app-border: #E5E7EB;
    --app-border-light: #EEF0F2;
    --app-border-dark: #D1D5DB;

    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */

    --app-font-family: "Outfit", sans-serif;

    --app-font-size-xs: 0.75rem;
    --app-font-size-sm: 0.875rem;
    --app-font-size-base: 1rem;
    --app-font-size-lg: 1.125rem;
    --app-font-size-xl: 1.25rem;
    --app-font-size-2xl: 1.5rem;
    --app-font-size-3xl: 1.875rem;

    --app-line-height-tight: 1.25;
    --app-line-height-normal: 1.5;
    --app-line-height-relaxed: 1.75;

    /* ----------------------------------------------------------------------
       Border Radius
       ---------------------------------------------------------------------- */

    --app-radius-sm: 6px;
    --app-radius: 8px;
    --app-radius-lg: 12px;
    --app-radius-xl: 16px;
    --app-radius-pill: 999px;

    /* ----------------------------------------------------------------------
       Shadows
       ---------------------------------------------------------------------- */

    --app-shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.04);

    --app-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06);

    --app-shadow-lg:
        0 10px 30px rgba(0, 0, 0, 0.08);

    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    --app-sidebar-width: 250px;
    --app-sidebar-collapsed-width: 80px;
    --app-topbar-height: 70px;

    --app-content-max-width: 1600px;

    /* ----------------------------------------------------------------------
       Form Controls
       ---------------------------------------------------------------------- */

    --app-input-height: 42px;
    --app-button-height: 42px;

    /* ----------------------------------------------------------------------
       Z-Index
       ---------------------------------------------------------------------- */

    --app-z-dropdown: 1000;
    --app-z-sticky: 1020;
    --app-z-fixed: 1030;
    --app-z-modal: 1050;
    --app-z-popover: 1060;
    --app-z-tooltip: 1070;
}


/* ==========================================================================
   2. MAP OUR THEME TO MOFI
   ========================================================================== */

:root {

    /*
     * Mofi primary / secondary colors
     */
    --theme-default: var(--app-primary);
    --theme-secondary: var(--app-secondary);

    /*
     * Mofi body colors
     */
    --body-font-color: var(--app-text);
    --light-bg: var(--app-background);
    --white: var(--app-surface);

    /*
     * Mofi heading color
     */
    --bs-heading-color: var(--app-heading);

    /*
     * Bootstrap-style colors
     */
    --bs-primary: var(--app-primary);
    --bs-secondary: var(--app-secondary);

    --bs-success: var(--app-success);
    --bs-danger: var(--app-danger);
    --bs-warning: var(--app-warning);
    --bs-info: var(--app-info);

    --bs-body-color: var(--app-text);
    --bs-body-bg: var(--app-background);

    --bs-border-color: var(--app-border);
}


/* ==========================================================================
   3. GLOBAL TYPOGRAPHY
   ========================================================================== */

html,
body {
    font-family: var(--app-font-family);
}

body {
    color: var(--app-text);
    background-color: var(--app-background);
    line-height: var(--app-line-height-normal);
}


/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--app-heading);
    font-family: var(--app-font-family);
}


/* Links */

a {
    color: var(--app-primary);
}

a:hover {
    color: var(--app-primary-hover);
}


/* ==========================================================================
   4. FORM CONTROLS
   ========================================================================== */

.form-control,
.form-select {
    border-color: var(--app-border);
    color: var(--app-text);
    background-color: var(--app-surface);
    border-radius: var(--app-radius);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 211, 102, 0.12);
}

.form-control::placeholder {
    color: var(--app-text-light);
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-primary-active);
    --bs-btn-active-border-color: var(--app-primary-active);

    --bs-btn-focus-shadow-rgb: 37, 211, 102;
}


/* ==========================================================================
   6. CARDS
   ========================================================================== */

.card {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}


/* ==========================================================================
   7. TABLES
   ========================================================================== */

.table {
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
}

.table thead th {
    color: var(--app-text-secondary);
    font-weight: 500;
}


/* ==========================================================================
   8. BADGES
   ========================================================================== */

.badge {
    font-weight: 500;
    border-radius: var(--app-radius-pill);
}


/* ==========================================================================
   9. DROPDOWNS
   ========================================================================== */

.dropdown-menu {
    border-color: var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.dropdown-item {
    color: var(--app-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--app-text);
    background-color: var(--app-surface-secondary);
}


/* ==========================================================================
   10. MODALS
   ========================================================================== */

.modal-content {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--app-border);
}


/* ==========================================================================
   11. GLOBAL UTILITY CLASSES
   ========================================================================== */

.text-app-primary {
    color: var(--app-primary) !important;
}

.text-app-secondary {
    color: var(--app-text-secondary) !important;
}

.text-app-muted {
    color: var(--app-text-muted) !important;
}

.bg-app-primary {
    background-color: var(--app-primary) !important;
}

.bg-app-surface {
    background-color: var(--app-surface) !important;
}

.bg-app-background {
    background-color: var(--app-background) !important;
}

.border-app {
    border-color: var(--app-border) !important;
}


/* ==========================================================================
   12. SELECTION
   ========================================================================== */

::selection {
    color: #fff;
    background-color: var(--app-primary);
}