/******************************************************************************
 * PeopleHub Theme
 *
 * Contiene únicamente variables globales del Design System.
 * No agregar componentes ni estilos específicos.
 ******************************************************************************/

:root
{
    /**************************************************************************
     * Brand Colors
     **************************************************************************/

    --ph-primary:
        #1877F2;

    --ph-primary-light:
        #249BFF;

    --ph-primary-dark:
        #0D66D8;

    --ph-secondary:
        #12C7B6;
        
    --ph-dark:
        #1F2937;
        
    --ph-accent:
        #7C3AED;

    --ph-accent-light:
        #8B5CF6;

    --ph-accent-dark:
        #6D28D9;

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

    --ph-success:
        #16A34A;

    --ph-warning:
        #F59E0B;

    --ph-danger:
        #DC2626;

    --ph-info:
        #0EA5E9;
        
    /**************************************************************************
     * Soft Colors
     **************************************************************************/

    --ph-primary-soft:
        #EAF3FF;

    --ph-success-soft:
        #ECFDF3;

    --ph-warning-soft:
        #FFF7E6;

    --ph-danger-soft:
        #FEECEC;

    --ph-info-soft:
        #ECF9FF;
        
    --ph-gray-soft:
        #F3F4F6;

    --ph-accent-soft:
        #F3E8FF;

    /**************************************************************************
     * Neutral Colors
     **************************************************************************/

    --ph-white:
        #FFFFFF;

    --ph-gray-50:
        #FAFBFC;

    --ph-gray-100:
        #F5F7FA;

    --ph-gray-200:
        #EEF2F6;

    --ph-gray-300:
        #DDE3EA;

    --ph-gray-400:
        #B6C0CC;

    --ph-gray-500:
        #8A97A6;

    --ph-gray-600:
        #667281;

    --ph-gray-700:
        #4B5563;

    --ph-gray-800:
        #374151;

    --ph-gray-900:
        #1F2937;

    /**************************************************************************
     * Semantic Theme
     **************************************************************************/

    --ph-background:
        var(--ph-white);

    --ph-surface:
        var(--ph-gray-50);

    --ph-border:
        var(--ph-gray-300);

    --ph-text:
        var(--ph-gray-900);

    --ph-text-secondary:
        var(--ph-gray-600);

    --ph-placeholder:
        var(--ph-gray-500);
    
    --ph-text-inverse:
        var(--ph-white);

    --ph-success-text:
        #166534;

    --ph-warning-text:
        #92400E;

    --ph-danger-text:
        #991B1B;

    --ph-info-text:
        #075985;

    --ph-accent-text:
        #5B21B6;

    /**************************************************************************
     * Typography
     **************************************************************************/

    --ph-font-family:
        "Inter",
        "Segoe UI",
        sans-serif;

    --ph-font-size-xs:
        .72rem;

    --ph-font-size-sm:
        .82rem;

    --ph-font-size-md:
        .92rem;

    --ph-font-size-lg:
        1rem;

    --ph-font-size-xl:
        1.15rem;

    --ph-font-size-2xl:
        1.40rem;

    --ph-font-size-3xl:
        1.80rem;

    /**************************************************************************
     * Font Weight
     **************************************************************************/

    --ph-font-weight-normal:
        400;

    --ph-font-weight-medium:
        500;

    --ph-font-weight-semibold:
        600;

    --ph-font-weight-bold:
        700;

    /**************************************************************************
     * Spacing
     **************************************************************************/

    --ph-space-1:
        4px;

    --ph-space-2:
        8px;

    --ph-space-3:
        12px;

    --ph-space-4:
        16px;

    --ph-space-5:
        20px;

    --ph-space-6:
        24px;

    --ph-space-7:
        28px;

    --ph-space-8:
        32px;

    --ph-space-9:
        40px;

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

    --ph-radius-xs:
        4px;

    --ph-radius-sm:
        8px;

    --ph-radius-md:
        12px;

    --ph-radius-lg:
        18px;

    --ph-radius-xl:
        24px;

    --ph-radius-pill:
        999px;

    --ph-radius-circle:
        50%;

    /**************************************************************************
     * Borders
     **************************************************************************/

    --ph-border-width:
        1px;

    /**************************************************************************
     * Shadows
     **************************************************************************/

    --ph-shadow-xs:
        0 1px 2px rgb(0 0 0 / .04);

    --ph-shadow-sm:
        0 2px 6px rgb(0 0 0 / .06);

    --ph-shadow-md:
        0 6px 16px rgb(0 0 0 / .08);

    --ph-shadow-lg:
        0 12px 28px rgb(0 0 0 / .10);

    --ph-shadow-xl:
        0 22px 48px rgb(0 0 0 / .14);

    /**************************************************************************
     * Transition
     **************************************************************************/
    
    --ph-transition-fast:
        .15s ease;
    
    --ph-transition:
        .20s ease;
    
    --ph-transition-slow:
        .30s ease;
    
    /**************************************************************************
     * Focus
     **************************************************************************/
    
    --ph-focus-ring:
        0 0 0 3px rgb(24 119 242 / .18);
    
    /**************************************************************************
     * Opacity
     **************************************************************************/

    --ph-disabled-opacity:
        .55;
        
    /******************************************************************************
     * Layout
     ******************************************************************************/
    
    --ph-navbar-height:
        64px;
    
    --ph-sidebar-width:
        260px;
    
    --ph-container-width:
        1320px;
        
    /**************************************************************************
     * Overlay
     **************************************************************************/
    
    --ph-overlay:
        rgb(31 41 55 / .35);

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

    --ph-z-dropdown:
        1000;

    --ph-z-sticky:
        1020;

    --ph-z-fixed:
        1030;

    --ph-z-modal-backdrop:
        1050;

    --ph-z-modal:
        1055;

    --ph-z-toast:
        /*1080;*/
        4000;

    --ph-z-tooltip:
        1090;
}