/* ==========================================================================
   ELX UI · Theme
   Design Tokens

   ⚠️
   Este archivo únicamente define Design Tokens.
   Nunca agregar clases CSS aquí.
   ========================================================================== */

:root{

    /*
    |--------------------------------------------------------------------------
    | COLORS
    |--------------------------------------------------------------------------
    */
    
    --elx-white:#f8f8f6;

    --elx-black:#18181b;
    
    --elx-background:#f7f8fa;
    
    --elx-surface:#ffffff;
    
    --elx-border:#e5e7eb;
    
    --elx-text:#18181b;
    
    --elx-text-muted:#6b7280;

    --elx-primary:#2b7fff;
    
    /*
    |--------------------------------------------------------------------------
    | ACCENT
    |--------------------------------------------------------------------------
    */
    
    --elx-accent:#202124;
    
    --elx-accent-hover:#2b2d31;
    
    --elx-accent-soft:#f2f2f2;
    
    --elx-success:#16a34a;
    
    --elx-success-hover:#15803d;
    
    --elx-success-soft:#ecfdf3;
    
    --elx-warning:#d97706;
    
    --elx-warning-hover:#b45306;
    
    --elx-warning-soft:#fff7ed;
    
    --elx-danger:#dc2626;
    
    --elx-danger-hover:#b91c1c;
    
    --elx-danger-soft:#fef2f2;
    
    /*
    |--------------------------------------------------------------------------
    | COLOR STATES
    |--------------------------------------------------------------------------
    */
    
    --elx-primary-hover:#1f6fe6;
    
    --elx-primary-soft:#eef5ff;
    
    
    
    --elx-overlay-blur:8px;
    
    /*
    |--------------------------------------------------------------------------
    | FONT FAMILY
    |--------------------------------------------------------------------------
    */
    
    --elx-font-family:
        "Inter",
        system-ui,
        sans-serif;
        
    --elx-font-family-mono:

        ui-monospace,
    
        SFMono-Regular,
    
        Menlo,
    
        Consolas,
    
        monospace;

    /*
    |--------------------------------------------------------------------------
    | TYPOGRAPHY
    |--------------------------------------------------------------------------
    */

    --elx-font-xs:.75rem;

    --elx-font-sm:.875rem;

    --elx-font-md:1rem;

    --elx-font-lg:1.125rem;

    --elx-font-xl:1.25rem;

    --elx-font-2xl:1.5rem;

    --elx-font-3xl:2rem;
    
    --elx-font-4xl:2.5rem;
    
    --elx-font-5xl:3rem;

    --elx-font-light:300;

    --elx-font-normal:400;

    --elx-font-medium:500;

    --elx-font-semibold:600;

    --elx-font-bold:700;

    --elx-line-none:1;

    --elx-line-normal:1.5;

    --elx-line-loose:1.8;

    /*
    |--------------------------------------------------------------------------
    | RADIUS
    |--------------------------------------------------------------------------
    */

    --elx-radius-xs:8px;

    --elx-radius-sm:12px;

    --elx-radius-md:20px;

    --elx-radius-lg:26px;

    --elx-radius-xl:32px;

    --elx-radius-full:999px;

    /*
    |--------------------------------------------------------------------------
    | SPACING
    |--------------------------------------------------------------------------
    */

    --elx-space-xs:8px;

    --elx-space-sm:12px;

    --elx-space-md:20px;

    --elx-space-lg:26px;

    --elx-space-xl:32px;

    --elx-space-2xl:48px;

    /*
    |--------------------------------------------------------------------------
    | CONTAINERS
    |--------------------------------------------------------------------------
    */

    --elx-container-sm:640px;

    --elx-container-md:860px;

    --elx-container-lg:1100px;

    --elx-container-xl:1280px;

    /*
    |--------------------------------------------------------------------------
    | CONTROLS
    |--------------------------------------------------------------------------
    */

    --elx-control-height-sm:42px;

    --elx-control-height-md:50px;

    --elx-control-height-lg:58px;

    --elx-control-radius:
        var(--elx-radius-md);
        
    --elx-control-textarea-min-height:150px;
    
    --elx-control-icon-size:18px;
    
    --elx-control-icon-offset:
        var(--elx-space-md);

    /*
    |--------------------------------------------------------------------------
    | BORDER
    |--------------------------------------------------------------------------
    */

    --elx-border-width:1px;

    --elx-border-style:solid;

    /*
    |--------------------------------------------------------------------------
    | SHADOW
    |--------------------------------------------------------------------------
    */

    --elx-shadow-sm:
        0 2px 8px rgb(0 0 0 / .04);

    --elx-shadow-md:
        0 12px 35px rgb(0 0 0 / .08);

    --elx-shadow-lg:
        0 30px 70px rgb(0 0 0 / .12);

    /*
    |--------------------------------------------------------------------------
    | OPACITY
    |--------------------------------------------------------------------------
    */

    --elx-opacity-disabled:.45;

    --elx-opacity-muted:.65;

    --elx-opacity-overlay:.75;

    /*
    |--------------------------------------------------------------------------
    | EFFECTS
    |--------------------------------------------------------------------------
    */

    --elx-focus-ring:
        0 0 0 4px rgb(43 127 255 / .15);

    --elx-overlay:
        rgb(0 0 0 / .35);

    /*
    |--------------------------------------------------------------------------
    | TRANSITIONS
    |--------------------------------------------------------------------------
    */

    --elx-transition-fast:
        .15s ease;

    --elx-transition:
        .22s cubic-bezier(.2,.8,.2,1);

    --elx-transition-slow:
        .35s cubic-bezier(.2,.8,.2,1);

    /*
    |--------------------------------------------------------------------------
    | ICONS
    |--------------------------------------------------------------------------
    */

    --elx-icon-xs:14px;

    --elx-icon-sm:18px;

    --elx-icon-md:22px;

    --elx-icon-lg:28px;

    /*
    |--------------------------------------------------------------------------
    | AVATARS
    |--------------------------------------------------------------------------
    */

    --elx-avatar-sm:34px;

    --elx-avatar-md:42px;

    --elx-avatar-lg:56px;

    --elx-avatar-xl:72px;

    /*
    |--------------------------------------------------------------------------
    | SPINNERS
    |--------------------------------------------------------------------------
    */

    --elx-spinner-sm:18px;

    --elx-spinner-md:28px;

    --elx-spinner-lg:42px;

    /*
    |--------------------------------------------------------------------------
    | LAYERS
    |--------------------------------------------------------------------------
    */

    --elx-z-dropdown:300;

    --elx-z-toast:500;

    --elx-z-modal:700;
    
    --elx-z-overlay:800;

    --elx-z-sheet:900;

    --elx-z-loader:1000;
    
    /*
    |--------------------------------------------------------------------------
    | BADGES
    |--------------------------------------------------------------------------
    */
    
    --elx-badge-height:28px;
    
    --elx-badge-padding-x:12px;
    
    --elx-badge-gap:6px;
    
    /*
    |--------------------------------------------------------------------------
    | CARDS
    |--------------------------------------------------------------------------
    */
    
    --elx-card-padding:
        var(--elx-space-lg);
    
    --elx-card-gap:
        var(--elx-space-lg);
    
    --elx-card-radius:
        var(--elx-radius-lg);
    
    --elx-card-shadow:
        var(--elx-shadow-sm);
        
    /*
    |--------------------------------------------------------------------------
    | AVATARS
    |--------------------------------------------------------------------------
    */
    
    --elx-avatar-sm:36px;
    
    --elx-avatar-md:48px;
    
    --elx-avatar-lg:64px;
    
    --elx-avatar-xl:96px;
    
    --elx-avatar-radius:
        var(--elx-radius-full);
    
    --elx-avatar-background:
        #ececec;
        
    /*
    |--------------------------------------------------------------------------
    | IMAGES
    |--------------------------------------------------------------------------
    */
    
    --elx-image-radius:
        var(--elx-radius-lg);
    
    --elx-image-background:
        var(--elx-avatar-background);
        
    /*
    |--------------------------------------------------------------------------
    | ICONS
    |--------------------------------------------------------------------------
    */
    
    --elx-icon-xs:14px;
    
    --elx-icon-sm:18px;
    
    --elx-icon-md:22px;
    
    --elx-icon-lg:28px;
    
    --elx-icon-xl:36px;
    

    /*
    |--------------------------------------------------------------------------
    | SPINNERS
    |--------------------------------------------------------------------------
    */
    
    --elx-spinner-sm:18px;
    
    --elx-spinner-md:28px;
    
    --elx-spinner-lg:42px;
    
    --elx-spinner-border:2px;
    
    --elx-spinner-color:
        var(--elx-black);
    
    --elx-spinner-track:
        rgb(0 0 0 / .08);
        
    /*
    |--------------------------------------------------------------------------
    | DARK THEME
    |--------------------------------------------------------------------------
    */
    
    [data-theme="dark"]{
    
        /*
        | Reserved
        */
    
    }
    
    /*
    |--------------------------------------------------------------------------
    | PROGRESS
    |--------------------------------------------------------------------------
    */
    
    --elx-progress-height:8px;
    
    --elx-progress-radius:
        var(--elx-radius-full);
    
    --elx-progress-background:
        rgb(0 0 0 / .08);
    
    --elx-progress-color:
        var(--elx-black);
        
    /*
    |--------------------------------------------------------------------------
    | EMPTY STATE
    |--------------------------------------------------------------------------
    */
    
    --elx-empty-icon-size:64px;
    
    --elx-empty-max-width:420px;

}

/*
|--------------------------------------------------------------------------
| TOAST
|--------------------------------------------------------------------------
*/

--elx-toast-width:360px;

--elx-toast-gap:
    var(--elx-space-md);

--elx-toast-padding:
    var(--elx-space-md);

--elx-toast-radius:
    var(--elx-radius-lg);

--elx-toast-shadow:
    var(--elx-shadow-lg);

--elx-toast-icon-size:
    var(--elx-icon-lg);

--elx-toast-title-size:
    var(--elx-font-md);

--elx-toast-message-size:
    var(--elx-font-sm);

--elx-toast-success:
    var(--elx-success);

--elx-toast-warning:
    var(--elx-warning);

--elx-toast-danger:
    var(--elx-danger);

--elx-toast-info:
    var(--elx-primary);